Supabase Design System

Getting Started
Introduction
Accessibility
Color Usage
Copywriting
Icons
Tailwind Classes
Theming
Typography
UI Patterns
Introduction
Charts
Empty States
Forms
Layout
Modality
Navigation
Tables
Fragment Components
Introduction
Admonition
Assistant Chat
Confirmation Modal
Data Input
Empty State Presentational
Filter Bar
Form Item Layout
Info Tooltip
Inner Side Menu
Logs Bar Chart
Metric Card
Modal
Multi Select
Page Container
Page Header
Page Section
Table of Contents (TOC)
Text Confirm Dialog
Atom Components
Introduction
Accordion
Alert
Alert Dialog
Aspect Ratio
Avatar
Badge
Breadcrumb
Button
Calendar
Card
Carousel
Checkbox
Collapsible
Combobox
Command
Command Menu (cmdk)
Context Menu
Date Picker
Dialog
Drawer
Dropdown Menu
Expanding Textarea
Field
Form
Hover Card
Input
Input OTP
Label
Menubar
Mermaid
Nav Menu
Navigation Menu
Pagination
Popover
Progress
Radio Group
Radio Group Card
Radio Group Stacked
Resizable
Scroll Area
Select
Separator
Sheet
Sidebar
Skeleton
Slider
Sonner
Switch
Table
Tabs
Textarea
Toggle
Toggle Group
Tooltip
Tree View

Supabase Design System

Design resources for building consistent user experiences

Colors

Custom color palette for Supabase

Icons

Custom icons for Supabase

Theming

Simple extensible theming system

UI patterns

Design guidelines for common interface patterns

Fragment components

Components assembled from atoms

Atom components

Building blocks of user interfaces

Built by Supabase. The source code is available on GitHub.

Site inspired by Radix, shadcn/ui and Geist.