Danny White
3960e6ac41
## Problem Lucide React v1 improves screen reader behaviour (icons are hidden from assistive tech by default). It also removes brand icons such as GitHub. We were still on Lucide 0.x across the monorepo. ## Solution - Move every workspace onto one shared Lucide React v1 version via the pnpm catalog. - But Lucide React v1 [deprecated brand icons](https://github.com/lucide-icons/lucide/blob/main/BRAND_LOGOS_STATEMENT.md) - Meaning we need to handle any _old_ brand icons we used from Lucide 0.x. - Luckily, that was just `GitHubIcon`. So... - Add a `GithubIcon` in `packages/ui` that matches Lucide’s previous GitHub icon, and use it wherever we imported GitHub from Lucide. - No other Lucide brand icons were in use. - Studio “Continue with GitHub” sign-in still uses the existing SVG asset (`github-icon.svg`), not this component. - Keep the `Icon` suffix import style [recently introduced](https://github.com/supabase/supabase/pull/51659) - Monorepo apps now use `catalog` Lucide React v1. ## Review instructions 1. Open [Studio preview](https://studio-staging-git-dnywh-bump-lucide-react-v1-supabase.vercel.app/dashboard/org) on a project that is connected to GitHub: - Project home → Activity stats “GitHub” row - Org project list → GitHub badge on a connected project card/row - Branches → GitHub link on a branch row, or “Sync with a GitHub branch” - Project Settings → Integrations → GitHub integration panel 2. Open [/kb/guides/sample-guide](https://supabase.com/kb/guides/sample-guide) → confirm “Go to the GitHub discussion” shows the icon. 3. Open [/docs/reference/javascript](https://supabase.com/docs/reference/javascript) → confirm the header GitHub control still shows the icon. Or [/docs/guides/troubleshooting/rls-simplified-BJTcS8](https://supabase.com/docs/guides/troubleshooting/rls-simplified-BJTcS8) → “View discussion on GitHub”.
Supabase Design System
Design resources for building consistent user experiences at Supabase.
Getting started
From the repo root:
# Copy local env vars (sets NEXT_PUBLIC_BASE_PATH for asset URLs)
cp apps/design-system/.env.local.example apps/design-system/.env.local
# Move into the design-system app
cd apps/design-system
# Install dependencies
pnpm i
# Build the registry and Velite content, then start the dev servers
pnpm dev
Or from apps/design-system:
# Copy local env vars (sets NEXT_PUBLIC_BASE_PATH for asset URLs)
cp .env.local.example .env.local
# Install dependencies
pnpm i
# Build the registry and Velite content, then start the dev servers
pnpm dev
The dev command builds the registry and Velite content, then runs the Next.js dev server and Velite watcher in parallel.
Open http://localhost:3003/design-system in your browser to see the result.
Doc pages load compiled MDX from .velite/codes/*.json per document. Metadata lives in the smaller allDocs.json index (~367KB instead of ~27MB), so content edits only reload the changed doc's code.
Alternative commands
You can also run the development server and content watcher separately. Build the registry and content first, because dev:next and dev:content do not:
pnpm build:registry
pnpm build:content
# Run only the Next.js development server
pnpm dev:next
# Run only the Velite content watcher (in a separate terminal shell)
pnpm dev:content
From the repo root, pnpm dev:design-system runs the same dev script. If you split the watchers from the root, build first:
pnpm --filter=design-system build:registry
pnpm --filter=design-system build:content
pnpm --filter=design-system dev:next
pnpm --filter=design-system dev:content
Watching for MDX changes
The dev command watches MDX files and hot-reloads them. If you are running pnpm dev:next on its own, also run pnpm dev:content in another terminal.
Adding components
The design system references components rather than housing them. That distinction matters: everything below is about documenting components, not implementing them. Add or edit the components themselves in one of these two places:
packages/ui: basic UI componentspackages/ui-patterns: components built from libraries or frompackages/ui
After you add or remove documented components, update these source files:
config/docs.ts: list of components in the sidebarcontent/docs: the component documentationregistry/examples.ts: example componentsregistry/fragments.ts: fragment componentsregistry/charts.ts: chart componentsregistry/copy-writing.ts: copywriting examplesregistry/default/example/*: the example component implementationsregistry/default/block/*: chart block implementations, when you add a chart
Do not edit __registry__. pnpm dev, pnpm typecheck, and pnpm build generate it from the files above, and it is gitignored. If you add registry entries while the app is already running, regenerate it:
cd apps/design-system
pnpm build:registry