DesignSystem Domain — supabase Architecture
A central registry of UI components and patterns based on Radix UI and Tailwind CSS used across all Supabase web properties.
Entity Profile
Dependency Diagram
graph TD domain_DesignSystem["DesignSystem"] subdomain_DesignSystem_ThemeEngine["ThemeEngine"] domain_DesignSystem --> subdomain_DesignSystem_ThemeEngine subdomain_DesignSystem_ComponentRegistry["ComponentRegistry"] domain_DesignSystem --> subdomain_DesignSystem_ComponentRegistry subdomain_DesignSystem_UIPatterns["UIPatterns"] domain_DesignSystem --> subdomain_DesignSystem_UIPatterns style domain_DesignSystem fill:#6366f1,stroke:#818cf8,color:#fff
Relationship Graph
Subdomains
Source Files
- apps/design-system/app/Providers.tsx
- apps/design-system/app/SonnerToast.tsx
- apps/design-system/registry/default/example/calendar-form.tsx
- apps/design-system/registry/default/example/calendar-react-hook-form.tsx
- apps/design-system/components/callout.tsx
- apps/design-system/registry/default/example/chart-tooltip-demo.tsx
- apps/design-system/registry/charts.ts
- apps/design-system/components/class-label.tsx
- apps/design-system/styles/code-block-variables.css
- apps/design-system/components/code-block-wrapper.tsx
- apps/design-system/components/code-fragment.tsx
- apps/design-system/registry/default/example/color-usage-surface-studio-frame.tsx
- apps/design-system/registry/default/example/color-usage-surface-studio.tsx
- apps/design-system/registry/default/example/color-usage-surface-www-and-docs.tsx
- apps/design-system/components/colors.tsx
- apps/design-system/registry/default/example/combobox-demo.tsx
- apps/design-system/registry/default/example/combobox-form.tsx
- apps/design-system/registry/default/example/combobox-popover.tsx
- apps/design-system/registry/default/example/combobox-responsive.tsx
- apps/design-system/components/command-menu.tsx
- apps/design-system/components/component-example.tsx
- apps/design-system/components/component-preview.tsx
- apps/design-system/components/component-props.tsx
- apps/design-system/components/component-source.tsx
- apps/design-system/contentlayer.config.js
- apps/design-system/components/copy-button.tsx
- apps/design-system/registry/copy-writing.ts
- apps/design-system/registry/default/example/date-picker-demo.tsx
- apps/design-system/registry/default/example/date-picker-form.tsx
- apps/design-system/registry/default/example/date-picker-with-presets.tsx
- apps/design-system/registry/default/example/date-picker-with-range.tsx
- apps/design-system/config/docs.ts
- apps/design-system/registry/default/example/drawer-dialog.tsx
- apps/design-system/components/example-label.tsx
- apps/design-system/registry/examples.ts
- apps/design-system/registry/fragments.ts
- apps/design-system/styles/globals.css
- apps/design-system/components/grid.tsx
- apps/design-system/components/homepage-svg-handler.tsx
- apps/design-system/components/icons.tsx
- apps/design-system/app/fonts/index.ts
- apps/design-system/__registry__/index.tsx
- apps/design-system/app/(app)/layout.tsx
- apps/design-system/app/layout.tsx
- apps/design-system/components/mdx-components.tsx
- apps/design-system/styles/mdx.css
- apps/design-system/context/mobile-sidebar-context.tsx
- apps/design-system/components/mobile-sidebar-sheet.tsx
- apps/design-system/types/nav.ts
- apps/design-system/app/(app)/page.tsx
- apps/design-system/app/(app)/docs/[[...slug]]/page.tsx
- apps/design-system/components/pager.tsx
- apps/design-system/registry/registry.ts
- apps/design-system/lib/rehype-component.ts
- apps/design-system/lib/rehype-npm-command.ts
- apps/design-system/registry/schema.ts
- apps/design-system/components/side-navigation-item.tsx
- apps/design-system/components/side-navigation.tsx
- apps/design-system/components/site-footer.tsx
- apps/design-system/config/site.ts
- apps/design-system/registry/default/example/slider-demo.tsx
- apps/design-system/registry/default/example/slider-minMax-range.tsx
- apps/design-system/components/sonner-expand-config.tsx
- apps/design-system/components/sonner-expand-position.tsx
- apps/design-system/components/source-panel.tsx
- apps/design-system/components/style-wrapper.tsx
- apps/design-system/registry/styles.ts
- apps/design-system/components/theme-settings.tsx
- apps/design-system/components/theme-switcher-dropdown.tsx
- apps/design-system/registry/themes.ts
- apps/design-system/lib/toc.ts
- apps/design-system/components/toc.tsx
- apps/design-system/components/top-navigation.tsx
- apps/design-system/types/unist.ts
- apps/design-system/hooks/use-config.ts
- apps/design-system/hooks/use-media-query.tsx
- apps/design-system/hooks/use-mobile-sidebar.ts
- apps/design-system/hooks/use-mounted.ts
- apps/design-system/lib/utils.ts
Source
- apps/design-system/app/Providers.tsx
- apps/design-system/app/SonnerToast.tsx
- apps/design-system/registry/default/example/calendar-form.tsx
- apps/design-system/registry/default/example/calendar-react-hook-form.tsx
- apps/design-system/components/callout.tsx
- apps/design-system/registry/default/example/chart-tooltip-demo.tsx
- apps/design-system/registry/charts.ts
- apps/design-system/components/class-label.tsx
- apps/design-system/styles/code-block-variables.css
- apps/design-system/components/code-block-wrapper.tsx
- apps/design-system/components/code-fragment.tsx
- apps/design-system/registry/default/example/color-usage-surface-studio-frame.tsx
- apps/design-system/registry/default/example/color-usage-surface-studio.tsx
- apps/design-system/registry/default/example/color-usage-surface-www-and-docs.tsx
- apps/design-system/components/colors.tsx
- apps/design-system/registry/default/example/combobox-demo.tsx
- apps/design-system/registry/default/example/combobox-form.tsx
- apps/design-system/registry/default/example/combobox-popover.tsx
- apps/design-system/registry/default/example/combobox-responsive.tsx
- apps/design-system/components/command-menu.tsx
- apps/design-system/components/component-example.tsx
- apps/design-system/components/component-preview.tsx
- apps/design-system/components/component-props.tsx
- apps/design-system/components/component-source.tsx
- apps/design-system/contentlayer.config.js
- apps/design-system/components/copy-button.tsx
- apps/design-system/registry/copy-writing.ts
- apps/design-system/registry/default/example/date-picker-demo.tsx
- apps/design-system/registry/default/example/date-picker-form.tsx
- apps/design-system/registry/default/example/date-picker-with-presets.tsx
- apps/design-system/registry/default/example/date-picker-with-range.tsx
- apps/design-system/config/docs.ts
- apps/design-system/registry/default/example/drawer-dialog.tsx
- apps/design-system/components/example-label.tsx
- apps/design-system/registry/examples.ts
- apps/design-system/registry/fragments.ts
- apps/design-system/styles/globals.css
- apps/design-system/components/grid.tsx
- apps/design-system/components/homepage-svg-handler.tsx
- apps/design-system/components/icons.tsx
- apps/design-system/app/fonts/index.ts
- apps/design-system/__registry__/index.tsx
- apps/design-system/app/(app)/layout.tsx
- apps/design-system/app/layout.tsx
- apps/design-system/components/mdx-components.tsx
- apps/design-system/styles/mdx.css
- apps/design-system/context/mobile-sidebar-context.tsx
- apps/design-system/components/mobile-sidebar-sheet.tsx
- apps/design-system/types/nav.ts
- apps/design-system/app/(app)/page.tsx
- apps/design-system/app/(app)/docs/[[...slug]]/page.tsx
- apps/design-system/components/pager.tsx
- apps/design-system/registry/registry.ts
- apps/design-system/lib/rehype-component.ts
- apps/design-system/lib/rehype-npm-command.ts
- apps/design-system/registry/schema.ts
- apps/design-system/components/side-navigation-item.tsx
- apps/design-system/components/side-navigation.tsx
- apps/design-system/components/site-footer.tsx
- apps/design-system/config/site.ts
- apps/design-system/registry/default/example/slider-demo.tsx
- apps/design-system/registry/default/example/slider-minMax-range.tsx
- apps/design-system/components/sonner-expand-config.tsx
- apps/design-system/components/sonner-expand-position.tsx
- apps/design-system/components/source-panel.tsx
- apps/design-system/components/style-wrapper.tsx
- apps/design-system/registry/styles.ts
- apps/design-system/components/theme-settings.tsx
- apps/design-system/components/theme-switcher-dropdown.tsx
- apps/design-system/registry/themes.ts
- apps/design-system/lib/toc.ts
- apps/design-system/components/toc.tsx
- apps/design-system/components/top-navigation.tsx
- apps/design-system/types/unist.ts
- apps/design-system/hooks/use-config.ts
- apps/design-system/hooks/use-media-query.tsx
- apps/design-system/hooks/use-mobile-sidebar.ts
- apps/design-system/hooks/use-mounted.ts
- apps/design-system/lib/utils.ts
Frequently Asked Questions
What is the DesignSystem domain?
The DesignSystem domain is an architectural grouping in the supabase codebase. A central registry of UI components and patterns based on Radix UI and Tailwind CSS used across all Supabase web properties. It contains 79 source files.
What subdomains are in DesignSystem?
The DesignSystem domain contains 3 subdomain(s): ComponentRegistry, ThemeEngine, UIPatterns.
How many files are in DesignSystem?
The DesignSystem domain contains 79 source files.
Analyze Your Own Codebase
Get architecture documentation, dependency graphs, and domain analysis for your codebase in minutes.
Try Supermodel Free