Danny White
73c9dbfa52
## What kind of change does this PR introduce? Bug fix and internal tooling update. Resolves FE-3472. ## What is the current behavior? Custom Studio icons use inconsistent source stroke widths, and some child-level styling prevents component props from overriding them. Mixed custom and Lucide icon sets can therefore appear uneven. ## What is the new behavior? Custom stroke icons use a root-level `stroke-width="1.5"`; fill-only logos use `stroke="none"`. The build validates that contract and regenerated components preserve existing exports and props. Studio applies the same `1.5` weight across Reports categories and uses one shared destination icon mapping in the replication selector, destination rows and diagram. | Before | After | | --- | --- | | <img width="418" height="516" alt="56398" src="https://github.com/user-attachments/assets/6afa7042-e6be-40e7-9911-af2f61238c9d" /> | <img width="390" height="550" alt="CleanShot 2026-07-30 at 17 12 37@2x" src="https://github.com/user-attachments/assets/870f49cf-c8fa-40db-8be8-2eb5f264ff4a" /> | | <img width="510" height="734" alt="CleanShot 2026-07-30 at 17 19 28@2x" src="https://github.com/user-attachments/assets/a5b2c088-dcd2-4907-976b-5820794d06e3" /> | <img width="554" height="742" alt="CleanShot 2026-07-30 at 17 16 06@2x" src="https://github.com/user-attachments/assets/ed3a77c4-5d94-4ca7-b9e4-1403b725a981" /> | ## Testing At 100% zoom, compare custom and Lucide icon weight in: - Reports: **Add your first chart** and **Add block** - Database > Replication: the destination selector, destination rows and replication diagram - Command menu (`⌘K`): **Search Database Tables**, **Search RLS Policies**, **Search Edge Functions** and **Search Storage** - Authentication > Users: right-click a user row and compare the context-menu icons - Database > Schema Visualizer: open a table node overflow menu - A paused project: **Export your data > Download backups** <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **New Features** * Added consistent destination icons across replication panels, rows, and diagrams. * Updated instance health and metric icons for clearer identification. * Standardized icon stroke weight and reduced default icon stroke thickness. * **Documentation** * Clarified custom icon requirements, default properties, and validation guidance. * **Bug Fixes** * Improved consistency of icon rendering across replication destinations and reports. * **Tests** * Added coverage for icon SVG validation and replication destination icon rendering. <!-- end of auto-generated comment: release notes by coderabbit.ai -->
Supabase Design System
Design resources for building consistent user experiences at Supabase.
Getting started
First, make a copy of .env.local.example and name it env.local. Then install any required packages and start the development server:
cd apps/design-system
pnpm i
pnpm dev
The dev command runs both the Next.js development server and Contentlayer concurrently, which is recommended for most development workflows.
Alternative commands
You can also run the development server and content watcher separately:
# Run only the Next.js development server
pnpm dev:next
# Run only the content watcher (in a separate terminal shell)
pnpm dev:content
Or run the development server from the root directory:
pnpm dev:design-system
To run both the development server and content watcher from the root directory, you can use:
# Run the development server
pnpm dev:design-system
# Run the content watcher (in a separate terminal shell)
pnpm --filter=design-system dev:content
Open http://localhost:3003 in your browser to see the result.
Watching for MDX changes
The dev command automatically watches for changes to MDX files with hot reload. If you're running the pnpm dev:next separately, you'll need to run pnpm dev:content in a separate terminal shell to watch for content changes.
Adding components
The design system references components rather than housing them. That’s an important distinction to make, as everything that follows here is about the documentation of components. You can add or edit components in one of these two places:
packages/ui: basic UI componentspackages/ui-patterns: components which are built using NPM libraries or amalgamations of components frompatterns/ui
There are several parts of this design system that need to be manually updated after components have been added or removed (from documentation). These include:
config/docs.ts: list of components in the sidebarcontent/docs: the actual component documentationregistry/examples.ts: list of example componentsregistry/fragments.ts: list of fragment componentsregistry/charts.ts: list of chart componentsregistry/default/example/*: the actual example components
You will need to rebuild the design system’s registry after making new additions:
cd apps/design-system
pnpm build:registry