# BlatUI > shadcn/ui for the BLAT stack — Blade, Laravel, Alpine.js, Tailwind CSS v4. Open-source (MIT), copy-paste, accessible (WCAG AA) UI components you own. No JS runtime lock-in. Works with or without Livewire. Install the CLI: `composer require blatui/blatui`, then `php artisan blatui:add `. Every component, block and chart is also installable from this registry: `https://blatui.remix-it.com/r/.json` (shadcn registry-item schema). ## Forms & Input - [Button](https://blatui.remix-it.com/components/button): Displays a button or a component that looks like a button. — `php artisan blatui:add button` - [Button Group](https://blatui.remix-it.com/components/button-group): Groups related buttons together with consistent styling. — `php artisan blatui:add button-group` - [Input](https://blatui.remix-it.com/components/input): Displays a form input field or a component that looks like an input field. — `php artisan blatui:add input` - [Input Group](https://blatui.remix-it.com/components/input-group): Group inputs with text, buttons, icons, and more. — `php artisan blatui:add input-group` - [Input OTP](https://blatui.remix-it.com/components/input-otp): Accessible one-time password component with copy-paste functionality. — `php artisan blatui:add input-otp` - [Textarea](https://blatui.remix-it.com/components/textarea): Displays a form textarea or a component that looks like a textarea. — `php artisan blatui:add textarea` - [Label](https://blatui.remix-it.com/components/label): Renders an accessible label associated with controls. — `php artisan blatui:add label` - [Field](https://blatui.remix-it.com/components/field): Combine labels, controls, and help text to compose accessible form fields. — `php artisan blatui:add field` - [Checkbox](https://blatui.remix-it.com/components/checkbox): A control that allows the user to toggle between checked and not checked. — `php artisan blatui:add checkbox` - [Radio Group](https://blatui.remix-it.com/components/radio-group): A set of checkable buttons where no more than one can be checked at a time. — `php artisan blatui:add radio-group` - [Switch](https://blatui.remix-it.com/components/switch): A control that allows the user to toggle between an on and off state. — `php artisan blatui:add switch` - [Select](https://blatui.remix-it.com/components/select): Displays a list of options for the user to pick from, triggered by a button. — `php artisan blatui:add select` - [Combobox](https://blatui.remix-it.com/components/combobox): Autocomplete input and command palette with a list of suggestions. — `php artisan blatui:add combobox` - [Slider](https://blatui.remix-it.com/components/slider): An input where the user selects a value from within a given range. — `php artisan blatui:add slider` - [Toggle](https://blatui.remix-it.com/components/toggle): A two-state button that can be either on or off. — `php artisan blatui:add toggle` - [Toggle Group](https://blatui.remix-it.com/components/toggle-group): A set of two-state buttons that can be toggled on or off. — `php artisan blatui:add toggle-group` - [Calendar](https://blatui.remix-it.com/components/calendar): A date field component that allows users to enter and edit dates. — `php artisan blatui:add calendar` - [Date Picker](https://blatui.remix-it.com/components/date-picker): A date picker component with a calendar popover. — `php artisan blatui:add date-picker` - [Date & Time Picker](https://blatui.remix-it.com/components/datetime-picker): Pick a date and a time together — single or range — in one popover. — `php artisan blatui:add datetime-picker` - [Time Field](https://blatui.remix-it.com/components/time-field): A time input with native and dropdown variants, 12/24-hour and seconds. — `php artisan blatui:add time-field` ## Layout - [Card](https://blatui.remix-it.com/components/card): Displays a card with header, content, and footer. — `php artisan blatui:add card` - [Aspect Ratio](https://blatui.remix-it.com/components/aspect-ratio): Displays content within a desired ratio. — `php artisan blatui:add aspect-ratio` - [Separator](https://blatui.remix-it.com/components/separator): Visually or semantically separates content. — `php artisan blatui:add separator` - [Scroll Area](https://blatui.remix-it.com/components/scroll-area): Augments native scroll functionality for custom, cross-browser styling. — `php artisan blatui:add scroll-area` - [Resizable](https://blatui.remix-it.com/components/resizable): Accessible resizable panel groups and layouts. — `php artisan blatui:add resizable` - [Sidebar](https://blatui.remix-it.com/components/sidebar): A composable, themeable and customizable sidebar component. — `php artisan blatui:add sidebar` ## Data Display - [Avatar](https://blatui.remix-it.com/components/avatar): An image element with a fallback for representing the user. — `php artisan blatui:add avatar` - [Badge](https://blatui.remix-it.com/components/badge): Displays a badge or a component that looks like a badge. — `php artisan blatui:add badge` - [Table](https://blatui.remix-it.com/components/table): A responsive table component. — `php artisan blatui:add table` - [Carousel](https://blatui.remix-it.com/components/carousel): A carousel with motion and swipe. — `php artisan blatui:add carousel` - [Chart](https://blatui.remix-it.com/components/chart): Beautiful charts, built using ApexCharts. — `php artisan blatui:add chart` - [Item](https://blatui.remix-it.com/components/item): A flexible component for displaying content with media, title, and actions. — `php artisan blatui:add item` - [Kbd](https://blatui.remix-it.com/components/kbd): Used to display textual user input from the keyboard. — `php artisan blatui:add kbd` - [Progress](https://blatui.remix-it.com/components/progress): Displays an indicator showing the completion progress of a task. — `php artisan blatui:add progress` - [Skeleton](https://blatui.remix-it.com/components/skeleton): Use to show a placeholder while content is loading. — `php artisan blatui:add skeleton` ## Feedback - [Alert](https://blatui.remix-it.com/components/alert): Displays a callout for user attention. — `php artisan blatui:add alert` - [Empty](https://blatui.remix-it.com/components/empty): An empty state for when there is no data to display. — `php artisan blatui:add empty` - [Spinner](https://blatui.remix-it.com/components/spinner): An animated loading indicator. — `php artisan blatui:add spinner` - [Sonner](https://blatui.remix-it.com/components/sonner): An opinionated toast notification component. — `php artisan blatui:add sonner` - [Tooltip](https://blatui.remix-it.com/components/tooltip): A popup that displays information related to an element when hovered or focused. — `php artisan blatui:add tooltip` - [Hover Card](https://blatui.remix-it.com/components/hover-card): For sighted users to preview content available behind a link. — `php artisan blatui:add hover-card` ## Overlays - [Dialog](https://blatui.remix-it.com/components/dialog): A window overlaid on the primary window, rendering the content underneath inert. — `php artisan blatui:add dialog` - [Alert Dialog](https://blatui.remix-it.com/components/alert-dialog): A modal dialog that interrupts the user with important content and expects a response. — `php artisan blatui:add alert-dialog` - [Sheet](https://blatui.remix-it.com/components/sheet): Extends the dialog to display content that complements the main content of the screen. — `php artisan blatui:add sheet` - [Drawer](https://blatui.remix-it.com/components/drawer): A drawer component that slides in from the edge of the screen. — `php artisan blatui:add drawer` - [Popover](https://blatui.remix-it.com/components/popover): Displays rich content in a portal, triggered by a button. — `php artisan blatui:add popover` - [Dropdown Menu](https://blatui.remix-it.com/components/dropdown-menu): Displays a menu of actions or functions, triggered by a button. — `php artisan blatui:add dropdown-menu` - [Context Menu](https://blatui.remix-it.com/components/context-menu): Displays a menu located at the pointer, triggered by a right click. — `php artisan blatui:add context-menu` - [Menubar](https://blatui.remix-it.com/components/menubar): A visually persistent menu common in desktop applications. — `php artisan blatui:add menubar` - [Command](https://blatui.remix-it.com/components/command): Fast, composable, command menu for your app. — `php artisan blatui:add command` - [Command Dialog](https://blatui.remix-it.com/components/command-dialog): A command menu rendered inside a dialog. — `php artisan blatui:add command-dialog` ## Navigation - [Breadcrumb](https://blatui.remix-it.com/components/breadcrumb): Displays the path to the current resource using a hierarchy of links. — `php artisan blatui:add breadcrumb` - [Tabs](https://blatui.remix-it.com/components/tabs): A set of layered sections of content displayed one panel at a time. — `php artisan blatui:add tabs` - [Navigation Menu](https://blatui.remix-it.com/components/navigation-menu): A collection of links for navigating websites. — `php artisan blatui:add navigation-menu` - [Pagination](https://blatui.remix-it.com/components/pagination): Pagination with page navigation, next and previous links. — `php artisan blatui:add pagination` ## Disclosure - [Accordion](https://blatui.remix-it.com/components/accordion): A vertically stacked set of interactive headings that each reveal a section of content. — `php artisan blatui:add accordion` - [Collapsible](https://blatui.remix-it.com/components/collapsible): An interactive component which expands and collapses a panel. — `php artisan blatui:add collapsible` ## Blocks 64 full-page examples (dashboards, auth, calendars, sidebars…). Browse: https://blatui.remix-it.com/blocks · install: `https://blatui.remix-it.com/r/blocks/.json`. ## Charts 70 ApexCharts examples. Browse: https://blatui.remix-it.com/charts · install: `https://blatui.remix-it.com/r/charts/.json`.