Components

Slate 3.x alpha ships the components below.

• Button
• Button Group
• Badge
• Toggle
• Toggle Group

• App Shell
• Aspect Ratio
• Card — header, title, description, action, content, footer
• Accordion — item, trigger, content (Alpine)
• Collapsible — trigger, content (Alpine)
• Empty — header, media, title, description, content
• Marquee — CSS infinite scroll
• Resizable — panel group, panel, handle (Alpine)
• Scroll Area
• Separator
• Sidebar — provider, menu, inset, trigger (Alpine)
• Spotlight — mouse-following gradient (Alpine)
• Timeline — item, indicator, content, title, description

• Avatar — image, fallback, badge, group
• Chart — bar chart from data or slots
• Kbd — key and group
• Stepper — item, title, description (Alpine)
• Table — header, body, footer, row, head, cell, caption

• Alert — title, description, and action
• Skeleton
• Spinner
• Progress
• Rating — star rating (Alpine)
• Toast — toaster + toast (Alpine)

• Alert Dialog — trigger, content, action, cancel (Alpine)
• Calendar — month grid picker (Alpine)
• Carousel — content, item, previous, next (Alpine)
• Combobox — input, content, item (Alpine)
• Command — input, list, group, item (Alpine)
• Context Menu — trigger, content, item (Alpine)
• Dialog — trigger, content, header, footer (Alpine)
• Drawer — trigger, content, header, footer (Alpine)
• Dropdown Menu — trigger, content, item (Alpine)
• Hover Card — trigger, content (Alpine)
• Menubar — menu, trigger, content, item (Alpine)
• Navigation Menu — list, item, trigger, content, link (Alpine)
• Popover — trigger, content (Alpine)
• Sheet — trigger, content, header, footer (Alpine)
• Tooltip — trigger, content (Alpine)

• Tabs — list, trigger, content (Alpine)
• Breadcrumb — list, item, link, page, separator, ellipsis
• Pagination — content, item, link, previous, next, ellipsis

• Input
• Textarea
• Select
• Checkbox
• Switch
• Radio
• Radio Group — group, item (Alpine)
• File Input
• Slider
• Form — wrapper and form-item

• Field — wrapper plus label, description, and error helpers

• Dark mode toggle

All components use the x-slate:: namespace:

<x-slate::button variant="outline">Cancel</x-slate::button>

Override --slate-* tokens in your CSS or fork individual Blade templates. See Design tokens for the full token reference.