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
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.
This PR moves several components which rely on `next` out of the `ui`
package to the `ui-patterns` package.
`ui-patterns` package is intented to be imported with specific imports
so it's ok if there are components reliant on `next` in there.
The `SonnerToaster` component has removed its dependency by requiring a
prop for `theme`.
* tiger d2
* update lw12 summary link
* update title
* update visual
* highlight build stage on scroll
* initial commit
* Small adjustment to make the hook punchier
* final edits
* add SVGs for LW page
* add og and thumbs
* Update og.jpg
* update title, add blog link and video slug
* switch to lighter pngs
* promo toast
* og
---------
Co-authored-by: Inian <inian1234@gmail.com>
Co-authored-by: Copple <10214025+kiwicopple@users.noreply.github.com>
Co-authored-by: Jonathan Summers-Muir <MildTomato@users.noreply.github.com>
* lw13 interactive realtime grid
* 3d metal ticket
* add dynamic text to ticket
* reset ticket tilt on mouseout
* improve canvas sizing and ticket positioning and originate tilt from ticket
* test lw layout
* test lw layout
* fix imports
* .
* fix .length bug
* usual ticketing flow
* reduce ticket padding
* reduce fade delay
* add name from db
* text size
* use multiplayer.dev cursor logic
* lodash samplesize
* good state
* working users cursors
* single partyMode off
* clean up
* refactor ticket layout and positioning logic
* regular and platinum tickets
* regular theme based og
* add mono font to ticket, finish textures and ogs
* ticket cleanup
* restore countdown with ticket
* update og
* update og
* remote year add hour
* drag ticket to flip
* remove
* add presence
* remove cursor on own touch device
* test hidden mobile cursor
* fix mobile dragging
* scale ticket on interaction
* code logic
* secret ticket logic
* cleanup
* persist won game
* enable game on mobile
* fix mobile game
* add announcement banners
* update text layout
* hide game from share page and if game won
* fix mobile flip 🎉
* fix meetups time formatting
* faster flip
* tiger init styling (#30649)
* update
* mobile fix
---------
Co-authored-by: Jonathan Summers-Muir <MildTomato@users.noreply.github.com>
* use multilanguage font
* lineheight
* only published meetups
* comment on timezone column
* better mobile input positioning
* fix sudden lighting change
* increase cell size for better performance
* increase cell size for better performance
* last touches
---------
Co-authored-by: Jonathan Summers-Muir <MildTomato@users.noreply.github.com>
* Switch all top-level imports for ui-patterns components to use specific components when importing.
* Remove the @ui-patterns shorthand since it works exactly the same without the @.
* More import fixes.
* Fix the ui-patterns tests.
* Add lucide-react to docs (to make the autocomplete work).
* Migrate the docs app icons.
* Migrate the ui-patterns.
* Remove the old icons from ui package.
* Migrate the www app from react-feather icons.
* Migrate all of studio icons.
* Migrate the only component in design-system.
* Fix an old import in ui package. Revert an import in docs app.
* Fix some pages in www.
* Remove unneeded files used in generation of icons.
* Fix a prettier error.
* Fix more issues in www.
* Fix an issue in Log Date picker.
* Replace all string sizes with number sizes because the icons grew in some cases.
* Fix more imports in security page.
* Fix an extra import.
* Remove the size prop from all icons if they're in a button and they match the button size.
* Minor fixes for docs and www.
---------
Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
* d3 init
* blog: add auth day blog post lw 12
* d3
* new post
* fix callouts
* small changes
* update title
* update Promo toast
* fix last build item
* rss
* add video in blog post
---------
Co-authored-by: Francesco Sansalvadore <f.sansalvadore@gmail.com>
Co-authored-by: Copple <10214025+kiwicopple@users.noreply.github.com>
* whale d2
* video id
* cleanup meetups
* realtime: Blog for Realtime Broadcast and Presence Authz (#27691)
* realtime: Blog for Realtime Broadcast and Presence Authz
Blog post to be used for Realtime Broadcast and Presence authorization
---------
Co-authored-by: Wen Bo Xie <wenbo.xie3@gmail.com>
* add lw tags to blog post
* Adds edits
* prettier run
---------
Co-authored-by: Filipe Cabaço <filipe@supabase.io>
Co-authored-by: Wen Bo Xie <wenbo.xie3@gmail.com>
Co-authored-by: Copple <10214025+kiwicopple@users.noreply.github.com>
Co-authored-by: Filipe Cabaço <filipecabaco@gmail.com>
