Table of Components
A comprehensive table of all available components in the Spoke registry.
| Component | Lineage | Install | Tailwind variable | Theme variable | Fallback variable |
|---|---|---|---|---|---|
| Accordion | --radius-accordion | --accordion-radius | --radius-md | ||
| Alert | ShadcnSpoke | --radius-alert | --alert-radius | --radius-lg | |
| --color-alert-default | --alert-default | --card | |||
| --color-alert-default-foreground | --alert-default-foreground | --card-foreground | |||
| --color-alert-destructive | --alert-destructive | --card | |||
| --color-alert-destructive-foreground | --alert-destructive-foreground | --destructive | |||
| Alert Dialog | --color-alert-dialog-overlay | --alert-dialog-overlay | N/A | ||
| --color-alert-dialog-content | --alert-dialog-content | --background | |||
| --color-alert-dialog-border | --alert-dialog-border | --border | |||
| --radius-alert-dialog | --alert-dialog-radius | --radius-lg | |||
| --shadow-alert-dialog | --alert-dialog-shadow | --shadow-lg | |||
| Aspect Ratio | None | None | None | ||
| Avatar | --radius-avatar | --avatar-radius | N/A | ||
| --color-avatar-fallback | --avatar-fallback | --muted | |||
| Badge | ShadcnSpoke | --radius-badge | --badge-radius | --radius-md | |
| --color-badge-default | --badge-default | --primary | |||
| --color-badge-default-foreground | --badge-default-foreground | --primary-foreground | |||
| --color-badge-secondary | --badge-secondary | --secondary | |||
| --color-badge-secondary-foreground | --badge-secondary-foreground | --secondary-foreground | |||
| --color-badge-destructive | --badge-destructive | --destructive | |||
| --color-badge-outline | --badge-outline | --foreground | |||
| Breadcrumb | ShadcnSpoke | --color-breadcrumb-list | --breadcrumb-list | --muted-foreground | |
| --color-breadcrumb-link | --breadcrumb-link | --muted-foreground | |||
| --color-breadcrumb-link-hover | --breadcrumb-link-hover | --foreground | |||
| --color-breadcrumb-page | --breadcrumb-page | --foreground | |||
| --color-breadcrumb-separator | --breadcrumb-separator | --muted-foreground | |||
| Button | ShadcnSpoke | --color-button-primary | --button-primary | --primary | |
| --color-button-primary-foreground | --button-primary-foreground | --primary-foreground | |||
| --color-button-secondary | --button-secondary | --secondary | |||
| --color-button-secondary-foreground | --button-secondary-foreground | --secondary-foreground | |||
| --radius-button | --button-radius | --radius | |||
| Button Group | ShadcnSpoke | None | None | None | |
| Calendar | None | None | None | ||
| Card | ShadcnSpoke | --color-card-border | --card-border | --border | |
| --radius-card | --card-radius | --radius-lg | |||
| --shadow-card | --shadow-card | --shadow-sm | |||
| Carousel | None | None | None | ||
| Chart | --color-chart-tooltip | --chart-tooltip | --background | ||
| --color-chart-tooltip-border | --chart-tooltip-border | N/A | |||
| Checkbox | --radius-checkbox | --checkbox-radius | N/A | ||
| --color-checkbox-border | --checkbox-border | --input | |||
| --color-checkbox-background | --checkbox-background | N/A | |||
| --color-checkbox-checked | --checkbox-checked | --primary | |||
| --color-checkbox-checked-foreground | --checkbox-checked-foreground | --primary-foreground | |||
| --color-checkbox-checked-border | --checkbox-checked-border | --primary | |||
| --shadow-checkbox | --checkbox-shadow | --shadow-xs | |||
| Collapsible | None | None | None | ||
| Command | --radius-command | --command-radius | --radius-md | ||
| --color-command | --command | --popover | |||
| --color-command-foreground | --command-foreground | --popover-foreground | |||
| --color-command-border | --command-border | --border | |||
| --color-command-separator | --command-separator | --border | |||
| --color-command-item-selected | --command-item-selected | --accent | |||
| --color-command-item-selected-foreground | --command-item-selected-foreground | --accent-foreground | |||
| Command Enter | None | None | None | ||
| Context Menu | --color-context-menu-content | --context-menu-content | --popover | ||
| --color-context-menu-content-foreground | --context-menu-content-foreground | --popover-foreground | |||
| --color-context-menu-border | --context-menu-border | --border | |||
| --radius-context-menu | --context-menu-radius | --radius-md | |||
| --shadow-context-menu | --context-menu-shadow | --shadow-md | |||
| Dialog | --color-dialog-overlay | --dialog-overlay | N/A | ||
| --color-dialog-content | --dialog-content | --background | |||
| --color-dialog-border | --dialog-border | --border | |||
| --radius-dialog | --dialog-radius | --radius-lg | |||
| --shadow-dialog | --dialog-shadow | --shadow-lg | |||
| Dot | Spoke | --color-dot-primary | --dot-primary | --primary | |
| --color-dot-positive | --dot-positive | N/A | |||
| --color-dot-negative | --dot-negative | N/A | |||
| --color-dot-pending | --dot-pending | N/A | |||
| --color-dot-neutral | --dot-neutral | --muted-foreground | |||
| Drawer | --color-drawer-overlay | --drawer-overlay | N/A | ||
| --color-drawer-content | --drawer-content | --background | |||
| --color-drawer-border | --drawer-border | --border | |||
| --radius-drawer | --drawer-radius | --radius-lg | |||
| --shadow-drawer | --drawer-shadow | --shadow-lg | |||
| Dropdown Menu | --color-dropdown-menu-content | --dropdown-menu-content | --popover | ||
| --color-dropdown-menu-content-foreground | --dropdown-menu-content-foreground | --popover-foreground | |||
| --color-dropdown-menu-border | --dropdown-menu-border | --border | |||
| --radius-dropdown-menu | --dropdown-menu-radius | --radius-md | |||
| --shadow-dropdown-menu | --dropdown-menu-shadow | --shadow-md | |||
| Empty | Spoke | None | None | None | |
| Field | Spoke | None | None | None | |
| Form | ShadcnSpoke | None | None | None | |
| Grid | Spoke | --spacing-grid-gap | --grid-gap | N/A | |
| --radius-grid-item | --grid-item-radius | --card-radius | |||
| --aspect-grid-item | --grid-item-aspect | N/A | |||
| --spacing-grid-item-padding | --grid-item-padding | N/A | |||
| Heading | ShadcnSpoke | None | None | None | |
| Hover Card | --color-hover-card-content | --hover-card-content | --popover | ||
| --color-hover-card-content-foreground | --hover-card-content-foreground | --popover-foreground | |||
| --color-hover-card-border | --hover-card-border | --border | |||
| --radius-hover-card | --hover-card-radius | --radius-md | |||
| --shadow-hover-card | --hover-card-shadow | --shadow-md | |||
| Input | --radius-input | --input-radius | --radius-md | ||
| --color-input-border | --input-border | --input | |||
| --color-input-background | --input-background | N/A | |||
| --shadow-input | --input-shadow | --shadow-xs | |||
| Input Group | ShadcnSpoke | --radius-input-group | --input-group-radius | --radius-md | |
| --color-input-group-border | --input-group-border | --input | |||
| --color-input-group-background | --input-group-background | N/A | |||
| --shadow-input-group | --input-group-shadow | --shadow-xs | |||
| Input OTP | ShadcnSpoke | --radius-input-otp | --input-otp-radius | --radius-md | |
| --color-input-otp-border | --input-otp-border | --input | |||
| --color-input-otp-background | --input-otp-background | N/A | |||
| --shadow-input-otp | --input-otp-shadow | --shadow-xs | |||
| Item | ShadcnSpoke | None | None | None | |
| Kbd | ShadcnSpoke | None | None | None | |
| Label | --color-label-foreground | --label-foreground | --foreground | ||
| Menubar | --color-menubar | --menubar | --background | ||
| --color-menubar-border | --menubar-border | --border | |||
| --radius-menubar | --menubar-radius | --radius-md | |||
| --shadow-menubar | --menubar-shadow | --shadow-xs | |||
| --color-menubar-content | --menubar-content | --popover | |||
| --color-menubar-content-foreground | --menubar-content-foreground | --popover-foreground | |||
| --color-menubar-content-border | --menubar-content-border | --border | |||
| --radius-menubar-content | --menubar-content-radius | --radius-md | |||
| --shadow-menubar-content | --menubar-content-shadow | --shadow-md | |||
| Navigation Menu | --color-navigation-menu-trigger | --navigation-menu-trigger | --background | ||
| --radius-navigation-menu-trigger | --navigation-menu-trigger-radius | --radius-md | |||
| --color-navigation-menu-viewport | --navigation-menu-viewport | --popover | |||
| --color-navigation-menu-viewport-foreground | --navigation-menu-viewport-foreground | --popover-foreground | |||
| --color-navigation-menu-border | --navigation-menu-border | --border | |||
| --radius-navigation-menu-viewport | --navigation-menu-viewport-radius | --radius-md | |||
| --shadow-navigation-menu | --navigation-menu-shadow | --shadow-md | |||
| Number Field | Spoke | --radius-number-field | --number-field-radius | --radius-md | |
| --color-number-field | --number-field | --background | |||
| --color-number-field-border | --number-field-border | --input | |||
| Page Layout | Spoke | None | None | None | |
| Pagination | ShadcnSpoke | None | None | None | |
| Popover | --color-popover-content | --popover-content | --popover | ||
| --color-popover-content-foreground | --popover-content-foreground | --popover-foreground | |||
| --color-popover-border | --popover-border | --border | |||
| --radius-popover | --popover-radius | --radius-md | |||
| --shadow-popover | --popover-shadow | --shadow-md | |||
| Progress | --color-progress-container | --progress-container | --primary | ||
| --radius-progress | --progress-radius | N/A | |||
| --color-progress-indicator | --progress-indicator | --primary | |||
| Radio Group | --radius-radio | --radio-radius | N/A | ||
| --color-radio-border | --radio-border | --input | |||
| --color-radio-background | --radio-background | N/A | |||
| --color-radio-indicator | --radio-indicator | --primary | |||
| --shadow-radio | --radio-shadow | --shadow-xs | |||
| Reorderable | Spoke | --color-reorderable-separator | --reorderable-separator | --primary | |
| Resizable | --color-resizable-handle | --resizable-handle | --border | ||
| --color-resizable-handle-ring | --resizable-handle-ring | --ring | |||
| --color-resizable-handle-border | --resizable-handle-border | --border | |||
| Scroll Area | --color-scroll-area-thumb | --scroll-area-thumb | --border | ||
| Scroll Fade | Spoke | None | None | None | |
| Select | --radius-select | --select-radius | --radius-md | ||
| --color-select-border | --select-border | --input | |||
| --color-select-background | --select-background | N/A | |||
| --shadow-select | --select-shadow | --shadow-xs | |||
| --radius-select-content | --select-content-radius | --radius-md | |||
| --color-select-content | --select-content | --popover | |||
| --color-select-content-foreground | --select-content-foreground | --popover-foreground | |||
| --color-select-item-focus | --select-item-focus | --accent | |||
| --color-select-item-focus-foreground | --select-item-focus-foreground | --accent-foreground | |||
| Separator | --color-separator | --separator | --border | ||
| Sheet | --color-sheet-overlay | --sheet-overlay | N/A | ||
| --color-sheet-content | --sheet-content | --background | |||
| --color-sheet-border | --sheet-border | --border | |||
| --shadow-sheet | --sheet-shadow | --shadow-lg | |||
| Sidebar | ShadcnSpoke | --color-sidebar | --sidebar | --background | |
| --color-sidebar-foreground | --sidebar-foreground | --foreground | |||
| --color-sidebar-primary | --sidebar-primary | --primary | |||
| --color-sidebar-primary-foreground | --sidebar-primary-foreground | --primary-foreground | |||
| --color-sidebar-accent | --sidebar-accent | --accent | |||
| --color-sidebar-accent-foreground | --sidebar-accent-foreground | --accent-foreground | |||
| --color-sidebar-border | --sidebar-border | --border | |||
| --color-sidebar-ring | --sidebar-ring | --ring | |||
| Skeleton | ShadcnSpoke | --color-skeleton | --skeleton | --accent | |
| --radius-skeleton | --skeleton-radius | --radius-md | |||
| Slider | --color-slider-track | --slider-track | --muted | ||
| --radius-slider-track | --slider-track-radius | N/A | |||
| --color-slider-range | --slider-range | --primary | |||
| --radius-slider-thumb | --slider-thumb-radius | N/A | |||
| --color-slider-thumb-border | --slider-thumb-border | --primary | |||
| --color-slider-thumb | --slider-thumb | --background | |||
| --shadow-slider-thumb | --slider-thumb-shadow | --shadow-xs | |||
| Sonner | --color-toaster | --toaster | --popover | ||
| --color-toaster-foreground | --toaster-foreground | --popover-foreground | |||
| --color-toaster-border | --toaster-border | --border | |||
| --radius-toaster | --toaster-radius | --radius | |||
| Spinner | Spoke | --color-spinner | --spinner | --foreground | |
| Switch | --radius-switch | --switch-radius | N/A | ||
| --radius-switch-thumb | --switch-thumb-radius | N/A | |||
| --color-switch-checked | --switch-checked | --primary | |||
| --color-switch-unchecked | --switch-unchecked | --input | |||
| --color-switch-thumb | --switch-thumb | --background | |||
| --color-switch-border | --switch-border | N/A | |||
| --shadow-switch | --switch-shadow | --shadow-xs | |||
| Table | ShadcnSpoke | --color-table-border | --table-border | --border | |
| --color-table-row-hover | --table-row-hover | N/A | |||
| --color-table-row-selected | --table-row-selected | --muted | |||
| --color-table-footer | --table-footer | N/A | |||
| --color-table-head-foreground | --table-head-foreground | --foreground | |||
| --color-table-caption | --table-caption | --muted-foreground | |||
| Tabs | --color-tabs-list | --tabs-list | --muted | ||
| --color-tabs-list-foreground | --tabs-list-foreground | --muted-foreground | |||
| --radius-tabs-list | --tabs-list-radius | --radius-lg | |||
| --color-tabs-trigger-active | --tabs-trigger-active | --background | |||
| --color-tabs-trigger-active-foreground | --tabs-trigger-active-foreground | --foreground | |||
| --color-tabs-trigger-active-border | --tabs-trigger-active-border | --input | |||
| --radius-tabs-trigger | --tabs-trigger-radius | --radius-md | |||
| --shadow-tabs-trigger | --tabs-trigger-shadow | --shadow-sm | |||
| Textarea | ShadcnSpoke | --radius-textarea | --textarea-radius | --radius-md | |
| --color-textarea-border | --textarea-border | --input | |||
| --color-textarea-background | --textarea-background | N/A | |||
| --shadow-textarea | --textarea-shadow | --shadow-xs | |||
| Toggle | --color-toggle | --toggle | N/A | ||
| --color-toggle-border | --toggle-border | --input | |||
| --radius-toggle | --toggle-radius | --radius-md | |||
| --shadow-toggle | --toggle-shadow | --shadow-xs | |||
| Toggle Group | --radius-toggle-group | --toggle-group-radius | --radius-md | ||
| --shadow-toggle-group | --toggle-group-shadow | --shadow-xs | |||
| Tooltip | --color-tooltip | --tooltip | --foreground | ||
| --color-tooltip-foreground | --tooltip-foreground | --background | |||
| --radius-tooltip | --tooltip-radius | --radius-md |