Danny White
04c9fb7c3e
## What kind of change does this PR introduce? Feature and design-system update. Resolves DEPR-551. This is a narrower redo of #45302 after the revert in #45535. ## What is the current behaviour? The reverted implementation made Admonition more flexible, but it also changed Studio callsites, touched shared Alert styling, renamed the design-system Tailwind config, and changed Docs-facing content/API assumptions in a way that broke production docs static generation. ## What is the new behaviour? Admonition now supports description-only content, children-only content, optional `title`, legacy `label`, and `type="success"` without touching `apps/docs/content/**` or shared Alert styling. `title` wins over `label` when both are provided. The runtime component props stay backwards-compatible for existing MDX and Studio usage, while `AdmonitionStrictProps` captures the stricter new-usage contract for tests and future callsites. The design-system docs and registry include description-only and success examples, and the Admonition tests cover the rendering paths that broke production previously. | After | | --- | | <img width="1668" height="1768" alt="CleanShot 2026-05-06 at 17 35 13@2x" src="https://github.com/user-attachments/assets/1c00ea7f-e3ca-45eb-8af9-3536b657c341" /> | ## Additional context These things that were in #45302 have been left out (unless checked): - [ ] Studio callsite rewrites from title/label to description - [ ] Shared Alert text-colour changes - [ ] Design-system Tailwind config rename - [ ] Design-system global CSS changes - [ ] Any docs content migration or label deprecation - [ ] Any production docs workaround <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **New Features** * Added success admonition variant with dedicated styling and icon. * Introduced description-only admonition example. * **Documentation** * Expanded admonition guidance on title vs description usage and best practices. * Added example sections showcasing description-only and success variants. * **Tests** * Added comprehensive tests covering admonition variants and rendering/precedence behavior. <!-- end of auto-generated comment: release notes by coderabbit.ai -->
Supabase Design System
Design resources for building consistent user experiences at Supabase.
Getting started
First, make a copy of .env.local.example and name it env.local. Then install any required packages and start the development server:
cd apps/design-system
pnpm i
pnpm dev:full
The dev:full command runs both the Next.js development server and Contentlayer concurrently, which is recommended for most development workflows.
Alternative commands
You can also run the development server and content watcher separately:
# Run only the Next.js development server
pnpm dev
# Run only the content watcher (in a separate terminal shell)
pnpm content:dev
Or run the development server from the root directory:
pnpm dev:design-system
To run both the development server and content watcher from the root directory, you can use:
# Run the development server
pnpm dev:design-system
# Run the content watcher (in a separate terminal shell)
pnpm --filter=design-system content:dev
Open http://localhost:3003 in your browser to see the result.
Watching for MDX changes
The dev:full command automatically watches for changes to MDX files with hot reload. If you're running the pnpm dev separately, you'll need to run pnpm content:dev in a separate terminal shell to watch for content changes.
Adding components
The design system references components rather than housing them. That’s an important distinction to make, as everything that follows here is about the documentation of components. You can add or edit components in one of these two places:
packages/ui: basic UI componentspackages/ui-patterns: components which are built using NPM libraries or amalgamations of components frompatterns/ui
There are several parts of this design system that need to be manually updated after components have been added or removed (from documentation). These include:
config/docs.ts: list of components in the sidebarcontent/docs: the actual component documentationregistry/examples.ts: list of example componentsregistry/fragments.ts: list of fragment componentsregistry/charts.ts: list of chart componentsregistry/default/example/*: the actual example components
You will need to rebuild the design system’s registry after making new additions:
cd apps/design-system
pnpm build:registry