Our UI Library registry is expanding to include blocks that go beyond UI
and in some cases focus purely on back-end. This PR is a precursor to
adding more back-end related blocks. This PR includes the `ui-library ->
library` rename plus redirects and small UI copy updates. Since this is
a rename we'll need to update Vercel configuration.
## Vercel rollout
Keep the Library project Root Directory as `apps/ui-library`
1. In the **Library** Vercel project, set:
`NEXT_PUBLIC_BASE_PATH=/library`
Apply it to Preview and Production, then redeploy the Library project.
2. In the **www** Vercel project, add:
`NEXT_PUBLIC_LIBRARY_URL=<current value of NEXT_PUBLIC_UI_LIBRARY_URL>`
Apply it to Preview and Production. Keep `NEXT_PUBLIC_UI_LIBRARY_URL`
during the migration, then redeploy the www project.
3. Deploy in this order:
1. Library project
2. www project
4. Validate:
- `/library`
- `/library/docs/nextjs/password-based-auth`
- `/ui` redirects to `/library`
- `/ui/docs/nextjs/password-based-auth` redirects to
`/library/docs/nextjs/password-based-auth`
- `/ui/docs/ai-editors-rules/*` still uses its existing Docs redirects
No Vercel dashboard redirect rules are needed. Environment-variable
changes require a new deployment.
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **New Features**
* Supabase UI Library has been renamed to **Supabase Library** across
navigation, pages, documentation, and resource links.
* The Library is now available at `/library`, with updated descriptions
covering components, blocks, and developer tools.
* **Bug Fixes**
* Added permanent redirects from legacy `/ui` URLs to corresponding
`/library` paths.
* Updated links throughout the site and documentation to prevent broken
navigation and references.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
<img width="1033" height="861" alt="image"
src="https://github.com/user-attachments/assets/54a104df-1db9-4b97-89db-6eec671b3af7"
/>
Removes the above AI Skills page from our ui library and instead
redirects to the more up to date ai skills docs page.
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **New Features**
* Added a direct “Install Skills” link to the AI Skills documentation
guide.
* Added a permanent redirect from the legacy prompts URL to the new AI
Skills guide.
* **Documentation**
* Updated the docs side navigation to list component pages under
“Blocks”.
* Removed the AI Skills page content and its navigation/search entries.
* Removed the AI editor rules documentation/registry entries, so they no
longer appear in the generated documentation set.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---------
Co-authored-by: Ivan Vasilov <vasilov.ivan@gmail.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>
## 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?
Feature, docs update
## What is the new behavior?
This PR introduces a new `RealtimeFlow` component and hook to the UI
library for building collaborative React Flow with Supabase Realtime:
- keeps nodes and edges in sync across multiple connected clients in
real time
- uses Yjs with `@supabase-labs/y-supabase` to propagate flow updates
- supports optional persistence, so a flow can be restored from
previously saved shared state
## Additional context
https://github.com/user-attachments/assets/90d3a381-6f9c-427f-a493-5d91c2141462
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **New Features**
* Collaborative "Realtime Flow" diagram editor with syncing overlays and
a dual-view demo component
* Interactive demo page and registry example for live editing
(add/remove/rename nodes)
* Framework-ready registry packages for Next.js, React, React Router,
and TanStack
* **Documentation**
* Comprehensive docs added for Next.js, React, React Router, and
TanStack (usage, persistence, hook API)
* **Chores**
* Added runtime dependency for the flow component package
[](https://app.coderabbit.ai/change-stack/supabase/supabase/pull/44273)
<!-- 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 -->
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>
Adds a new Skills page
<img width="642" height="1104" alt="CleanShot 2026-04-22 at 09 20 54"
src="https://github.com/user-attachments/assets/b1498f68-8779-4057-b8a2-e0b5a5298b4e"
/>
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **New Features**
* Home hero now shows two side-by-side CTAs: "Get Started" and "Install
Skills" for quick access.
* **Documentation**
* Added a new "Skills" docs page describing Agent Skills and
installation options (CLI and plugin).
* Sidebar navigation updated: section renamed to "AI Skills" and the nav
item changed to "Skills" (marked new).
* **Removed**
* Old "Prompts" documentation page removed.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
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`.
## 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?
Adds a new Realtime Monaco component to the UI Library, enabling
collaborative code editing with Supabase Realtime synchronization using
Monaco Editor and Yjs.
## Additional context
This is WIP and used for discuss further changes to the y-supabase
provider.
## Demo
https://github.com/user-attachments/assets/84a761e5-73bb-478e-979a-682121ffee89
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
## Release Notes
* **New Features**
* Added a new Realtime Monaco collaborative code editor component with
real-time synchronization support across multiple frameworks (Next.js,
React, React Router, Tanstack).
* **Documentation**
* Added comprehensive documentation and usage guides for the Realtime
Monaco component across all supported frameworks.
* **Dependencies**
* Added Monaco editor, Yjs, y-monaco, and Supabase collaboration
packages.
<sub>✏️ Tip: You can customize this high-level summary in your review
settings.</sub>
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---------
Co-authored-by: Ivan Vasilov <vasilov.ivan@gmail.com>
Sorted all imports in all packages, `cms`, `design-system` and
`ui-library` apps by running `pnpm format` on them.
All changes in this PR are done by the script.
* Remove the og-image from the docs pages to see if they're pulled from the main layout.
* Merge the doc metadata with the metadata from the main layout.
* Add third-parties dependency for GTM. Reexport the GTM from the common package.
* Add the TelemetryTagManager to four of the production apps.
* Add the GOOGLE_TAG_MANAGER_ID env var as a turbo dependency to the 4 apps.
* Skip rendering the tag manager if the env var is not set or not running on the platform.
* Fix the prop type to be extracted from the component.
* Add default values for consent to GTM.
* Another try to mimic gtag function.
* Fix a link in www.
* Try another approach.
* try.
* Remove the data-redaction flag.
* Remove extra code.
* Send a sign-up event if GTM is enabled.
* Send only the email to GTM.
* Minor fixes.
* Remove third-parties from pnpm lockfile.
* Lets try to make studio work again.
* Add CSP rules for img loading for GTM.
* Add event for testing.
* Add www.googletagmanager.com to the CSP rules.
* Add Stape to CSP rules.
* Fix stape CSP.
* Clean up the code.
* Remove extra console.log.
* Fix the stape urls for CORS.
* Fix the wrong category for Stape URL.
* Add google ads urls.
* Bump the timeout.
* Add google.com to the img-src for google ads.
* update csp
* remove comment
* update to use google analytics without signals
* add stape to default-src in csp
* move csp to middleware
* add google ads support and fix middleware base path
* remove google tag manager / google ads references from csp. load via stape proxy instead
* add double click url to image src
* add Google Tag Manager URL to CSP configuration
* add ga4 urls to csp
* remove google urls from CSP
---------
Co-authored-by: Alaister Young <a@alaisteryoung.com>
* Bump nextjs in the ui-library.
* Bump the nextjs in design-system.
* Bump nextjs to v15 in www.
* Bump the next version in the pnpm catalog.
* Switch all apps to using the catalog version of next.
* Fix ui-lib and design-system to build with next 15.
* Fix some prettier errors.
* Bump the next-eslint package.
* Fix a lint issue about a component starting with underscore.
* Use the catalog version of next in cms app.
* Disable turbo for dev command in www. Remove obsolete experimental flags.
* Return some of the experimental flags.
* chore: add usercentrics for consent management
* client component to make next.js happy
* address feedback
* move consent state to common
* fix import
* ensure page events are sent correctly
* add feature flag provider to ui library site
* fix ui lib 500 error
* skip in test env
---------
Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
Co-authored-by: Jordi Enric <jordi.err@gmail.com>
* infinite list
* infinite list block
* registration
* add missing supportedFrameworks
* Add tables to the supabase project. Generate the types for it.
* Refactor the infinite list query to be just a hook.
* Clean up the block. Add comments.
* Regenerate the registry.
* Fix the docs, the block is not framework-dependent.
* Set the package versions to * to be defined by other packages.
* Minor fixes to the block.
* Fix the examples.
* Fix the docs for the new hook.
* Fix the demo.
* Add more migrations to the db.
* Fix various issues with the query. Rewrote it to useSyncExternalStore.
* Fix the SSR for the hook.
* More fixes.
* Try initializing the store in a useEffect.
* Fix the pnpm-lock file.
* Minor fixes in the docs.
* Put the infinite list under a reusable components section.
* Update apps/ui-library/registry/default/blocks/infinite-query-hook/hooks/use-infinite-query.ts
* Change the example DB to use todos.
* Update the docs to be about Todos quickstart.
* List edits
* Fix link
* Regenerate the registry.
* Add query hook to the landing page.
---------
Co-authored-by: Ivan Vasilov <vasilov.ivan@gmail.com>
Co-authored-by: Terry Sutton <saltcod@gmail.com>
* Add social login block.
* Regen the registry.
* Fix the nextjs social auth.
* Add social auth blocks for RR, Tanstack and React.
* Minor fixes.
* Add docs.
* Update the docs.
* Minor fixes to the blocks.
* Update the docs.
* Fix various doc issues.
* Fix the redirect in the password-based auth.
* Fix note about supabase clients in docs.
* Use with instead of assert in the registry imports.
* Update all auth blocks to use /protected.
* Update all docs for the password-based auth.
* Add new label to social auth.
* Fix docs issues.
* Light mode fix
* Smol fixes
* Fix the origin in the login route.
* Add social auth to the landing page.
* Regenerate the registry.
---------
Co-authored-by: Terry Sutton <saltcod@gmail.com>
* Fix a react warning.
* Fix the command for yarn.
* Add a link to the block on the landing page.
* Fix links in the command menu.
* Fix a type error.
* Add meta setup.
---------
Co-authored-by: Terry Sutton <saltcod@gmail.com>
* Add realtime chat to the landing page.
* Fix the realtime cursor demo on the landing page.
* Fix a bad spelling of shadcn.
* Fix the wrong link in RR auth.
* Change the demo for reatlime cursor to use predefined names.
* Fix the React Router auth block docs.
* Regenerate the realtime chat code.
* Add a docs field to the clients blocks. Add a missing package to the nextjs client block.
* Add links to additional docs on the auth blocks pages.
* Add additional links to the current user avatar docs.
* Add additional links to the client docs.
* Add additional links to the dropzone docs.
* Add additional links to the avatar stack.
* Add additional links to the realtime cursor.
* Add additional links to the realtime chat.
* Fix the dropzone links.
* Regenerate the registry.
* Fix the paths of the ai editor rules.
* Fix headings on clients and auth blocks.
* Fix realtime chat and avatar demos.
* Setup mdx-lint for the ui-library. Fix some obvious wordings.
* Fix the tooltips for the examples. Reorder the example pages.
* add realtime chat
* yolo
* clean up avatar references, leaving those out
* allow to pass messages and receive message change state
* add more names to reduce prob of same name popping up int he example
* update registry, add nextjs docs
* add more usage examples
* Minor changes on the realtime chat component.
* Regenerate the registry.
* docs
---------
Co-authored-by: Ivan Vasilov <vasilov.ivan@gmail.com>
* Update usage sections
* Small style tweaks
* Update docs, tan capital S stack everywhere
* Fix the colors of the linkedcard.
* MInor fixes for all doc pages.
* Updates
* Spacing
---------
Co-authored-by: Ivan Vasilov <vasilov.ivan@gmail.com>
* Change the destinations for next auth routes.
* Change the folder definition to /auth.
* Fix wrong docs.
* More fixes.
* Fix the redirect url to include the base path.
* Minor fixes to the other auth blocks.
* Fix example URLs. Remove some extra code.
* Minor fixes for the avatar stack demo.
* More fixes.
* ui library styles
* fix command
* mobile home
* home
* sidebar
* Fix the URL to the quickstart.
* Fix the install route.
* Fix the command url.
* Fix the command again.
---------
Co-authored-by: Ivan Vasilov <vasilov.ivan@gmail.com>
* init
* Update component-preview.tsx
* please note: changed redirects in block, so need to update the logic to find and replace the redirects
* Fix the redirect urls to work when installing and in examples.
* Revert some of the changes.
* Add a step when building the registry to clean the registry of example code.
* Fix the clean registry script.
---------
Co-authored-by: Ivan Vasilov <vasilov.ivan@gmail.com>
* Copy the design-system app into a new one for ui-library.
* Remove unneeded content.
* Add supabase config.
* Cleanup the css.
* Add bunch of packages.
* Cleanup the registry.
* Regenerate the registry.
* Add needed components for documenting components.
* Add the pages for the components.
* Fix the RegistryBlock.
* Various fixes.
* Add a turbo definition for ui-library.
* Rename Remix to React Router.
* Reorder the pages for all frameworks.
* Remove the bottom pager.
* Fix the pages and command menu.
* Various fixes.
* Minor fixes.
* Add ai editor rules.
* Various fixes.
* Add local supabase env vars.
* Try to fix a package error.
* Bunch of various fixes.
* Fix lint errors.
Saxon Fletcher
