Supabase Design System

Getting Started
Introduction
Tailwind Classes
Color Usage
Typography
Theming
Icons
Accessibility
UI Patterns
Introduction
Charts
Empty States
Forms
Layout
Navigation
Tables
Fragment Components
Introduction
Admonition
Assistant Chat
Data Input
EmptyStatePresentational
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
Navigation Menu
NavMenu
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

Atom components

Building blocks of User interfaces

Fragment components

Components assembled from Atoms

Colors

Building blocks of User interfaces

Theming

Components assembled from Atoms

Icons

Components assembled from Atoms

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

Site inspired by Radix, shadcn/ui and Geist.