- Accordion
- Alert
- Alert Dialog
- Aspect Ratio
- Avatar
- Badge
- Breadcrumb
- Button
- Button Group
- Calendar
- Card
- Carousel
- Chart
- Checkbox
- Collapsible
- Combobox
- Command
- Context Menu
- Data Table
- Date Picker
- Dialog
- Direction
- Drawer
- Dropdown Menu
- Empty
- Field
- Hover Card
- Input
- Input Group
- Input OTP
- Item
- Kbd
- Label
- Menubar
- Native Select
- Navigation Menu
- Pagination
- Popover
- Progress
- Radio Group
- Resizable
- Scroll Area
- Select
- Separator
- Sheet
- Sidebar
- Skeleton
- Slider
- Sonner
- Spinner
- Switch
- Table
- Tabs
- Textarea
- Toast
- Toggle
- Toggle Group
- Tooltip
- Typography
Components
The SD registry ships 138+ components. Every one of them uses SD brand tokens and follows the same rules: dark-first, minimal, accessible.
Pulling Components
# Single component
npx shadcn add @sd/button
# Multiple at once
npx shadcn add @sd/button @sd/dialog @sd/input @sd/card
# See what's available
npx shadcn add @sd/Components land in your components/ui/ folder. You own the code.
Core UI Components
These are the standard building blocks. Every portal uses most of these.
| Component | Description | Key Variants |
|---|---|---|
button | Primary action element | default, outline, secondary, ghost, destructive, link |
badge | Status indicators and labels | default, secondary, outline, destructive |
card | Content container with header/footer | default, sm |
dialog | Modal overlay | default, sm sizes |
alert-dialog | Confirmation modal with actions | default, sm |
input | Text input field | with validation states |
textarea | Multi-line text input | resizable |
label | Form field label | required indicator |
select | Dropdown selection | default, sm |
checkbox | Toggle selection | checked, indeterminate |
switch | On/off toggle | default, sm |
tabs | Tabbed content panels | default |
table | Data table | with sorting, selection |
separator | Visual divider | horizontal, vertical |
skeleton | Loading placeholder | — |
spinner | Loading indicator | — |
progress | Progress bar | — |
slider | Range selection | — |
avatar | User profile image | sm, default, lg |
tooltip | Hover information | — |
popover | Floating content panel | — |
scroll-area | Custom scrollable container | — |
kbd | Keyboard shortcut display | — |
Navigation Components
| Component | Description |
|---|---|
navigation-menu | Top-level site navigation |
breadcrumb | Page hierarchy indicator |
pagination | Page navigation controls |
menubar | Application menu bar |
dropdown-menu | Action menu triggered by click |
context-menu | Right-click action menu |
command | Command palette (search + actions) |
sidebar | Collapsible side navigation |
Form Components
| Component | Description |
|---|---|
form | Form wrapper with validation |
field | Form field with label and error |
input-group | Input with addons (icons, buttons) |
input-otp | One-time password input |
native-select | Native HTML select element |
combobox | Searchable select with autocomplete |
radio-group | Radio button group |
toggle | Toggle button |
toggle-group | Group of toggle buttons |
Layout Components
| Component | Description |
|---|---|
sheet | Slide-out panel (drawer from edge) |
drawer | Bottom sheet / mobile drawer |
resizable | Resizable panel layout |
collapsible | Expandable/collapsible section |
aspect-ratio | Fixed aspect ratio container |
hover-card | Card shown on hover |
Data Display
| Component | Description |
|---|---|
chart | Recharts wrapper with SD theming |
carousel | Content slider |
calendar | Date grid (react-day-picker) |
sonner | Toast notifications |
alert | Inline alert messages |
empty | Empty state placeholder |
item | List item component |
Custom SD Components
These are built specifically for Style Driven portals. They don't exist in upstream shadcn.
confirm-dialog
Promise-based confirmation dialog. Returns true/false via async/await.
pnpm dlx shadcn add @sd/confirm-dialog
const { confirm, ConfirmDialog } = useConfirm()
const ok = await confirm({
title: "Delete this record?",
description: "This action cannot be undone.",
variant: "destructive",
})Dependencies: alert-dialog, button
date-picker
Standalone date picker with portal-based dropdown calendar.
pnpm dlx shadcn add @sd/date-picker
<DatePicker
value={date}
onChange={setDate}
minDate={new Date()}
placeholder="Select date"
/>Dependencies: date-fns
date-range-picker
Dual-month date range picker with visual range preview.
pnpm dlx shadcn add @sd/date-range-picker
<DateRangePicker
startDate={start}
endDate={end}
onStartChange={setStart}
onEndChange={setEnd}
/>Dependencies: date-fns
time-picker
30-minute interval time picker dropdown.
pnpm dlx shadcn add @sd/time-picker
<TimePicker value="09:00" onChange={setTime} minTime="08:00" maxTime="18:00" />email-input
Email validation input with error display.
pnpm dlx shadcn add @sd/email-input
<EmailInput
value={email}
onChange={setEmail}
onValidation={({ isValid, error }) => {}}
/>Dependencies: input
phone-input
International phone input with country selector. Supports 10 countries with formatting.
pnpm dlx shadcn add @sd/phone-input
<PhoneInput value={phone} onChange={setPhone} defaultCountry="US" />Dependencies: input
social-input
Social media handle input with platform selector. Supports LinkedIn, Instagram, Facebook, X, YouTube, TikTok.
pnpm dlx shadcn add @sd/social-input
<SocialInput
value={handle}
onChange={setHandle}
platform="instagram"
onPlatformChange={setPlatform}
/>Dependencies: input
url-input
URL validation input with auto-normalization. Prepends https:// automatically.
pnpm dlx shadcn add @sd/url-input
<UrlInput value={url} onChange={setUrl} onValidation={({ isValid }) => {}} />Dependencies: input
Blocks
Pre-built page templates you can drop in and customize:
| Block | Description |
|---|---|
login-01 through login-05 | Authentication pages |
signup-01 through signup-05 | Registration pages |
dashboard-01 | Admin dashboard layout |
sidebar-01 through sidebar-16 | Sidebar layout variations |