mirror of
https://github.com/supabase/supabase.git
synced 2026-10-11 04:15:04 +03:00
Danny White
b09b569a59
## What kind of change does this PR introduce? - Design system docs addition ## What is the current behavior? - We used a ’sandwiched’ style Admonition a lot but have no clear docs/examples for it ## What is the new behavior? - An example file and documentation around the sandwiched Admonition - Minor unrelated changes - Copywriting docs expansion on capitalization and declarative writing - `pnpm format` on charts ## Additional context | Preview | | --- | | <img width="1714" height="612" alt="CleanShot 2026-02-24 at 16 02 21@2x" src="https://github.com/user-attachments/assets/f547bdea-ca31-4ba7-85eb-bd9bcbf30d35" /> |
73 lines
2.5 KiB
Markdown
73 lines
2.5 KiB
Markdown
# 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:
|
||
|
||
```bash
|
||
cd apps/design-system
|
||
pnpm i
|
||
pnpm dev:full
|
||
```
|
||
|
||
The `dev:full` 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:
|
||
|
||
```bash
|
||
# Run only the Next.js development server
|
||
pnpm dev
|
||
|
||
# Run only the content watcher (in a separate terminal shell)
|
||
pnpm content:dev
|
||
```
|
||
|
||
Or run the development server from the root directory:
|
||
|
||
```bash
|
||
pnpm dev:design-system
|
||
```
|
||
|
||
To run both the development server and content watcher from the root directory, you can use:
|
||
|
||
```bash
|
||
# Run the development server
|
||
pnpm dev:design-system
|
||
|
||
# Run the content watcher (in a separate terminal shell)
|
||
pnpm --filter=design-system content:dev
|
||
```
|
||
|
||
Open [http://localhost:3003](http://localhost:3003) in your browser to see the result.
|
||
|
||
### Watching for MDX changes
|
||
|
||
The `dev:full` command automatically watches for changes to MDX files with hot reload. If you're running the `pnpm dev` separately, you'll need to run `pnpm content:dev` 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`](https://github.com/supabase/supabase/tree/master/packages/ui): basic UI components
|
||
- [`packages/ui-patterns`](https://github.com/supabase/supabase/tree/master/packages/ui-patterns): components which are built using NPM libraries or amalgamations of components from `patterns/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 sidebar
|
||
- `content/docs`: the actual component documentation
|
||
- `registry/examples.ts`: list of example components
|
||
- `registry/fragments.ts`: list of fragment components
|
||
- `registry/charts.ts`: list of chart components
|
||
- `registry/default/example/*`: the actual example components
|
||
|
||
You will need to rebuild the design system’s registry after making new additions:
|
||
|
||
```bash
|
||
cd apps/design-system
|
||
pnpm build:registry
|
||
```
|