## What kind of change does this PR introduce?
Bug fix + small shared component
## What is the current behavior?
After the recent colour system changes, several UI elements lost
contrast in light mode:
- `InfoIcon` with a background appeared as a flat grey circle (glyph
fill matched the background)
- Several buttons forced `text-white`, which no longer contrasts
correctly against the updated brand fills
- Selected / completed check badges were inconsistent between call sites
## What is the new behavior?
- `InfoIcon` uses `text-background` for the glyph fill so the "i" is
visible against the grey circle
- www primary buttons drop hardcoded `text-white` and use standard
`Button` colours
- New shared `SuccessCheck` in `ui` for selected state and completion
progress (green circle; white check in light mode, black check in dark
mode)
- Documented in the design system with selected + progress examples
Note on `InfoIcon`:
[#47933](https://github.com/supabase/supabase/pull/47933) landed a
related fix using `text-background-200` (`--card`). This PR keeps
`text-background` instead, to match `CheckIcon` / `EyeOffIcon` in the
same file and avoid the legacy alias.
| Before | After |
| --- | --- |
| <img width="688" height="268" alt="CleanShot 2026-07-10 at 11 30
25@2x"
src="https://github.com/user-attachments/assets/c0276b0c-1023-46c8-805c-35a22def1353"
/> | <img width="664" height="278" alt="CleanShot 2026-07-10 at 11 29
43@2x"
src="https://github.com/user-attachments/assets/3508cf37-1b48-4fb7-a939-83522feb44f1"
/> |
| <img width="468" height="550" alt="CleanShot 2026-07-10 at 11 31
04@2x"
src="https://github.com/user-attachments/assets/acd42273-15ce-4fb2-9d0c-5a43ac23073c"
/> | <img width="460" height="540" alt="CleanShot 2026-07-10 at 11 32
50@2x"
src="https://github.com/user-attachments/assets/f66fb4bc-81f7-4df1-95f5-63980c4e8537"
/> |
## To test
Use the staging preview link from this PR and check the following in
**light mode** (and spot-check dark mode):
**www**
- Visit `/404` — "Head back" button should have readable text (not
white-on-green)
- Visit `/company` — "Join the team" button in the Team section
- Visit a product page with a hero CTA (e.g. `/database`, `/realtime`) —
primary "Start for free" button
**studio**
- Database → Replication → deploy a read replica — footer `InfoIcon`
next to the pricing line should show a visible "i" inside the grey
circle
- `/redeem` — select an org; green `SuccessCheck` should match
light/dark contrast (white check / black check)
- Settings → API → service role key row — red "secret" tag text should
be readable
**design system**
- `/docs/components/success-check` — demo, selected-state, and progress
examples
## What
Fixes misaligned day cells in the PITR calendar widget for the first
week of the month.
## Why
The PITR calendar draws a \`border\` on each day cell via
\`classNames.day\`. The day \`<td>\` has no explicit width, so
\`box-sizing: border-box\` doesn't apply and the 1px borders add to its
size (36px → 38px), while the weekday header cells stay pinned at
\`w-9\` (36px). Bordered day cells therefore drift right of their
headers, which is most visible in the first partial week where
unbordered leading cells sit flush next to the wider bordered ones.
## How
Pin each day cell to a fixed \`w-9 box-border\` so the border is drawn
inside the 36px box, and let the day button fill the cell (\`w-full\`).
Column pitch now matches the weekday headers regardless of border state.
Class-only change, no logic touched.
Closes FE-3886
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Style**
* Improved calendar day cell sizing and layout for more consistent
rendering.
* Ensured day buttons use full-width styling where applicable, while
preserving existing hover, border, background, and corner behavior.
* **Documentation**
* Added documentation for “Calendar with disabled days,” including a new
interactive preview.
* **New Features**
* Introduced a calendar example demonstrating disabled-day behavior with
mid-week month start and restricted date selection.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---------
Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
Co-authored-by: Ivan Vasilov <vasilov.ivan@gmail.com>
Upgrades the monorepo to TypeScript 7.0.2, released 2026-07-08. `tsc` is
now the native Go compiler
([announcement](https://devblogs.microsoft.com/typescript/announcing-typescript-7-0/))
— full turbo typecheck drops from ~56s to ~19s locally.
TS 7.0 ships **without a programmatic API** (it lands in 7.1), so this
uses Microsoft's recommended side-by-side setup: the `typescript` name
resolves to `@typescript/typescript6` (the 6.0 API republished) for API
consumers — typescript-eslint and Next.js build typechecking — while
`@typescript/native` (the real `typescript@7.0.2`) owns the `tsc` bin
that typecheck scripts run. Exactly one version of each is in the
lockfile; nothing imports the native package as a library. When 7.1 +
tool support lands we can collapse back to a single `typescript` dep in
the catalog.
**Changed:**
- `pnpm-workspace.yaml`: catalog aliases for `typescript` /
`@typescript/native`
- 17 package.json files: `@typescript/native` added beside each
`typescript` dep so every package's `tsc` is the native binary
- `apps/studio/tsconfig.json`: exclude `dist/` (gitignored build output)
from typechecking
**Fixed** (real type errors TS 6 under-reported):
- `packages/ui-patterns` CodeBlock: `borderLeft: null` → `undefined`
(`CSSProperties` doesn't accept null)
- `apps/www` CodeBlock: removed a JSX `@ts-ignore` comment that tsgo
doesn't honor and fixed what it masked (untyped `.js` theme objects,
possibly-undefined highlighter children)
⚠️ **Merge timing:** the new packages are inside pnpm's 3-day
`minimumReleaseAge` window until ~July 11. Installs from the committed
lockfile are unaffected (resolution is skipped), but anything that
forces a re-resolution before then will fail — hold off merging until
the window passes.
Note for editors: the compat package has no `lib/tsserver.js`, so VS
Code's "Use Workspace Version" won't work — use the bundled TS or the
TypeScript Native Preview extension.
## To test
- `pnpm install && pnpm typecheck` — all 15 tasks green, and
`./node_modules/.bin/tsc --version` prints 7.0.2
- `pnpm lint --filter=studio` — typescript-eslint still parses (resolves
the 6.0 API)
- `pnpm build --filter=design-system` (or any Next app) — Next's
tsconfig validation and build typecheck still work
- CodeBlock rendering on www (syntax highlighting, line highlights
with/without border) — the two fixes are behavior-neutral but worth an
eyeball
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Improvements / New Features**
* Enhanced TypeScript tooling support across the workspace for smoother
development builds and checks.
* **Bug Fixes**
* Code blocks render more reliably when content is empty or missing.
* Highlighted code line styling applies more consistently.
* **Maintenance**
* Studio TypeScript builds now avoid including generated output (such as
`dist`) during compilation.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---------
Co-authored-by: Alaister Young <10985857+alaister@users.noreply.github.com>
Co-authored-by: Ivan Vasilov <vasilov.ivan@gmail.com>
Adjusts surface value for light theme
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Style**
* Refined the light theme’s color tuning (including a small adjustment
to chroma) and retuned the canvas surface tone.
* Updated code block light-theme styling so string literal token colors
are now `#c46a0a` (applied consistently across the design system, docs,
learning, and UI library).
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
## I have read the
[CONTRIBUTING.md](https://github.com/supabase/supabase/blob/master/CONTRIBUTING.md)
file.
YES
## What kind of change does this PR introduce?
Chore / dependency cleanup.
## What is the current behavior?
`apps/docs` and `apps/design-system` use the `concurrently` package to
run their parallel dev scripts, while the rest of the monorepo (e.g.
`packages/pg-meta`) already relies on `npm-run-all`.
## What is the new behavior?
Both apps now use `npm-run-all` (`run-p`), and `concurrently` is dropped
from their dependencies and the lockfile; `apps/docs` keeps its
kill-on-exit behavior via `run-p --race`, and `apps/design-system`'s
`dev:full` is collapsed into `dev` using the `run-p dev:*` glob (with
`dev:next`/`dev:content` sub-tasks and README updated to match).
## Additional context
N/A
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Documentation**
* Updated design system setup instructions to reflect the new
development workflow and MDX watching behavior.
* **Chores**
* Simplified local development scripts for the design system and docs
apps.
* Split the dev workflow into separate commands for the app server and
content watcher, making it easier to run and troubleshoot.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---------
Co-authored-by: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
## Problem
Now that we migrated all usages of the deprecated `Tabs` component, we
don't need the `_Shadcn_` suffix anymore.
## Solution
Remove `_Shadcn_` suffix from `ui` tabs components. That's all this PR
does, no visual nor functional changes
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **New Features**
* Standardized tab components across the app so pages and dialogs now
use the same consistent tab UI.
* Improved tab-based views in design, docs, studio, learn, and website
experiences for a more uniform interface.
* **Chores**
* Updated shared UI exports to expose tab components directly,
simplifying future usage across the product.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
## I have read the
[CONTRIBUTING.md](https://github.com/supabase/supabase/blob/master/CONTRIBUTING.md)
file.
YES/NO
## What kind of change does this PR introduce?
Bug fix, feature, docs update, ...
## What is the current behavior?
Please link any relevant issues here.
## What is the new behavior?
Feel free to include screenshots if it includes visual changes.
## Additional context
Add any other context or screenshots.
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **New Features**
* Refreshed theming across the UI to use modern color expressions and
shared theme variables (including OKLCH-based gradients), improving
consistency for charts, code blocks, overlays, icons, and decorative
backgrounds.
* **Bug Fixes**
* Improved light/dark color and gradient consistency across axis/grid
styling, reference lines, buttons/badges, sidebar accents, loaders, and
other visual components.
* **Documentation**
* Updated styling/theming guidance to align with the revised semantic
token system and the updated theme variable usage patterns.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---------
Co-authored-by: Claude Opus 4.8 <noreply@anthropic.com>
## Summary
- Add `button-split-dropdown` and `admonition-button-split`
design-system examples for primary action + chevron menu.
- Document the shared middle border pattern (`-ml-px`, `hover:z-10`;
avoid `border-l-0`) in Button and Admonition docs.
- Mirrors the approach established in the custom SMTP email templates
admonition.
## Test plan
- [ ] Open design-system site and verify `Button → Split with dropdown`
preview renders correctly
- [ ] Open `Admonition → Split button with dropdown` preview and confirm
middle border looks correct on hover/focus
- [ ] Confirm peek code shows the documented class names
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **New Features**
* Added new split-button dropdown live demos, including
icon/chevron-triggered menus with actionable items.
* Added an admonition demo demonstrating a split primary button plus
dropdown trigger with responsive layout.
* **Documentation**
* Expanded “Split with dropdown” guidance with pairing/when-to-use
rules, required styling/border behavior, and responsive layout
instructions for the primary + chevron actions.
* Updated button documentation heading capitalization to match
typography standards.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
## Problem
- We still use/maintain the legacy theming even though we moved to
Shadcn
- We have two themes list with similar code
## Solution
- Migrate some components to `cva` and `cn` instead of `styleHandler`
- Remove redundant `themes` in favor of `singleThemes`
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Bug Fixes**
* Standardized theme selection across the app so theme menus
consistently offer the same light/dark/system options, including
dropdowns, navigation menus, and command menus.
* **Refactor**
* Refreshed styling for multiple shared UI components (menus, tabs, side
panels, loading indicators, icons, and modal dialogs) to improve
consistency while preserving visual behavior.
* **Chores**
* Improved the UI patterns CI “validate exports” check for clearer
failure output when exports change unexpectedly.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
## What kind of change does this PR introduce?
Bug fix, docs update
## What is the current behavior?
- The breadcrumb component docs at
`/design-system/docs/components/breadcrumb` reference six
`ComponentPreview` demos, but the example components were never
implemented and their registry entries were commented out. The page
rendered without working previews.
Unrelated but snuck in:
- The “responsive” Admonition example is a H2 instead of H3 like the
others.
- The design system ⌘K command switcher grows to the full height of its
nav items instead of scrolling within a bounded list.
Closes DEPR-607
Closes DEPR-608
## What is the new behavior?
- Adds six breadcrumb example components (`breadcrumb-demo`,
`breadcrumb-separator`, `breadcrumb-dropdown`, `breadcrumb-ellipsis`,
`breadcrumb-link`, `breadcrumb-responsive`) under
`apps/design-system/registry/default/example/`
- Re-enables the corresponding entries in `registry/examples.ts` and
rebuilds `__registry__/index.tsx`
- Fixes invalid nested `<li>` markup in the responsive breadcrumb demo
that caused a hydration error
Also includes two small unrelated fixes:
- Caps the ⌘K switcher `CommandList` at `max-h-[300px]` so it scrolls
instead of stretching
- Corrects the admonition fragment docs header type
## Additional context
Test plan:
- [ ] Run `pnpm dev:design-system` and open
`/docs/components/breadcrumb`
- [ ] Confirm all six breadcrumb previews render
- [ ] Confirm no hydration warnings in the browser console for the
responsive example
- [ ] Open the ⌘K switcher and confirm the list scrolls within a bounded
height
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **New Features**
* Added multiple Breadcrumb demos to the design system gallery,
including link, dropdown, ellipsis, separator, and responsive variants.
* Enabled these Breadcrumb demos in the examples registry.
* **Documentation**
* Updated the “Responsive” docs heading level.
* **Style**
* Constrained the command menu list height inside the dialog for
improved fit.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
## Problem
We now export components under a subpath in ui-patterns to avoid barrel
files as they slow down every tools (from IDE to linters, etc.) and may
also affect bundles our users have to download.
## Solution
- Remove the UI patterns index file
- Fix invalid impors
## Problem
The `alternative` variant for `<Button>` has been deprecated but is
still used in a few places.
## Solution
- Migrate usages to the recommended `primary` variant
- Delete the `alternative` variant
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Style**
* Updated several buttons across forms, logs, recent queries, and
release headers to use the primary visual style.
* Button styling is now more consistent throughout the app, with a
cleaner default emphasis for key actions.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
**Stack 1/6** of the TanStack Start migration (#46424), split into
reviewable, independently-mergeable PRs.
> [!IMPORTANT]
> **Next stays the default and only active framework after this PR.**
This wires up the Vite/TanStack-Start build pipeline behind the
`STUDIO_FRAMEWORK` flag, but there are no TanStack routes yet — so the
TanStack build isn't functional or tested until later PRs in the stack.
Nothing about the Next build, dev, or deploy changes behaviourally here.
## What's in this PR
- **Dispatch:** `dev`/`build`/`start` now go through
`scripts/dispatch.js`, which runs the Next variant unless
`STUDIO_FRAMEWORK=tanstack`. The original commands are preserved as
`dev:next`/`build:next`/`start:next`.
- **Build pipeline:** `vite.config.ts`, `serve.js`, `smoke-server.mjs`,
vite/tanstack deps, `turbo.jsonc`.
- **`tsconfig.json`:** `jsx: react-jsx`, `moduleResolution: Bundler`,
`target: ES2022`. Because `include` is `**/*.ts(x)`, this re-typechecks
the whole app, so the companion adaptations below land with it.
- **Shared adaptations (companions to the tsconfig change):**
`BufferSource` casts, `packages/ui` unused-`React` import removals, etc.
- **Routing/middleware plumbing:** `next.config.ts` +
`redirects.shared.ts` (redirect rules now shared with `vercel.ts`),
`proxy.ts`/`start.ts` middleware + `hosted-api-allowlist.ts`.
## Verification
Run locally off `master`: frozen install ✓, `studio` typecheck ✓, **Next
build ✓** (compiles + generates all routes), lint ratchet ✓ ("some rules
improved"), prettier ✓.
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **New Features**
* Added a hosted API endpoint allowlist to return 404 for non-supported
`/api/*` routes.
* Introduced a TanStack route-migration checklist and expanded TanStack
Start routing support.
* **Improvements**
* Enhanced deployment refresh/detection by tightening cookie handling
for “latest deployment” updates.
* Centralized redirect/maintenance-mode rules for consistent platform vs
self-hosted behavior.
* Improved production serving with a dedicated static + proxy server and
a post-build smoke test.
* **Dependencies**
* Updated TanStack-related packages and React Table/query tooling
versions.
* **Documentation / Chores**
* Updated formatting and tooling config; added shared build environment
parsing utilities.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---------
Co-authored-by: Alaister Young <10985857+alaister@users.noreply.github.com>
Co-authored-by: Ivan Vasilov <vasilov.ivan@gmail.com>
## Problem
We now use the Shadcn breadcrumb everywhere but we still have the old
breadcrumb code.
## Solution
- Remove the old breadcrumb code
- Fix import paths where needed
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Refactor**
* Consolidated UI component imports across the codebase to use unified
package entrypoints.
* Removed legacy breadcrumb component implementation in favor of
standardized components.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
## Problem
All inputs don't have the same style when focused
## Solution
Consolidate focus states across inputs
## How to test
Checkout the design system form examples:
https://design-system-git-gildasgarcia-depr-354-consoli-0188d7-supabase.vercel.app/design-system/docs/ui-patterns/forms
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Style**
* Refined focus-visible ring/outline and ring-offset tokens across
buttons, multi-select, radio groups, checkbox, select, and switch for a
more consistent accessible experience.
* Updated focus-state styling details within the shared Button and
related controls (including open-state outline behavior).
* **Refactor**
* Updated icon upload preview triggers in form examples to use the
shared Button component while preserving existing upload behavior and
visuals.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
## Problem
The date picker pattern we currently have:
- requires developers add classes and props themselves to get the
expected result. This is cumbersome and prone to error.
- does not visually convey the field invalid state like inputs do
<img width="702" height="256" alt="image"
src="https://github.com/user-attachments/assets/cacd6414-6789-42e3-8d06-88e44fd9fe0a"
/>
## Solution
Introduce a new `DatePicker` _UI pattern_ that wraps the `Popover` and
`Button` components to ease the most common scenarios while still
allowing full customization
<img width="699" height="250" alt="image"
src="https://github.com/user-attachments/assets/e80f842c-28b2-4a4f-b316-c2005e771912"
/>
## Component usage
Note how we manually pass the `isInvalid` prop to the
`<DatePickerButton>` to avoid relying on `react-hook-form` contexts
which would make the date picker unusable outside RHF forms.
Alternative would be to also have a `<DatePickerInput>` that could be
used instead of `<DatePickerButton>` when inside an RHF form.
```tsx
<FormField
control={form.control}
name="expiryDate"
render={({ field, fieldState }) => (
<FormItemLayout
layout="horizontal"
label="Date Picker"
description="Date selection with calendar popover"
>
<FormControl className="col-span-6">
<DatePicker>
<DatePickerTrigger asChild>
<DatePickerButton isInvalid={fieldState.invalid}>
{field.value ? format(field.value, 'PPP') : 'Pick a date'}
</DatePickerButton>
</DatePickerTrigger>
<DatePickerContent>
<Calendar
mode="single"
selected={field.value}
onSelect={field.onChange}
initialFocus
/>
</DatePickerContent>
</DatePicker>
</FormControl>
</FormItemLayout>
)}
/>
---------
Co-authored-by: Ivan Vasilov <vasilov.ivan@gmail.com>
## Problem
Our `<Button>` component breaks the default `button` contract by
redefining the `type` prop to set its variant (`primary`, `default`,
etc) instead of the button type (`submit`, `button`, etc).
This is confusing and forces to write more code when using it with
shadcn components that expect/inject the standard button props.
## Solution
- rename the `type` prop to `variant`
- rename the `htmlType` prop to `type`
- propagate the changes where necessary
- format code
## How to test
As this is just prop renaming, if it builds it's ok
---------
Co-authored-by: Ivan Vasilov <vasilov.ivan@gmail.com>
This PR adds an error state to the usage charts on the Project home
page.
<img width="1708" height="471" alt="Screenshot 2026-06-16 at 18 10 20"
src="https://github.com/user-attachments/assets/cba87dad-5e23-4cd1-b787-0ea699445d7f"
/>
I also added an error state to the charts in the [design
system](https://design-system-git-feat-chart-error-state-supabase.vercel.app/design-system/docs/ui-patterns/charts#chart-states).
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **New Features**
* Charts now display error states when data retrieval or processing
fails, providing users with clear feedback about issues.
* Improved error visibility and handling across analytics and charting
components for better transparency.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
- Marketplace index page
- update order of feature partner integrations in hero
- fix z-index on MarketplaceFilterBar in "list" view
<img width="275" height="104" alt="Screenshot 2026-06-02 at 17 07 29"
src="https://github.com/user-attachments/assets/5cef64f9-895e-4f8d-8f30-153ddd5c89dd"
/>
- Marketplace detail page
- use "prose" css styling on overview content for better text styling
(heading with top padding, etc)
- refine FilesView in overview tab to only show swipeable and zoomable
previews (so the big image doesn't occupy too much space) + lazy load
FilesView component
- improve page loading state
- improve overview side rail sticky-top and remove redundant "About"
label
<img width="1333" height="732" alt="Screenshot 2026-06-02 at 17 20 29"
src="https://github.com/user-attachments/assets/8f3dd4a0-c241-4b7f-b8c8-192e1d7a616d"
/>
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **New Features**
* Interactive carousel with image zoom capability for viewing
integration preview images
* **Bug Fixes**
* Fixed z-index layering issue with marketplace filter bar
* **Refactor**
* Redesigned marketplace detail page header with breadcrumb navigation
* Updated integration image handling structure with enhanced metadata
* Optimized dynamic loading for integration file viewers
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---------
Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
## I have read the
[CONTRIBUTING.md](https://github.com/supabase/supabase/blob/master/CONTRIBUTING.md)
file.
YES
## What kind of change does this PR introduce?
Fix the design system documentation in UI Patterns/ Form section.
## What is the current behavior?
The form panels have horizontal scrolling due to the style of the
separators
<img width="2107" height="1255" alt="260602_before"
src="https://github.com/user-attachments/assets/3714e751-425f-4f97-82f5-9d55e357a8eb"
/>
The MultiSelector components originally used a complex style, which has
been simplified without affecting the visual appearance.
## What is the new behavior?
The style of the MultiSelector components has been simplified.
There is no longer any horizontal scrolling in the form panel.
<img width="2107" height="1255" alt="260602_after"
src="https://github.com/user-attachments/assets/c59da9c5-d383-47d8-9644-b7993417b6ca"
/>
## Additional context
The style has not been changed.
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Style**
* Standardized separator layout in the form patterns side panel to use
full-width spacing, improving visual consistency and alignment across
panels.
* Relaxed the multi-selector trigger width constraint so it now fills
available space, allowing more flexible and cohesive layout behavior
without altering form behavior or validation.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---------
Co-authored-by: Gildas Garcia <1122076+djhi@users.noreply.github.com>
## Problem
Because we have controller inputs and zod validation on numbers, many of
them cannot be cleared correctly as deleting their value resets it to
`0`.
## Solution
Update the `Input` component to allow those editions by always storing
and displaying the user entered value
## How to test
- Open the webhook page and add/edit one
- Clear its timeout value and observe that it is not reset to `0`
- Same for:
- Database network restrictions
- API settings max rows
- Disk size modal
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Refactor**
* Standardized numeric form input handling across examples, settings,
and modals — inputs now rely on form bindings and schema coercion for
consistent parsing and simplified behavior.
* **Chores**
* Added form resolver utilities and a user-event testing library to
development dependencies.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
## What kind of change does this PR introduce?
Add `Markdown` component
- as a ui-pattern
- docs in design-system
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **New Features**
* Introduced a Markdown UI pattern with full documentation and a docs
sidebar entry.
* Markdown component supports composable renderers, optional lazy syntax
highlighting, and customizable element overrides.
* Added many interactive examples (full demo, headings, paragraphs,
lists, links, inline code, blockquotes, code blocks, tables, images,
horizontal rules) plus Quote and Avatar demos.
* **Documentation**
* New MDX guide detailing usage, props, and customization previews.
<!-- review_stack_entry_start -->
[](https://app.coderabbit.ai/change-stack/supabase/supabase/pull/46325?utm_source=github_walkthrough&utm_medium=github&utm_campaign=change_stack)
<!-- review_stack_entry_end -->
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
## What kind of change does this PR introduce?
Chore / docs update. Related to DEPR-551. Stacked on #46053.
## What is the current behavior?
`Admonition` still accepts `label` as a backwards-compatible alias for
`title`, and a few www blog posts plus the Docs MkDocs admonition
transform still use or emit that alias.
## What is the new behavior?
Removes the `label` prop from `AdmonitionProps`, migrates the remaining
www blog Admonitions to `title`, and updates the Docs MkDocs transform
to emit `title` directly.
This leaves `title`, `description`, and `children` as the supported
Admonition content API.
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Refactor**
* Admonition now uses a single required title prop for headings; the
legacy label prop is removed and no longer used.
* **Documentation**
* Updated docs and blog posts to pass admonition heading via title and
removed notes about label support.
* **Tests**
* Component tests adjusted to validate the new title-only behavior and
to ensure legacy label usage is rejected.
<!-- review_stack_entry_start -->
[](https://app.coderabbit.ai/change-stack/supabase/supabase/pull/46054?utm_source=github_walkthrough&utm_medium=github&utm_campaign=change_stack)
<!-- review_stack_entry_end -->
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---------
Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>
## What kind of change does this PR introduce?
Feature, bug fix, and docs update. Addresses the AlertDialog async
action behaviour discussed in Slack and follow-up PR feedback.
## What is the current behavior?
`AlertDialogAction` delegates directly to Radix, so confirm actions
close the dialog immediately on click. Async mutation flows have to use
`asChild` with `event.preventDefault()` and a custom loading button to
keep the dialog open while work is in flight.
## What is the new behavior?
- `AlertDialogAction` now accepts async handlers and a controlled
`loading` prop. Promise-returning actions keep the dialog open, show the
existing Button loading state, disable cancel/dismissal while pending,
close on success, and stay open on rejection.
- Existing workaround usages in Studio have been migrated to the direct
action API (see 'To test' callsite list below)
- design-system docs now include async action examples and
`AlertDialogBody` guidance for inline feedback
https://github.com/user-attachments/assets/1af66410-e9f9-4231-9c6d-fe650bd717a4
## Additional context
- [ ] Once #45572 is rebased onto this change, `ResetTemplateDialog`
should use `AlertDialogAction loading={isResettingTemplate}` with a
promise-returning reset handler instead of a plain loading `Button` in
`AlertDialogFooter`.
## To test
- [x] On Studio API Keys settings, use a project with no publishable or
secret API keys, click the “Create API keys” banner action, and confirm
the Alert Dialog stays open with loading until the default publishable
and secret keys are created.
- [x] Delete a JIT database access rule and confirm the Alert Dialog
stays open with loading until deletion succeeds, and stays open with
inline feedback if it fails.
- [x] With temporary access disabled and existing rules configured,
enable temporary access and confirm the “This will activate existing
rules” Alert Dialog stays open with loading until the configuration
update succeeds, and stays open with inline feedback if it fails.
- [x] Disable external replication and confirm the Alert Dialog stays
open with loading until the mutation succeeds.
- [x] Enable Index Advisor and confirm the Alert Dialog stays open with
loading until the mutation succeeds, and stays open with inline feedback
if it fails.
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **New Features**
* Alert dialogs support async actions with built-in loading, dismissal
blocking while pending, and preserved dialog on error.
* Two interactive examples demonstrating async success and error flows.
* **Improvements**
* Dialogs now surface inline error messages and consistent
loading/confirm behavior across flows (create keys, replication, JIT DB
access, index advisor).
* Minor UI refinements for action controls.
* **Documentation**
* Docs updated with async-action guidance and inline-error
recommendations.
* **Tests**
* New test suite validating async dialog behaviors.
<!-- review_stack_entry_start -->
[](https://app.coderabbit.ai/change-stack/supabase/supabase/pull/45960)
<!-- review_stack_entry_end -->
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---------
Co-authored-by: Gildas Garcia <1122076+djhi@users.noreply.github.com>
Adjusts layout / page patterns including design system documentation and
page components.
<img width="937" height="643" alt="image"
src="https://github.com/user-attachments/assets/5f7864a3-04ae-4ccf-b2b8-d9fe5e29554e"
/>
**To test**
- Ensure all existing page types in Studio are un-effected. They
shouldn't be since existing components aren't touched.
- Run design-system and have a read through layout and page header
documentation. Make sure you understand when and where to use the
various combinations of page components and their variants.
**Next**
Once we are happy with these patterns we can gradually start to update
Studio pages that make use of breadcrumbs and/or sub navigation.
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **New Features**
* Added PageBreadcrumbs and PageNav page chrome
* Several new interactive layout examples (Auth Emails, Edge Functions,
Full‑Width, Logs) and demo pages
* **Documentation**
* New docs for PageBreadcrumbs and PageNav
* Reworked layout guidance and patterns; updated fragment/example docs
and usage notes
* **Improvements**
* Component preview now supports explicit padding control
* Simplified page header demo and updated previews
<!-- review_stack_entry_start -->
[](https://app.coderabbit.ai/change-stack/supabase/supabase/pull/46126?utm_source=github_walkthrough&utm_medium=github&utm_campaign=change_stack)
<!-- review_stack_entry_end -->
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
## Problem
The `_Shadcn_` suffix isn't needed anymore on `Command` components
## Solution
- Remove the `_Shadcn_` suffix
- Simplify UI package exports
- Apply prettier
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Refactor**
* Simplified command component imports and exports across the UI library
by removing internal naming aliases and adopting direct component
references. Updated the public UI package barrel export to use wildcard
re-exports for cleaner API surface.
<!-- review_stack_entry_start -->
[](https://app.coderabbit.ai/change-stack/supabase/supabase/pull/46153?utm_source=github_walkthrough&utm_medium=github&utm_campaign=change_stack)
<!-- review_stack_entry_end -->
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
## Problem
The `ui-patterns/CommandMenu` exposes internal components that have the
same names as the base shadcn components they wrap. This create
confusion about which one to use and forces us to expose the base ones
with the `_Shadcn_` suffix.
## Solution
Rename those internal components to have `CommandMenu` in their names to
make it clearer they are meant to be used with `CommandMenu`. We will
then rename the shadcn base ones to remove the suffix.
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
## Refactor
* Standardized Command Menu component naming across the design system
for improved consistency and clarity. Updated component names:
`CommandInput` → `CommandMenuInput`, `CommandList` → `CommandMenuList`,
`CommandItem` → `CommandMenuItem`, `CommandEmpty` → `CommandMenuEmpty`,
and `CommandGroup` → `CommandMenuGroup`. Updated public API exports,
internal subpath references, all examples within the registry, and
implementations across documentation, studio, and application
interfaces.
<!-- review_stack_entry_start -->
[](https://app.coderabbit.ai/change-stack/supabase/supabase/pull/45996)
<!-- review_stack_entry_end -->
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
## Problem
The `_Shadcn_` suffix isn't needed anymore on `HoverCard` components
## Solution
Remove it. No other changes
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Refactor**
* Standardized hover-card component usage across the apps and design
system for consistent behavior and markup.
* No user-facing changes — hover previews, tooltips, snippet/template
previews, and code hover panels retain the same appearance and
interactions.
<!-- review_stack_entry_start -->
[](https://app.coderabbit.ai/change-stack/supabase/supabase/pull/45987)
<!-- review_stack_entry_end -->
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
## Problem
The `_Shadcn_` suffix isn't needed anymore on breadcrumb components
## Solution
Remove it. No other changes
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Refactor**
* Standardized breadcrumb component exports across the codebase by
removing internal aliasing and using direct component exports. No UI,
behavior, or public API changes; end-user experience unchanged.
<!-- review_stack_entry_start -->
[](https://app.coderabbit.ai/change-stack/supabase/supabase/pull/45984)
<!-- review_stack_entry_end -->
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
## Problem
The `_Shadcn_` suffix isn't needed anymore on `Select` components
## Solution
Remove it. No other changes
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Refactor**
* Updated internal component architecture to standardize and simplify
the codebase. These changes improve code maintainability and consistency
across the application without affecting existing functionality or user
experience.
<!-- review_stack_entry_start -->
[](https://app.coderabbit.ai/change-stack/supabase/supabase/pull/45988)
<!-- review_stack_entry_end -->
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
- Most changes are related to either types or `useRef` usages (it now
requires an initial value).
- also updated `vaul` to its latest version and haven't noticed any
change ([design-system
demo](https://design-system-git-react-19-supabase.vercel.app/design-system/docs/components/drawer))
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **New Features**
* Upgraded workspace to React 19.
* **Bug Fixes**
* Improved null-safety and ref handling across editors, UI components,
shortcuts, and markdown/image rendering to reduce runtime errors.
* Safer event/timeout/interval cleanup and more robust command/context
handling.
* **Chores**
* Bumped vaul dependency versions.
* **Documentation**
* Type and TypeScript accuracy improvements for clearer developer
feedback.
<!-- review_stack_entry_start -->
[](https://app.coderabbit.ai/change-stack/supabase/supabase/pull/45886)
<!-- review_stack_entry_end -->
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
## Problem
The `_Shadcn_` suffix isn't needed anymore on label component
## Solution
Remove it. No other changes
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Refactor**
* Standardized Label usage across the codebase by removing the legacy
alias and using the direct Label export from the UI package
consistently.
* **Documentation**
* Updated component examples and docs to use the standardized Label
component in usage snippets and demos.
<!-- review_stack_entry_start -->
[](https://app.coderabbit.ai/change-stack/supabase/supabase/pull/45986)
<!-- review_stack_entry_end -->
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
## Problem
We have multiple Popover components
## Solution
- [x] migrate Popover usages to Shadcn components
- Migrated JSON and text editor in the `TableEditor` (inline row
edition)
- Migrated the template popover in the logs explorer templates page
- [x] remove `_Shadcn_` suffix from Popover components (renaming +
prettier)
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Refactor**
* Unified popover implementation across the app and design system;
dropdowns, calendars, menus and tooltips now use a consistent popover
API with no visual or interaction changes.
* **Chores**
* Minor prop typing update for the logs date-picker to align with the
consolidated popover content type.
<!-- review_stack_entry_start -->
[](https://app.coderabbit.ai/change-stack/supabase/supabase/pull/45980)
<!-- review_stack_entry_end -->
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
## Problem
The `_Shadcn_` suffix isn't needed anymore on `<ContextMenu_Shadcn_>`
and related components
## Solution
Remove it. No other changes
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Refactor**
* Replaced legacy context-menu component variants with the unified UI
context-menu components across the app for consistent rendering and
imports; behavior and menu content remain unchanged.
* **Tests**
* Updated a test mock to track the unified context-menu component mount
count.
* **Chores**
* Simplified UI package re-exports to expose the canonical context-menu
symbols.
<!-- review_stack_entry_start -->
[](https://app.coderabbit.ai/change-stack/supabase/supabase/pull/45971)
<!-- review_stack_entry_end -->
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
## Problem
The `_Shadcn_` suffix isn't needed anymore on `<Toggle__Shadcn_>`
## Solution
Remove it. No other changes
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
## Release Notes
* **Refactor**
* Updated Toggle component examples and standardized exports
* Simplified export structure for improved consistency
* All existing Toggle component functionality maintained
<!-- review_stack_entry_start -->
[](https://app.coderabbit.ai/change-stack/supabase/supabase/pull/45970)
<!-- review_stack_entry_end -->
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
## What kind of change does this PR introduce?
Docs update and design-system component taxonomy cleanup
## What is the current behavior?
The design-system docs conflate low-level shadcn primitives with
product-level alert patterns. Collapsible documentation previews the
alert-specific wrapper, and the alert/collapsible relationship is
unclear
## What is the new behavior?
- Documents Alert and Collapsible as low-level atom components
- Moves the alert-styled expandable wrapper into
`ui-patterns/expandable-alert` as `ExpandableAlert`
- Documents Expandable Alert as a Fragment Component next to Admonition
- Updates the Session Timeout modal to import `ExpandableAlert` from
`ui-patterns/expandable-alert`
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **New Features**
* `CollapsibleAlert` component is now available for alert-styled
expandable content.
* **Documentation**
* Updated component documentation to clarify when to use `Alert`,
`Collapsible`, `Admonition`, and `CollapsibleAlert`.
* Added comprehensive documentation for `CollapsibleAlert` with usage
examples and variant options.
<!-- review_stack_entry_start -->
[](https://app.coderabbit.ai/change-stack/supabase/supabase/pull/45863)
<!-- review_stack_entry_end -->
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---------
Co-authored-by: Gildas Garcia <1122076+djhi@users.noreply.github.com>
This PR migrates the JS config for Tailwind into a CSS config. As such,
all variables have been defined as CSS variables and they're using the
specialized Tailwind syntax for generating utility classes.
Beside the migration, these changes were also added:
- Added `tailwind.config.css` to few packages to make the Tailwind
Intellisense work.
- Migrated away from Radix style color classes to our defined classes,
the values will remain the same.
- Most of the CSS is generated by scripts, they'll be removed in next
PRs.
* Removed redundant `border-light` classes from several components since
it was undefined.
* Removed redundant `text-strong` classes from several components since
it was undefined.
How to test:
- Open all apps, compare the UI (mainly colors) to builds from #45417
and try to find a difference.
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Style**
* Harmonized color variable usages and updated UI color references
(affects palettes, charts, gradients, hero illustrations, and
scrollbars).
* Tweaked border, tab, and selection visuals across components.
* **New Features**
* Added a suite of theme animations and refined typography presets used
by site prose and docs.
* **Refactor**
* Overhauled Tailwind/theme configuration and color token generation for
more consistent theming.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
This PR adds a color palette to the Design system for easier reference.
<img width="1325" height="1200" alt="Screenshot 2026-05-08 at 17 18 51"
src="https://github.com/user-attachments/assets/7de77c15-f6c6-4691-9875-eea72919ff7d"
/>
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **New Features**
* Added an interactive color palette: displays named colors with 12
scale steps; click a swatch to copy its CSS variable and see brief
"Copied!" feedback.
* **Documentation**
* Added a "Color palette" section to the color usage docs with
instructions and an embedded palette for exploring and copying CSS
variables.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
## 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 -->
This PR migrates all tailwind configs in the apps to be CSS configs.
They import a shared CSS Tailwind config from the `config` package
(which in turns imports the old JS config).
The shared JS config will be migrated to CSS in a followup PR.
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Chores**
* Centralized Tailwind into a config-driven entrypoint and updated the
app build flow to use the new build step; many apps now import unified
global styles.
* **Style**
* Migrated global styles to a Tailwind v4-style setup, added
project-wide content scanning, consolidated theme imports, standardized
theme tokens (including new --container-site max-width), and added a
small prose utility to remove paragraph margins.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---------
Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>
This PR fixes a bug where a user might choose `classic-dark` as a theme
in `studio` but then `docs` and `marketing` apps will look weird.
To test:
- Change the localStorage value of `theme` to `classic-dark`
- Open `www` and `docs` apps, they should look ok
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **New Features**
* Added a new "classic-dark" theme option for enhanced visual
customization.
* **Improvements**
* Unified and simplified theme handling across apps for more consistent
behavior.
* Improved system-theme detection and smoother transitions when
switching themes.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
## What kind of change does this PR introduce?
Feature and design-system cleanup. Resolves DEPR-551.
## What is the current behavior?
Admonition supports several overlapping content shapes, but it
previously did not support a first-class success state or
description-only usage cleanly. Title-only usage was also possible,
which made some callouts read like floating headings without body copy.
Docs MDX Admonitions could also pick up prose spacing around rich
children, while the design-system Tailwind config emitted an
ESM/CommonJS warning in the design-system app.
## What is the new behavior?
Adds a `success` Admonition type, description-only support, and a
stricter content contract: `title` or legacy `label` now requires either
`description` or `children`. Existing title-only Studio callsites have
been converted to description-only callouts.
The design-system docs now include examples for description-only and
success Admonitions, plus guidance for `title`, `description`,
`children`, and legacy `label` usage.
This also tightens Admonition body spacing so rich MDX children keep
docs link/code styling without inheriting excessive prose margins, and
renames the design-system Tailwind config to `tailwind.config.cjs` so it
matches its CommonJS syntax.
Warning and destructive alerts now explicitly set `text-foreground`,
preventing nested Admonition titles from inheriting muted
form-description colour after the Tailwind v4 cascade changes.
| Before | After |
| --- | --- |
| <img width="1818" height="388" alt="Image"
src="https://github.com/user-attachments/assets/283a1853-348a-4d74-a408-013957350e5e"
/> | <img width="1380" height="462" alt="Image"
src="https://github.com/user-attachments/assets/e5761e8e-3697-423b-805b-45110205099a"
/> |
| <img width="1398" height="550" alt="CleanShot 2026-04-28 at 15 12
41@2x"
src="https://github.com/user-attachments/assets/982694d9-5461-4362-8bae-a6e2b4c60e8b"
/> | <img width="1402" height="450" alt="CleanShot 2026-04-28 at 15 13
09@2x"
src="https://github.com/user-attachments/assets/0b1257c4-6b58-4c39-a182-4861a9e378ee"
/> |
| <img width="1640" height="716" alt="CleanShot 2026-04-28 at 15 17
25@2x"
src="https://github.com/user-attachments/assets/a5be4d5f-2bf7-4dc2-b396-56129fe64ec9"
/> | <img width="1630" height="716" alt="CleanShot 2026-04-28 at 15 16
00@2x"
src="https://github.com/user-attachments/assets/0d589252-aaf8-4efc-9d81-15ec4f99ec61"
/> |
| Design System Docs |
| --- |
| <img width="1646" height="1864" alt="CleanShot 2026-04-28 at 14 59
15@2x"
src="https://github.com/user-attachments/assets/12d13595-8972-4fb2-a04a-fb916388ebb6"
/> |
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **New Features**
* Added a "success" admonition variant and new example previews
demonstrating success and description-only usages.
* **Documentation**
* Clarified admonition guidance: when to use title vs description vs
children; added example sections for short callouts and success
messages.
* **Refactor**
* Standardized UI by moving short/advisory text into description across
the app and harmonized trailing punctuation.
* **Style**
* Ensured warning/destructive admonitions use consistent foreground text
styling.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
This PR migrates the whole monorepo to use Tailwind v4:
- Removed `@tailwindcss/container-queries` plugin since it's included by
default in v4,
- Bump all instances of Tailwind to v4. Made minimal changes to the
shared config to remove non-supported features (`alpha` mentions),
- Migrate all apps to be compatible with v4 configs,
- Fix the `typography.css` import in 3 apps,
- Add missing rules which were included by default in v3,
- Run `pnpm dlx @tailwindcss/upgrade` on all apps, which renames a lot
of classes
- Rename all misnamed classes according to
https://tailwindcss.com/docs/upgrade-guide#renamed-utilities in all
apps.
---------
Co-authored-by: Jordi Enric <jordi.err@gmail.com>
Danny White
