Commit Graph
37 Commits
Author SHA1 Message Date
Saxon FletcherandIvan Vasilov 932b5dc3b8 Remove skills page from ui library (#47947)
<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>
2026-07-15 15:08:34 +02:00
Saxon FletcherandClaude Opus 4.8 fb02182e86 Color system (#47288)
## 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>
2026-07-03 15:00:43 +10:00
Tiago Antunes b79a64e301 feat: add Realtime Flow component (#44273)
## 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

[![Review Change
Stack](https://storage.googleapis.com/coderabbit_public_assets/review-stack-in-coderabbit-ui.svg)](https://app.coderabbit.ai/change-stack/supabase/supabase/pull/44273)
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2026-05-26 13:28:52 +03:00
Ivan VasilovandClaude Sonnet 4.6 afd690ada5 chore: Migrate all apps to use Tailwind CSS configs (#45530)
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>
2026-05-07 17:18:15 +02:00
Ivan Vasilov 97a8df0a23 feat: Handle the classic-dark theme in www and docs apps (#45214)
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 -->
2026-05-05 16:18:46 +02:00
Ivan VasilovandJordi Enric 56de26fe22 chore: Migrate the monorepo to use Tailwind v4 (#45318)
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>
2026-04-30 10:53:24 +00:00
Terry Sutton fc0aae8b14 Add new skills page (#45118)
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 -->
2026-04-22 12:42:51 +00:00
Ivan Vasilov ee8eae7309 chore: Clean the ui package from next imports (#44278)
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`.
2026-03-30 10:58:37 +02:00
Tiago AntunesandIvan Vasilov 9bf981f371 feat(ui-library): add Realtime Monaco ui component (#41766)
## 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>
2026-03-17 13:55:03 +01:00
Ivan Vasilov 98c0cea1c3 feat: Add TDB block (#43490) 2026-03-09 14:32:44 +01:00
Ivan Vasilov 1cd1ebfc7f chire: Sort imports in all packages, cms, design-system and ui-library apps (#41610)
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.
2026-02-05 13:54:10 +01:00
Raúl Barroso 29ee6a2992 style: use GitHub's right product name (#38099)
* style: use GitHub's right product name

* fix: use correct kotlin provider
2025-08-22 13:43:47 +02:00
Ivan Vasilov 1332d30f2f fix: Fix the og-image on UI library pages (#37439)
* 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.
2025-07-25 16:03:27 +08:00
Ivan VasilovandAlaister Young 37e44bec9c feat: Add GTM (#35567)
* 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>
2025-06-30 10:35:47 +00:00
Ivan Vasilov 7e9076e3ad chore: Bump the rest of the apps to Nextjs 15 (#35475)
* 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.
2025-06-05 12:41:28 +02:00
2b419c70a1 chore: add usercentrics for consent management (#35384)
* 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>
2025-05-05 13:18:48 +08:00
Terry Sutton 651587d98a React-based (#35425) 2025-05-02 09:11:24 -02:30
95ec79b98f feat: Infinite query hook block (#34650)
* 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>
2025-04-17 15:18:33 +02:00
Ivan VasilovandTerry Sutton 2ebf81c601 feat: Add social login to the UI Library (#34803)
* 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>
2025-04-17 14:57:09 +02:00
Ivan Vasilov 23fd9a3a8e fix: Randomize the chat room (#34585)
* Randomize the chat.

* another try.

* Try another fix.

* Fix the docs pages.
2025-03-31 17:39:09 +02:00
Terry SuttonandIvan Vasilov 018d5afd9e UI lib/mobile fixes (#34576)
* Mobile fixes

* Add tanstack beta warning

* Fix tanstack alert for dark mode

---------

Co-authored-by: Ivan Vasilov <vasilov.ivan@gmail.com>
2025-03-31 16:13:13 +02:00
6a9e1a5741 chore: UI lib - update telemetry (#34569)
* chore: update telemetry

* Add NEXT_PUBLIC_API_URL to turbo.json.

* add copy event

* Update command-copy-button.tsx

* Update command-copy-button.tsx

* move telemetry wrapper down to child layout

* update telemetry naming

---------

Co-authored-by: Ivan Vasilov <vasilov.ivan@gmail.com>
Co-authored-by: Pamela Chia <pamelachiamayyee@gmail.com>
2025-03-31 15:51:19 +02:00
Ivan VasilovandTerry Sutton fe3e067c0c fix: UI library more fixes (#34573)
* 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>
2025-03-31 13:46:26 +00:00
Ivan Vasilov 429aa9d084 fix: More fixes for UI Library (#34552)
* 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.
2025-03-31 18:40:03 +08:00
Jonathan Summers-Muir 3a9ff560ab chore: ui lib / new sidebar mobile hook, and props update, more SSR (#34544)
* init

* more SSR. fixed hook. providers simplified

* update

* Update side-navigation-item.tsx
2025-03-31 11:16:26 +02:00
Saxon Fletcher c182fbeca5 chore: Add chat to home (#34557)
* add chat to home

* add chat to home
2025-03-31 09:24:19 +02:00
Ivan Vasilov 156e8fd9b7 fix: Minor fixes for UI Library (#34535)
* 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.
2025-03-30 09:56:03 +02:00
Terry SuttonandSaxon Fletcher 5e7fdb896b UI lib/mobile basics (#34529)
* Some mobile nudges

* mobile improvements

---------

Co-authored-by: Saxon Fletcher <saxonafletcher@gmail.com>
2025-03-30 14:29:43 +08:00
Jordi EnricandIvan Vasilov daa33f4723 add realtime chat example (#34514)
* 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>
2025-03-28 22:31:13 +01:00
Terry SuttonandIvan Vasilov ba786f253e UI lib/component docs (#34515)
* 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>
2025-03-28 15:48:47 -02:30
Ivan Vasilov 95ade9f4ca fix: Fix the folder layout for the Nextjs Auth block (#34496)
* 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.
2025-03-28 13:15:33 -02:30
Saxon FletcherandIvan Vasilov 82749a7bf6 ui library styles (#34500)
* 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>
2025-03-28 12:41:18 +00:00
Ivan Vasilov a0dc96d1a4 fix: Add previews for the new components on the main page (#34493)
Add previews for the new components on the main page.
2025-03-28 09:47:08 +10:00
Saxon FletcherandJonathan Summers-Muir 3a95aec3ee Chore/library styles (#34465)
* use our own tree view

* fix padidng

* updated styles

---------

Co-authored-by: Jonathan Summers-Muir <MildTomato@users.noreply.github.com>
2025-03-27 10:12:47 +00:00
Saxon FletcherandJonathan Summers-Muir e8698432bc Chore/move framework (#34426)
* init

* Update component-preview.tsx

* move framework selector

* simplified framework selection

* moaar

* remove

* Update framework-selector.tsx

* side menu item fix

---------

Co-authored-by: Jonathan Summers-Muir <MildTomato@users.noreply.github.com>
2025-03-27 17:39:01 +08:00
Jonathan Summers-MuirandIvan Vasilov 846b470f9d chore: uses iframes for UI lib examples. (#34419)
* 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>
2025-03-26 11:16:09 +01:00
Ivan Vasilov 33127bb6ab feat: Library (#34294)
* 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.
2025-03-20 22:11:07 +01:00