Components

Slate UI Kit provides 58+ pre-built components that you can use in your Laravel Blade templates. All components are anonymous Blade components, meaning they're pure templates with no PHP classes.

• Button - Primary, secondary, outline, ghost, and danger variants
• Input - Text, email, password, number, file, and more
• Textarea - Multi-line text input
• Select - Dropdown selection with groups and separators
• Checkbox - Single and multiple selection
• Checkbox Label - Label for checkbox
• Radio - Radio button
• Radio Group - Radio button groups with state management
• Radio Group Item - Individual radio button item
• Switch - Toggle switch component
• Switch Label - Label for switch
• Switch Description - Description for switch
• Switch Group - Container for switch with label/description
• Slider - Range slider input with drag support
• Slider Track - Track component for custom styling
• Slider Range - Range fill component
• Slider Thumb - Thumb component
• Label - Form field labels
• Field - Container for form fields
• Input Group - Input with addons
• Input OTP - One-time password input
• Form - Form wrapper with CSRF and method spoofing

• Card - Container with optional header, footer, and content sections
• Card Header - Card header section
• Card Title - Card title
• Card Description - Card description
• Card Content - Card content area
• Card Footer - Card footer section
• Separator - Visual separator (horizontal/vertical)
• Aspect Ratio - Maintain aspect ratio container
• App Shell - Complete dashboard layout with sidebar, header, and main content area
• App Shell Sidebar - Sidebar component for app shell
• App Shell Header - Header component for app shell
• App Shell Footer - Footer component for app shell

• Breadcrumb - Navigation breadcrumb trail
• Breadcrumb List - Container for breadcrumb items
• Breadcrumb Item - Individual breadcrumb item
• Breadcrumb Link - Breadcrumb link
• Breadcrumb Page - Current page indicator
• Breadcrumb Separator - Separator between items
• Breadcrumb Ellipsis - Ellipsis for truncated items
• Pagination - Page navigation
• Pagination Content - Pagination container
• Pagination Item - Individual page item
• Pagination Link - Page link
• Pagination Ellipsis - Ellipsis indicator
• Pagination Previous - Previous button
• Pagination Next - Next button
• Tabs - Tabbed navigation
• Tabs List - Container for tab triggers
• Tabs Trigger - Individual tab button
• Tabs Content - Container for tab panels
• Tabs Panel - Individual tab content panel
• Sidebar - Collapsible sidebar component
• Sidebar Trigger - Button to toggle sidebar
• Sidebar Header - Sidebar header section
• Sidebar Content - Sidebar content area
• Sidebar Footer - Sidebar footer section
• Sidebar Group - Grouped sidebar items
• Sidebar Group Label - Label for sidebar group
• Sidebar Menu - Sidebar menu container
• Sidebar Menu Item - Individual menu item
• Sidebar Menu Button - Menu button

• Badge - Status badges and labels
• Alert - Alert messages
• Alert Title - Alert title
• Alert Description - Alert description
• Alert Dialog - Alert dialog modals
• Alert Dialog Trigger - Trigger button
• Alert Dialog Content - Dialog content
• Alert Dialog Header - Dialog header
• Alert Dialog Footer - Dialog footer
• Alert Dialog Title - Dialog title
• Alert Dialog Description - Dialog description
• Alert Dialog Action - Action button
• Alert Dialog Cancel - Cancel button
• Alert Dialog Overlay - Backdrop overlay
• Toast - Individual toast notification
• Toaster - Toast container
• Toast Action - Action button in toast
• Toast Close - Close button
• Progress - Progress bars
• Spinner - Loading spinner

• Table - Data tables
• Table Header - Table header section
• Table Body - Table body section
• Table Footer - Table footer section
• Table Row - Table row
• Table Head - Table header cell
• Table Cell - Table data cell
• Table Caption - Table caption
• Avatar - User avatar component
• Avatar Image - Avatar image
• Avatar Fallback - Avatar fallback text/icon
• Tooltip - Hover tooltips
• Tooltip Trigger - Tooltip trigger element
• Tooltip Content - Tooltip content
• Popover - Popover content
• Popover Trigger - Popover trigger
• Popover Content - Popover content area
• Hover Card - Hover card component
• Hover Card Trigger - Hover card trigger
• Hover Card Content - Hover card content
• Skeleton - Loading state placeholder
• Empty - Empty state component
• Rating - Interactive star rating component

