A comprehensive, production-ready design system built on shadcn/ui, Radix UI, and Tailwind CSS v4. 78 components across three tiers, with full dark/light theme support and a live showcase page.
# Install dependencies
npm install
# Run the dev server
npm run dev
# Open the design system showcase
open http://localhost:3000/design-systemcomponents/
ui/ 53 Atom components (shadcn/ui + custom)
ui-patterns/ 19 Fragment components (composed from atoms)
blocks/ 6 Block components (Supabase-integrated)
hooks/ 2 Custom hooks
app/design-system/ Live showcase with sidebar navigation
| Tier | Directory | Count | Description |
|---|---|---|---|
| Atoms | components/ui/ |
53 | Primitive building blocks: Button, Input, Dialog, Calendar, etc. |
| Fragments | components/ui-patterns/ |
19 | Composed patterns: FilterBar, MetricCard, PageHeader, etc. |
| Blocks | components/blocks/ |
6 | Full-feature blocks with Supabase backend integration |
Base primitives from shadcn/ui plus custom atoms.
| Component | Description |
|---|---|
| Accordion | Collapsible content sections |
| Alert | Inline alert banners |
| Alert Dialog | Modal confirmation dialogs |
| Avatar | User avatar with image/fallback |
| Badge | Status labels — default, secondary, destructive, warning, success, outline |
| Breadcrumb | Navigation breadcrumb trail |
| Button | Full-featured button — 7 variants (default, destructive, outline, secondary, ghost, link, warning), loading state with spinner, icon/iconRight slots |
| Calendar | Date calendar grid |
| Card | Content card container |
| Carousel | Horizontal carousel |
| Checkbox | Checkbox input |
| Collapsible | Collapsible panel |
| Command | Command palette / combobox |
| Context Menu | Right-click menu |
| Date Picker | Date + date range picker (Popover + Calendar) |
| Dialog | Modal dialog with DialogSection + DialogSectionSeparator |
| Drawer | Bottom/side drawer |
| Dropdown Menu | Dropdown menu |
| Expanding Textarea | Auto-growing textarea |
| Field | 10 composable form field primitives |
| Form | react-hook-form integration |
| Hover Card | Hover-triggered info card |
| Input | Text input |
| Input OTP | One-time password input |
| Label | Form label |
| Menubar | Horizontal menu bar |
| Mermaid | Mermaid diagram renderer |
| Nav Menu | Horizontal underline tab navigation |
| Navigation Menu | Full navigation menu |
| Pagination | Page navigation |
| Popover | Click-triggered popover |
| Progress | Progress bar |
| Radio Group | Radio button group |
| Radio Group Card | Card-style radio selection |
| Radio Group Stacked | Stacked radio with label + description |
| Resizable | Resizable panels |
| Scroll Area | Custom scrollbar area |
| Select | Select dropdown |
| Separator | Visual separator |
| Sheet | Slide-out panel |
| Sidebar | App sidebar layout |
| Skeleton | Loading placeholder |
| Slider | Range slider |
| Sonner | Toast notifications |
| Switch | Toggle switch |
| Table | HTML table primitives |
| Tabs | Tab navigation |
| Textarea | Multi-line text input |
| Toggle | Toggle button |
| Toggle Group | Toggle button group |
| Tooltip | Hover tooltip |
| Tree View | Hierarchical tree with expand/collapse |
Higher-level components composed from atoms.
| Component | Description |
|---|---|
| Admonition | Callout/notice with default, warning, destructive types |
| Assistant Chat | AI chat input with slash-command popover |
| Confirmation Modal | Confirm/cancel dialog with variant styling |
| Data Input | Read-only input with copy + reveal toggle |
| Empty State | Empty state placeholder with icon, title, actions |
| Error Display | Error card with monospace error block + troubleshooting |
| Filter Bar | Advanced multi-condition filter with async options, type-aware inputs, nested groups, custom components |
| Form Item Layout | Unified form field wrapper (vertical/horizontal) |
| Info Tooltip | Info icon + tooltip shorthand |
| Inner Side Menu | Collapsible side menu with search, sort, empty states |
| Logs Bar Chart | Stacked bar chart for ok/warning/error log counts |
| Metric Card | Metric display with value, differential, sparkline, linkable header |
| Multi Select | Multi-select with badges, search, creatable, inline-combobox mode |
| Page Container | Page width container with size variants |
| Page Header | Compound header with breadcrumb, icon, title, actions, navigation tabs |
| Page Section | Page content section with vertical/horizontal orientation |
| Status Codes | HTTP status code pills with auto-coloring |
| Table of Contents | Scroll-aware page anchor TOC |
| Text Confirm Dialog | Typed-confirmation guard for destructive actions |
Supabase-integrated blocks — each connects to your Supabase backend.
| Component | Description |
|---|---|
| Social Auth | OAuth sign-in buttons (GitHub, Google) |
| Dropzone | Drag-and-drop file upload to Supabase Storage |
| Realtime Cursor | Live collaborative cursors via Supabase Realtime |
| Current User Avatar | Authenticated user avatar with fallback |
| Realtime Avatar Stack | Online user avatar stack via Supabase Presence |
| Realtime Chat | Real-time chat via Supabase Broadcast |
| Hook | Description |
|---|---|
useInfiniteQuery |
Paginated Supabase queries with infinite scroll |
useIsMobile |
Mobile viewport detection |
- Framework: Next.js 15 (App Router)
- Styling: Tailwind CSS v4 (CSS-based config)
- Components: shadcn/ui (new-york style) + Radix UI
- Backend: Supabase (Auth, Storage, Realtime)
- Charts: recharts
- Icons: lucide-react
- Type Safety: TypeScript (strict)
Full dark/light mode support via CSS variables. Toggle with the theme switcher in the DS showcase sidebar. All 78 components respect the active theme.
Design tokens are defined in app/globals.css via @theme inline (Tailwind v4).
- Copy
.env.exampleto.env.local - Add your Supabase URL and publishable key
- Run
npm run dev
Block components require a Supabase project. Atom and fragment components work without any backend.
MIT
Built by 30X Company. Inspired by Supabase Design System, Radix, shadcn/ui, and Geist.