Migrates the repo off `clsx` + `tailwind-merge` to
[shadcn-ui/cn](https://github.com/shadcn-ui/cn). Every app and package
already gets `cn` from `packages/ui`, so the swap happens in that one
helper and flows through to Studio, docs, www, and the rest.
**Changed:**
- `packages/ui` `cn` helper now uses `createCn` from `cn/config`,
keeping the custom `card`/`content` spacing scale so `p-card` still
overrides `p-4`. It has an explicit signature and re-exports
`ClassValue`.
- The four www Launch Week files that imported the `ClassValue` type
from `clsx` now import it from `ui`.
- `blocks/vue` local `lib/utils.ts` re-exports `cn` from the package.
- Comments/README that referenced tailwind-merge.
**Removed:**
- Direct `clsx` and `tailwind-merge` deps from `ui`, `ui-patterns`,
`www`, and `blocks/vue`. `ui-patterns` and `www` declared them without
importing.
**Added:**
- `packages/ui/src/lib/utils/cn.test.ts` covering clsx-style joining,
conflict resolution, the custom spacing scale, and variant handling.
Not migrated: the standalone apps under `examples/`. They're outside the
workspace and mostly on Tailwind v3, which `cn` doesn't support.
Lockfile note: after merging master, the lockfile diff is only the
intended swap (`clsx` and `tailwind-merge` out, `cn@0.2.5` in).
`tailwind-merge` stays in the lockfile as a transitive dep of a
third-party package.
Release-age note: this sat in draft with a temporary
`minimumReleaseAgeExclude` entry for `cn` while `cn` was inside the
workspace's 3-day `minimumReleaseAge` window. That window has closed, so
the exclusion is gone and nothing bypasses the release-age gate.
## To test
- `pnpm install --frozen-lockfile` succeeds with no
`minimumReleaseAgeExclude` entry for `cn`.
- `pnpm --filter ui test` – new `cn.test.ts` passes, including
`cn('p-4', 'p-card')` → `p-card`.
- Typecheck passes for studio, ui, ui-patterns, vue-blocks. www
typecheck panics under tsgo on master already (pre-existing, unrelated);
it passes with the JS `tsc` binary.
- Spot-check Studio locally: class overrides still win in the usual
places (e.g. `CodeEditor` height, `Button` variants with a custom
`className`).
https://claude.ai/code/session_01MkAt16tsPRDTm9oB5Jr8Ub
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Improvements**
* Standardized Tailwind class merging across shared UI utilities while
preserving conditional classes, custom spacing classes, and variant
behavior.
* Updated related components and examples to use the standardized
class-merging utility.
* **Tests**
* Added coverage for conditional class handling, conflicting utility
resolution, custom spacing classes, and variant separation.
* **Documentation**
* Updated usage guidance to reflect the standardized Tailwind
class-merging approach.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---------
Co-authored-by: Alaister Young <10985857+alaister@users.noreply.github.com>
Closes
[FE-4096](https://linear.app/supabase/issue/FE-4096/launch-week-summary-lists-ol-inside-ul-link-where-li-belongs-6-copies)
## 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?
Accessibility bug fix.
## What is the current behavior?
The launch week summary card renders at the bottom of launch week blog
posts. Its two lists are invalid HTML in six copies of the component.
- Each entry is an `<ol>` nested directly inside a `<ul>`. Only `<li>`
is a valid child of `<ul>`.
- The `<Link>` sits inside the `<ol>` rather than inside an `<li>`, so
there are no list items at all.
Screen readers announce a list of empty items wrapping nested lists
instead of a flat list of links.
## What is the new behavior?
- Swap every `<ol>` for an `<li>` in the six summary components: LW X,
11, 12, 13, 14, and 15.
- Class names and keys carry over unchanged. No visual change.
## Additional context
The blog posts stay published. This is a markup fix only.
## Manual testing
1. Open [the Launch Week 15 top 10
post](https://zone-www-dot-com-git-www-fix-lw-summary-lists-supabase.vercel.app/blog/launch-week-15-top-10)
on the deploy preview.
2. Scroll to the Launch Week 15 summary card below the article. It shows
a Main Stage list and a Build Stage list.
3. Inspect either list. Every direct child of the `<ul>` is an `<li>`,
and no `<ol>` appears inside.
4. Repeat on [the Launch Week 12 Wasm FDW
post](https://zone-www-dot-com-git-www-fix-lw-summary-lists-supabase.vercel.app/blog/postgres-foreign-data-wrappers-with-wasm)
for the Launch Week 12 card.
Co-authored-by: Claude Opus 5 <noreply@anthropic.com>
## 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>
## 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
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 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>
This PR preps the monorepo for a migration to Tailwind v4:
- Bump all Tailwind dependencies and libraries to the latest possible
version, while still compatible with Tailwind 3.
- Cleans up obsolete Tailwind 3 specific options and configs.
- Cleans up unused CSS files and fixes the CSS imports.
- Migrates all `important` uses in `@apply` lines to using the `!`
prefix.
- Move `typography.css` to the `config` package and import it from the
apps.
- Migrated all occurrences of `flex-grow`, `flex-shrink`,
`overflow-clip` and `overflow-ellipsis` since they're deprecated and
will be removed in Tailwind 4.
- Make the default theme object typesafe in the `ui` package.
- Migrate all `bg-opacity`, `border-opacity`, `ring-opacity` and
`divider-opacity` to the new format where they're declared as part of
the property color.
- Bump and unify all imports of `postcss` dependency.
* lw15 d1 layout
* add some motion
* main stage card interaction
* fix overflow
* remove badge bg image
* fetch meetups from Luma
* fetch correct meetups
* add main stage card links and interactions
* remove placeholders
* cleanup
* fix hover effect
* add playsInline to banner video
* add blog post
* add links to feature docs
* sync announcement banners
* add blog images and lw15 summary
* add blog screenshot
* Update LW15 heading and meetups section content
Simplified and reworded the heading in LW15Heading, removing redundant text and improving clarity. Refactored LW15Meetups to use a concise title and description, replacing the previous grid layout with a more straightforward presentation.
* Revert "Update LW15 heading and meetups section content"
This reverts commit 21b45d2787.
* add video id
* Chore/lw page cleanup (#37104)
* Update LW15 heading and meetups section content
Simplified and reworded the heading in LW15Heading, removing redundant text and improving clarity. Refactored LW15Meetups to use a concise title and description, replacing the previous grid layout with a more straightforward presentation.
* Update LW15 day card styles and date labels
Adjusted font sizes and colors for day cards in LW15MainStage for improved readability. Simplified date labels in lw15_data.tsx by removing ordinal suffixes.
* Update LW15 Hackathon section content and styling
Revised the layout and text for the LW15 Hackathon component to improve clarity and visual hierarchy. Updated headings, event start information, and description formatting for better readability and emphasis.
* Add lighter foreground color to meetup separator
Updated the separator between meetup cities to use the 'text-foreground-lighter' class for improved visual distinction.
* Update apps/www/components/LaunchWeek/15/LW15Hackathon.tsx
* Update apps/www/components/LaunchWeek/15/LW15Hackathon.tsx
---------
Co-authored-by: Francesco Sansalvadore <f.sansalvadore@gmail.com>
* add build blog post
* add build blost post images
---------
Co-authored-by: Stojan Dimitrovski <sdimitrovski@gmail.com>
Co-authored-by: Jonathan Summers-Muir <MildTomato@users.noreply.github.com>
* lw14 d5 init
* feat: mcp server blog post
* add d5 data
* add video to blog post
* og and thumb images
* geo aware routing blog
* updates
* updates
* build layout
* updates
---------
Co-authored-by: Greg Richardson <greg.nmr@gmail.com>
Co-authored-by: Wen Bo Xie <wenbo.xie3@gmail.com>
Co-authored-by: Wen Bo Xie <5532241+w3b6x9@users.noreply.github.com>
* chore: lw14 d2 init
* chore: lw14 d2 update banners
* Update apps/www/components/Hero/Hero.tsx
* Update packages/ui-patterns/PromoToast/PromoToast.tsx
* add d2 images
* feat: add LW 14 day 2 blog post (#34607)
* feat: add LW 14 day 2 blog post
* remove video callout at bottom of blog post
* add launch-week category
* fix categories and imgs
* add blog post og and thumbnail
* updates
* updates
---------
Co-authored-by: Wen Bo Xie <5532241+w3b6x9@users.noreply.github.com>
Co-authored-by: Wen Bo Xie <wenbo.xie3@gmail.com>
Co-authored-by: Francesco Sansalvadore <f.sansalvadore@gmail.com>
* update og
---------
Co-authored-by: Wen Bo Xie <5532241+w3b6x9@users.noreply.github.com>
Co-authored-by: Lakshan Perera <lakshan@supabase.io>
Co-authored-by: Wen Bo Xie <wenbo.xie3@gmail.com>