• Dialog - Modal dialogs
• Dialog Trigger - Trigger button
• Dialog Content - Dialog content
• Dialog Header - Dialog header
• Dialog Footer - Dialog footer
• Dialog Title - Dialog title
• Dialog Description - Dialog description
• Dialog Close - Close button
• Dialog Overlay - Backdrop overlay
• Drawer - Slide-out drawer
• Drawer Trigger - Trigger button
• Drawer Content - Drawer content
• Drawer Header - Drawer header
• Drawer Footer - Drawer footer
• Drawer Title - Drawer title
• Drawer Description - Drawer description
• Drawer Close - Close button
• Drawer Overlay - Backdrop overlay
• Sheet - Side sheet component
• Sheet Trigger - Trigger button
• Sheet Content - Sheet content
• Sheet Header - Sheet header
• Sheet Footer - Sheet footer
• Sheet Title - Sheet title
• Sheet Description - Sheet description
• Sheet Close - Close button
• Sheet Overlay - Backdrop overlay
• Dropdown Menu - Dropdown menus
• Dropdown Menu Trigger - Trigger button
• Dropdown Menu Content - Dropdown content
• Dropdown Menu Item - Menu item
• Dropdown Menu Separator - Separator between items
• Dropdown Menu Label - Menu section label
• Context Menu - Right-click context menu
• Context Menu Trigger - Trigger element
• Context Menu Content - Context menu content
• Context Menu Item - Menu item
• Context Menu Separator - Separator
• Context Menu Label - Section label
• Navigation Menu - Navigation menu component
• Navigation Menu List - Menu list container
• Navigation Menu Item - Menu item
• Navigation Menu Trigger - Trigger button
• Navigation Menu Content - Dropdown content
• Navigation Menu Link - Navigation link
• Navigation Menu Viewport - Viewport container
• Menubar - Menubar component
• Menubar Menu - Individual menu
• Menubar Trigger - Trigger button
• Menubar Content - Menu content
• Menubar Item - Menu item
• Menubar Separator - Separator
• Menubar Shortcut - Keyboard shortcut display

• Accordion - Collapsible accordion component
• Accordion Item - Individual accordion item
• Accordion Trigger - Trigger button
• Accordion Content - Collapsible content
• Collapsible - Collapsible container
• Collapsible Trigger - Trigger button
• Collapsible Content - Collapsible content
• Command - Command palette component
• Command Dialog - Command dialog
• Command Input - Search input
• Command List - Results list
• Command Empty - Empty state
• Command Group - Grouped items
• Command Item - Individual item
• Command Separator - Separator
• Command Shortcut - Keyboard shortcut
• Combobox - Autocomplete combobox
• Combobox Trigger - Trigger button
• Combobox Input - Search input
• Combobox Content - Dropdown content
• Combobox Item - Selectable item
• Combobox Empty - Empty state
• Calendar - Date picker calendar
• Calendar Header - Calendar header
• Calendar Title - Month/year title
• Calendar Nav - Navigation buttons
• Calendar Grid - Calendar grid
• Progress - Progress bars
• Scroll Area - Custom scrollable container
• Resizable - Resizable panels container
• Resizable Panel - Individual resizable panel
• Resizable Handle - Drag handle
• Carousel - Image/content carousel
• Carousel Content - Carousel container
• Carousel Item - Individual slide
• Carousel Previous - Previous button
• Carousel Next - Next button
• Carousel Indicators - Slide indicators
• Chart - Chart.js integration component
• Chart Legend - Chart legend
• Chart Legend Item - Legend item
• Stepper - Step-by-step wizard component
• Step - Individual step
• Step Separator - Separator between steps
• Timeline - Timeline component
• Timeline Item - Individual timeline event
• Timeline Content - Timeline content
• Timeline Title - Event title
• Timeline Description - Event description
• Timeline Time - Event timestamp
• Marquee - Scrolling text/content
• Spotlight - Command menu component
• Spotlight Trigger - Trigger button
• Spotlight Overlay - Backdrop overlay
• Spotlight Content - Spotlight content
• Spotlight Item - Selectable item
• Spotlight Group - Grouped items
• Spotlight Empty - Empty state

• Toggle - Toggle button component
• Toggle Group - Container for multiple toggles
• Toggle Group Item - Individual toggle item
• Kbd - Keyboard key display
• Form - Form wrapper with CSRF

All Slate components are namespaced under slate:::

<x-slate::button>Click me</x-slate::button>
<x-slate::input placeholder="Enter text" />
<x-slate::card>
    <x-slate::card-header>Title</x-slate::card-header>
    <x-slate::card-content>Content</x-slate::card-content>
</x-slate::card>

Most components support multiple variants:

• default - Default styling
• outline - Outlined variant
• ghost - Ghost/transparent variant
• success - Success state (green)
• warning - Warning state (yellow/orange)
• error - Error state (red)
• danger - Danger/destructive state (darker red)
• info - Info state (blue)

Many components support size variants:

• sm - Small size
• md - Medium size (default)
• lg - Large size

<x-slate::button>Default Button</x-slate::button>
<x-slate::button variant="success">Success</x-slate::button>
<x-slate::button variant="danger">Danger</x-slate::button>
<x-slate::button variant="outline">Outline</x-slate::button>

• Getting Started - Learn the basics
• Theming - Customize component styles
• Design Tokens - Complete CSS variables reference
• Examples - See real-world usage