# 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 anousss007/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` - [Copy Button](https://blatui.remix-it.com/components/copy-button): A button that copies text to the clipboard, with a copied state and a live announcement. — `php artisan blatui:add copy-button` - [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` - [Number Input](https://blatui.remix-it.com/components/number-input): A numeric stepper with minus/plus buttons that clamp a value to an optional min, max and step. — `php artisan blatui:add number-input` - [Knob](https://blatui.remix-it.com/components/knob): A rotary dial input — drag, scroll or use the keyboard to set a value. — `php artisan blatui:add knob` - [Phone Input](https://blatui.remix-it.com/components/phone-input): A phone number field with a searchable country-code selector. — `php artisan blatui:add phone-input` - [Textarea](https://blatui.remix-it.com/components/textarea): A form textarea that auto-grows to fit its content, with optional rows and a max-rows cap. — `php artisan blatui:add textarea` - [Rich Text Editor](https://blatui.remix-it.com/components/rich-text-editor): A lightweight, dependency-free WYSIWYG editor with a formatting toolbar. — `php artisan blatui:add rich-text-editor` - [Markdown Editor](https://blatui.remix-it.com/components/markdown-editor): A Markdown textarea with a live preview, formatting toolbar and Write/Preview tabs. — `php artisan blatui:add markdown-editor` - [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` - [Repeater](https://blatui.remix-it.com/components/repeater): Addable / removable field rows (a form field-array) that submit as an array. — `php artisan blatui:add repeater` - [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` - [Segmented Control](https://blatui.remix-it.com/components/segmented-control): An iOS-style segmented control for picking one option from a small set. — `php artisan blatui:add segmented-control` - [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): A filterable picker over a list of options — button or inline-input trigger, single or multi-select. — `php artisan blatui:add combobox` - [Tags Input](https://blatui.remix-it.com/components/tags-input): A tag entry field — type and press Enter or comma to add removable chips, with form-array submission. — `php artisan blatui:add tags-input` - [Mention Input](https://blatui.remix-it.com/components/mention-input): A textarea that surfaces a suggestion list when you type @ to insert a mention. — `php artisan blatui:add mention-input` - [Signature Pad](https://blatui.remix-it.com/components/signature-pad): Draw a signature on a canvas and capture it as a data URL, with clear and undo. — `php artisan blatui:add signature-pad` - [Slider](https://blatui.remix-it.com/components/slider): An input where the user selects a value — single, or a two-handle min–max 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` - [Rating](https://blatui.remix-it.com/components/rating): A star rating input with hover preview, keyboard support and a hidden field for forms. — `php artisan blatui:add rating` - [Color Picker](https://blatui.remix-it.com/components/color-picker): Accessible colour selection with a hue slider, a validating hex field and a preset swatch palette. — `php artisan blatui:add color-picker` - [Password Strength](https://blatui.remix-it.com/components/password-strength): A password field with a live strength meter and an optional requirements checklist. — `php artisan blatui:add password-strength` - [File Upload](https://blatui.remix-it.com/components/file-upload): A drag-and-drop dropzone with image thumbnails, file sizes and per-file progress bars. — `php artisan blatui:add file-upload` - [Editable](https://blatui.remix-it.com/components/editable): Click-to-edit inline text that swaps the value for an input, saving on Enter or blur. — `php artisan blatui:add editable` - [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 - [Container](https://blatui.remix-it.com/components/container): A centered, max-width content wrapper with responsive padding and selectable widths. — `php artisan blatui:add container` - [Stack](https://blatui.remix-it.com/components/stack): A flexbox layout primitive for vertical or horizontal stacking with gap and alignment. — `php artisan blatui:add stack` - [Card](https://blatui.remix-it.com/components/card): Displays a card with header, content, and footer. — `php artisan blatui:add card` - [Bento Grid](https://blatui.remix-it.com/components/bento-grid): A modern bento grid for arranging cards of varying column and row spans. — `php artisan blatui:add bento-grid` - [Page Header](https://blatui.remix-it.com/components/page-header): A page title block with a description and optional breadcrumb and action slots. — `php artisan blatui:add page-header` - [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` - [Accent](https://blatui.remix-it.com/components/accent): Recolors any subtree of BlatUI components from a single accent colour — no per-component props. — `php artisan blatui:add accent` - [Visually Hidden](https://blatui.remix-it.com/components/visually-hidden): Hide content visually while keeping it available to screen readers, with an optional skip-link mode. — `php artisan blatui:add visually-hidden` ## 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` - [Presence](https://blatui.remix-it.com/components/presence): An online / away / busy / offline status dot, optionally pinned to an avatar. — `php artisan blatui:add presence` - [Badge](https://blatui.remix-it.com/components/badge): Displays a badge, with semantic status tones (success, warning, danger, info, neutral). — `php artisan blatui:add badge` - [Table](https://blatui.remix-it.com/components/table): A responsive table component. — `php artisan blatui:add table` - [Comparison Table](https://blatui.remix-it.com/components/comparison-table): A data-driven feature comparison table — tiers × features with checks, dashes and values. — `php artisan blatui:add comparison-table` - [Data Table](https://blatui.remix-it.com/components/data-table): An interactive table with search, sortable columns, row selection and pagination. — `php artisan blatui:add data-table` - [Server Table](https://blatui.remix-it.com/components/server-table): A server-rendered, Livewire-first data table with declarative row actions, server sorting, search, selection and pagination. — `php artisan blatui:add server-table` - [Tree Table](https://blatui.remix-it.com/components/tree-table): A table whose rows expand to reveal nested child rows. — `php artisan blatui:add tree-table` - [Server Tree Table](https://blatui.remix-it.com/components/server-tree-table): A server-rendered, Livewire-first tree table: nested rows from your query, expand and collapse without a request, row actions, and drag-and-drop or keyboard reordering that persists with one call. — `php artisan blatui:add server-tree-table` - [Description List](https://blatui.remix-it.com/components/description-list): A semantic key/value list (term/description) — horizontal or vertical, with an optional bordered style. — `php artisan blatui:add description-list` - [Carousel](https://blatui.remix-it.com/components/carousel): A carousel with motion and swipe. — `php artisan blatui:add carousel` - [Masonry](https://blatui.remix-it.com/components/masonry): A Pinterest-style masonry grid built on native CSS columns. — `php artisan blatui:add masonry` - [Comparison Slider](https://blatui.remix-it.com/components/comparison-slider): A draggable before/after image comparison with a keyboard-operable divider. — `php artisan blatui:add comparison-slider` - [Chart](https://blatui.remix-it.com/components/chart): Beautiful charts, built using ApexCharts. — `php artisan blatui:add chart` - [Sparkline](https://blatui.remix-it.com/components/sparkline): A tiny inline trend line drawn from a data array — for KPI cards, tables and stats. — `php artisan blatui:add sparkline` - [Stat](https://blatui.remix-it.com/components/stat): A KPI metric card with a label, big value, trend arrow with change, optional icon and inline sparkline. — `php artisan blatui:add stat` - [Meter](https://blatui.remix-it.com/components/meter): A labelled measurement bar for a value within a range (usage, score, capacity), with status tones. — `php artisan blatui:add meter` - [Heatmap](https://blatui.remix-it.com/components/heatmap): A GitHub-style contributions heatmap of colour-graded daily counts. — `php artisan blatui:add heatmap` - [Gantt](https://blatui.remix-it.com/components/gantt): A project timeline (Gantt) chart with task bars positioned by date and progress. — `php artisan blatui:add gantt` - [Scheduler](https://blatui.remix-it.com/components/scheduler): A week / day agenda that positions events in time slots. — `php artisan blatui:add scheduler` - [Org Chart](https://blatui.remix-it.com/components/org-chart): A top-down organisational chart with connector lines, rendered from a tree. — `php artisan blatui:add org-chart` - [Icon](https://blatui.remix-it.com/components/icon): A thin wrapper over Lucide icons that auto-mirrors directional arrows under RTL. — `php artisan blatui:add icon` - [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` - [Marquee](https://blatui.remix-it.com/components/marquee): A seamless, infinite scroll of its content — logos, testimonials, badges. — `php artisan blatui:add marquee` - [Typewriter](https://blatui.remix-it.com/components/typewriter): Types and deletes a cycling list of words — for hero headlines and taglines. — `php artisan blatui:add typewriter` - [Text Reveal](https://blatui.remix-it.com/components/text-reveal): Brightens its words one by one as the element scrolls up through the viewport. — `php artisan blatui:add text-reveal` - [Quote](https://blatui.remix-it.com/components/quote): A styled blockquote / testimonial with optional author, role and avatar. — `php artisan blatui:add quote` - [Progress](https://blatui.remix-it.com/components/progress): Displays an indicator showing the completion progress of a task — a linear bar or a circular ring. — `php artisan blatui:add progress` - [Countdown](https://blatui.remix-it.com/components/countdown): A live countdown to a target date — days, hours, minutes and seconds, with an expired state. — `php artisan blatui:add countdown` - [Timeline](https://blatui.remix-it.com/components/timeline): A vertical timeline of events, with dots, connecting lines, icons and timestamps. — `php artisan blatui:add timeline` - [Kanban](https://blatui.remix-it.com/components/kanban): A drag-and-drop board of columns whose cards can be moved between them. — `php artisan blatui:add kanban` - [Tree](https://blatui.remix-it.com/components/tree): A collapsible, keyboard-navigable hierarchical tree view with folder and file icons. — `php artisan blatui:add tree` - [JSON Viewer](https://blatui.remix-it.com/components/json-viewer): A collapsible, syntax-highlighted JSON tree with per-node expand/collapse and copy. — `php artisan blatui:add json-viewer` - [Diff Viewer](https://blatui.remix-it.com/components/diff-viewer): A line-based text diff with inline or side-by-side views and add/remove tinting. — `php artisan blatui:add diff-viewer` - [Skeleton](https://blatui.remix-it.com/components/skeleton): Use to show a placeholder while content is loading. — `php artisan blatui:add skeleton` - [Code Block](https://blatui.remix-it.com/components/code-block): A dark code panel with an optional filename header and a copy button. — `php artisan blatui:add code-block` - [Typography](https://blatui.remix-it.com/components/typography): Prose text styles — headings, lead, blockquote, lists, inline code and more, via a single variant prop. — `php artisan blatui:add typography` ## AI - [Chat](https://blatui.remix-it.com/components/chat): A composable chat transcript — role-aware message bubbles with avatars, names, timestamps and a typing indicator. — `php artisan blatui:add chat` - [Prompt Input](https://blatui.remix-it.com/components/prompt-input): An AI chat composer with an auto-growing textarea, attach and send buttons, and ⌘↵ to send. — `php artisan blatui:add prompt-input` - [Streaming Text](https://blatui.remix-it.com/components/streaming-text): Reveals a passage token-by-token, LLM-style, with a blinking caret that stops when complete. — `php artisan blatui:add streaming-text` - [Reasoning](https://blatui.remix-it.com/components/reasoning): A collapsible AI reasoning / "thinking" block that reveals the chain-of-thought behind an answer. — `php artisan blatui:add reasoning` - [Tool Call](https://blatui.remix-it.com/components/tool-call): A card showing an AI tool invocation — name, status, and collapsible JSON arguments and result. — `php artisan blatui:add tool-call` - [Citation](https://blatui.remix-it.com/components/citation): An inline, LLM-style source reference that reveals the source title, link and snippet in a popover. — `php artisan blatui:add citation` - [Terminal](https://blatui.remix-it.com/components/terminal): A terminal / console window with traffic-light controls — for command output and code demos. — `php artisan blatui:add terminal` ## Feedback - [Alert](https://blatui.remix-it.com/components/alert): Displays a callout for user attention, with semantic status tones. — `php artisan blatui:add alert` - [Banner](https://blatui.remix-it.com/components/banner): A full-width, dismissible announcement bar with semantic tones. — `php artisan blatui:add banner` - [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` - [Loading Overlay](https://blatui.remix-it.com/components/loading-overlay): A veil with a spinner shown over its content while busy. — `php artisan blatui:add loading-overlay` - [Top Progress](https://blatui.remix-it.com/components/top-progress): An NProgress-style top loading bar with start / set / done controls for navigation. — `php artisan blatui:add top-progress` - [Sonner](https://blatui.remix-it.com/components/sonner): An opinionated toast notification component. Includes a sonner-flash bridge that turns Laravel session flashes into toasts. — `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` - [Cookie Consent](https://blatui.remix-it.com/components/cookie-consent): A GDPR cookie banner with accept / reject / customize, persisted to localStorage. — `php artisan blatui:add cookie-consent` ## 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` - [Notification Center](https://blatui.remix-it.com/components/notification-center): A bell with an unread-count badge that opens an inbox of notifications. — `php artisan blatui:add notification-center` - [Onboarding Tour](https://blatui.remix-it.com/components/onboarding-tour): A guided product tour that spotlights elements step by step. — `php artisan blatui:add onboarding-tour` ## 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` - [Link](https://blatui.remix-it.com/components/link): An inline, prose-friendly text link with default, muted and subtle variants. — `php artisan blatui:add link` - [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` - [Stepper](https://blatui.remix-it.com/components/stepper): Guides users through a multi-step flow — horizontal or vertical, with completed-step checks. — `php artisan blatui:add stepper` - [Scrollspy](https://blatui.remix-it.com/components/scrollspy): A table-of-contents nav that highlights the section currently in view. — `php artisan blatui:add scrollspy` - [Bottom Navigation](https://blatui.remix-it.com/components/bottom-navigation): A mobile bottom tab bar with icons, labels, an active state and badges. — `php artisan blatui:add bottom-navigation` - [Dock](https://blatui.remix-it.com/components/dock): A macOS-style dock whose icons magnify as the cursor passes over them. — `php artisan blatui:add dock` - [Speed Dial](https://blatui.remix-it.com/components/speed-dial): A floating action button that expands to reveal labelled actions. — `php artisan blatui:add speed-dial` - [Back To Top](https://blatui.remix-it.com/components/back-to-top): A floating button that appears after scrolling and smoothly returns to the top. — `php artisan blatui:add back-to-top` - [Infinite Scroll](https://blatui.remix-it.com/components/infinite-scroll): Loads more content when a sentinel scrolls into view, with a load-more fallback. — `php artisan blatui:add infinite-scroll` ## 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` ## E-commerce - [Product Card](https://blatui.remix-it.com/components/product-card): An e-commerce product card with image, badge, rating, price and an add-to-cart action. — `php artisan blatui:add product-card` - [Price](https://blatui.remix-it.com/components/price): A formatted product price with optional struck-through compare-at and a discount badge. — `php artisan blatui:add price` - [Variant Selector](https://blatui.remix-it.com/components/variant-selector): Choose a product variant — size pills or colour swatches — from an accessible radio group. — `php artisan blatui:add variant-selector` - [Add To Cart](https://blatui.remix-it.com/components/add-to-cart): A stateful add-to-cart button that animates idle → adding → added. — `php artisan blatui:add add-to-cart` - [Mini Cart](https://blatui.remix-it.com/components/mini-cart): A cart dropdown with line items, quantity steppers, a live subtotal and checkout. — `php artisan blatui:add mini-cart` ## Effects - [Gradient Text](https://blatui.remix-it.com/components/gradient-text): Text painted with a gradient fill, with optional animated shimmer and colour presets. — `php artisan blatui:add gradient-text` - [Number Ticker](https://blatui.remix-it.com/components/number-ticker): A number that animates counting up to its target when it scrolls into view. — `php artisan blatui:add number-ticker` - [Border Beam](https://blatui.remix-it.com/components/border-beam): A container with a light beam continuously travelling around its border. — `php artisan blatui:add border-beam` - [Spotlight Card](https://blatui.remix-it.com/components/spotlight-card): A card with a soft radial spotlight that follows the cursor on hover. — `php artisan blatui:add spotlight-card` - [Tilt Card](https://blatui.remix-it.com/components/tilt-card): A card that tilts in 3D toward the cursor, with an optional glare highlight. — `php artisan blatui:add tilt-card` - [Flip Card](https://blatui.remix-it.com/components/flip-card): A card that flips on hover or click to reveal a back face. — `php artisan blatui:add flip-card` - [Confetti](https://blatui.remix-it.com/components/confetti): A celebratory confetti burst fired from a button or any trigger. — `php artisan blatui:add confetti` - [Meteors](https://blatui.remix-it.com/components/meteors): Animated falling meteor streaks behind your content. — `php artisan blatui:add meteors` - [Animated Beam](https://blatui.remix-it.com/components/animated-beam): An SVG line with a travelling light gradient connecting two elements. — `php artisan blatui:add animated-beam` - [Parallax](https://blatui.remix-it.com/components/parallax): Translates its content as it scrolls for a depth effect. — `php artisan blatui:add parallax` - [Dot Pattern](https://blatui.remix-it.com/components/dot-pattern): A decorative dotted-grid background layer with adjustable size, gap and edge fade. — `php artisan blatui:add dot-pattern` - [Grid Pattern](https://blatui.remix-it.com/components/grid-pattern): A decorative grid / graph-paper background layer with an optional edge fade. — `php artisan blatui:add grid-pattern` - [Aurora](https://blatui.remix-it.com/components/aurora): An animated northern-lights gradient backdrop with your content overlaid. — `php artisan blatui:add aurora` ## Media - [Audio Player](https://blatui.remix-it.com/components/audio-player): A custom audio player — play/pause, seek, time and volume — over a native HTML5 audio element. — `php artisan blatui:add audio-player` - [Video](https://blatui.remix-it.com/components/video): A styled HTML5 video player with a custom poster and play overlay. — `php artisan blatui:add video` - [Image](https://blatui.remix-it.com/components/image): A smart image with a skeleton, blur-up fade-in and a graceful error fallback. — `php artisan blatui:add image` - [Gallery](https://blatui.remix-it.com/components/gallery): A thumbnail grid that opens a full-screen lightbox with keyboard navigation. — `php artisan blatui:add gallery` - [QR Code](https://blatui.remix-it.com/components/qr-code): A client-side QR code generator rendered as a crisp, theme-aware SVG — no dependencies. — `php artisan blatui:add qr-code` - [Map](https://blatui.remix-it.com/components/map): A keyless OpenStreetMap embed that drops a pin at any latitude / longitude. — `php artisan blatui:add map` ## 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`. --- # Component reference ## Button Displays a button or a component that looks like a button. - Category: Forms & Input - Install: `php artisan blatui:add button` - Registry: https://blatui.remix-it.com/r/button.json - Docs: https://blatui.remix-it.com/components/button - Files: button.blade.php - Composer: gehrisandro/tailwind-merge-laravel ## Button Group Groups related buttons together with consistent styling. - Category: Forms & Input - Install: `php artisan blatui:add button-group` - Registry: https://blatui.remix-it.com/r/button-group.json - Docs: https://blatui.remix-it.com/components/button-group - Files: button-group.blade.php, button-group-separator.blade.php, button-group-text.blade.php - Composer: gehrisandro/tailwind-merge-laravel ## Copy Button A button that copies text to the clipboard, with a copied state and a live announcement. - Category: Forms & Input - Install: `php artisan blatui:add copy-button` - Registry: https://blatui.remix-it.com/r/copy-button.json - Docs: https://blatui.remix-it.com/components/copy-button - Files: copy-button.blade.php - Composer: mallardduck/blade-lucide-icons, gehrisandro/tailwind-merge-laravel ## Input Displays a form input field or a component that looks like an input field. - Category: Forms & Input - Install: `php artisan blatui:add input` - Registry: https://blatui.remix-it.com/r/input.json - Docs: https://blatui.remix-it.com/components/input - Files: input.blade.php, input-mask.blade.php - Composer: gehrisandro/tailwind-merge-laravel ## Input Group Group inputs with text, buttons, icons, and more. - Category: Forms & Input - Install: `php artisan blatui:add input-group` - Registry: https://blatui.remix-it.com/r/input-group.json - Docs: https://blatui.remix-it.com/components/input-group - Files: input-group.blade.php, input-group-addon.blade.php, input-group-button.blade.php, input-group-input.blade.php, input-group-text.blade.php - Composer: gehrisandro/tailwind-merge-laravel ## Input OTP Accessible one-time password component with copy-paste functionality. - Category: Forms & Input - Install: `php artisan blatui:add input-otp` - Registry: https://blatui.remix-it.com/r/input-otp.json - Docs: https://blatui.remix-it.com/components/input-otp - Files: input-otp.blade.php, input-otp-group.blade.php, input-otp-separator.blade.php, input-otp-slot.blade.php - Composer: mallardduck/blade-lucide-icons, gehrisandro/tailwind-merge-laravel ## Number Input A numeric stepper with minus/plus buttons that clamp a value to an optional min, max and step. - Category: Forms & Input - Install: `php artisan blatui:add number-input` - Registry: https://blatui.remix-it.com/r/number-input.json - Docs: https://blatui.remix-it.com/components/number-input - Files: number-input.blade.php - Composer: mallardduck/blade-lucide-icons, gehrisandro/tailwind-merge-laravel ## Knob A rotary dial input — drag, scroll or use the keyboard to set a value. - Category: Forms & Input - Install: `php artisan blatui:add knob` - Registry: https://blatui.remix-it.com/r/knob.json - Docs: https://blatui.remix-it.com/components/knob - Files: knob.blade.php - Composer: gehrisandro/tailwind-merge-laravel ## Phone Input A phone number field with a searchable country-code selector. - Category: Forms & Input - Install: `php artisan blatui:add phone-input` - Registry: https://blatui.remix-it.com/r/phone-input.json - Docs: https://blatui.remix-it.com/components/phone-input - Files: phone-input.blade.php - Composer: mallardduck/blade-lucide-icons, gehrisandro/tailwind-merge-laravel ## Textarea A form textarea that auto-grows to fit its content, with optional rows and a max-rows cap. - Category: Forms & Input - Install: `php artisan blatui:add textarea` - Registry: https://blatui.remix-it.com/r/textarea.json - Docs: https://blatui.remix-it.com/components/textarea - Files: textarea.blade.php - Composer: gehrisandro/tailwind-merge-laravel ## Rich Text Editor A lightweight, dependency-free WYSIWYG editor with a formatting toolbar. - Category: Forms & Input - Install: `php artisan blatui:add rich-text-editor` - Registry: https://blatui.remix-it.com/r/rich-text-editor.json - Docs: https://blatui.remix-it.com/components/rich-text-editor - Files: rich-text-editor.blade.php - Composer: mallardduck/blade-lucide-icons, gehrisandro/tailwind-merge-laravel ## Markdown Editor A Markdown textarea with a live preview, formatting toolbar and Write/Preview tabs. - Category: Forms & Input - Install: `php artisan blatui:add markdown-editor` - Registry: https://blatui.remix-it.com/r/markdown-editor.json - Docs: https://blatui.remix-it.com/components/markdown-editor - Files: markdown-editor.blade.php - Composer: mallardduck/blade-lucide-icons, gehrisandro/tailwind-merge-laravel ## Label Renders an accessible label associated with controls. - Category: Forms & Input - Install: `php artisan blatui:add label` - Registry: https://blatui.remix-it.com/r/label.json - Docs: https://blatui.remix-it.com/components/label - Files: label.blade.php - Composer: gehrisandro/tailwind-merge-laravel ## Field Combine labels, controls, and help text to compose accessible form fields. - Category: Forms & Input - Install: `php artisan blatui:add field` - Registry: https://blatui.remix-it.com/r/field.json - Docs: https://blatui.remix-it.com/components/field - Files: field.blade.php, field-content.blade.php, field-description.blade.php, field-error.blade.php, field-group.blade.php, field-label.blade.php, field-legend.blade.php, field-separator.blade.php, field-set.blade.php, field-title.blade.php - Composer: gehrisandro/tailwind-merge-laravel ## Repeater Addable / removable field rows (a form field-array) that submit as an array. - Category: Forms & Input - Install: `php artisan blatui:add repeater` - Registry: https://blatui.remix-it.com/r/repeater.json - Docs: https://blatui.remix-it.com/components/repeater - Files: repeater.blade.php - Composer: gehrisandro/tailwind-merge-laravel ## Checkbox A control that allows the user to toggle between checked and not checked. - Category: Forms & Input - Install: `php artisan blatui:add checkbox` - Registry: https://blatui.remix-it.com/r/checkbox.json - Docs: https://blatui.remix-it.com/components/checkbox - Files: checkbox.blade.php - Composer: mallardduck/blade-lucide-icons, gehrisandro/tailwind-merge-laravel ## Radio Group A set of checkable buttons where no more than one can be checked at a time. - Category: Forms & Input - Install: `php artisan blatui:add radio-group` - Registry: https://blatui.remix-it.com/r/radio-group.json - Docs: https://blatui.remix-it.com/components/radio-group - Files: radio-group.blade.php, radio-group-item.blade.php - Composer: mallardduck/blade-lucide-icons, gehrisandro/tailwind-merge-laravel ## Switch A control that allows the user to toggle between an on and off state. - Category: Forms & Input - Install: `php artisan blatui:add switch` - Registry: https://blatui.remix-it.com/r/switch.json - Docs: https://blatui.remix-it.com/components/switch - Files: switch.blade.php - Composer: gehrisandro/tailwind-merge-laravel ## Segmented Control An iOS-style segmented control for picking one option from a small set. - Category: Forms & Input - Install: `php artisan blatui:add segmented-control` - Registry: https://blatui.remix-it.com/r/segmented-control.json - Docs: https://blatui.remix-it.com/components/segmented-control - Files: segmented-control.blade.php - Composer: mallardduck/blade-lucide-icons, gehrisandro/tailwind-merge-laravel ## Select Displays a list of options for the user to pick from, triggered by a button. - Category: Forms & Input - Install: `php artisan blatui:add select` - Registry: https://blatui.remix-it.com/r/select.json - Docs: https://blatui.remix-it.com/components/select - Files: select.blade.php, select-content.blade.php, select-group.blade.php, select-item.blade.php, select-label.blade.php, select-separator.blade.php, select-trigger.blade.php, select-value.blade.php - Composer: mallardduck/blade-lucide-icons, gehrisandro/tailwind-merge-laravel - npm: @alpinejs/focus ## Combobox A filterable picker over a list of options — button or inline-input trigger, single or multi-select. - Category: Forms & Input - Install: `php artisan blatui:add combobox` - Registry: https://blatui.remix-it.com/r/combobox.json - Docs: https://blatui.remix-it.com/components/combobox - Files: combobox.blade.php - Composer: mallardduck/blade-lucide-icons, gehrisandro/tailwind-merge-laravel - npm: @alpinejs/focus ## Tags Input A tag entry field — type and press Enter or comma to add removable chips, with form-array submission. - Category: Forms & Input - Install: `php artisan blatui:add tags-input` - Registry: https://blatui.remix-it.com/r/tags-input.json - Docs: https://blatui.remix-it.com/components/tags-input - Files: tags-input.blade.php - Composer: mallardduck/blade-lucide-icons, gehrisandro/tailwind-merge-laravel ## Mention Input A textarea that surfaces a suggestion list when you type @ to insert a mention. - Category: Forms & Input - Install: `php artisan blatui:add mention-input` - Registry: https://blatui.remix-it.com/r/mention-input.json - Docs: https://blatui.remix-it.com/components/mention-input - Files: mention-input.blade.php - Depends on: textarea - Composer: gehrisandro/tailwind-merge-laravel ## Signature Pad Draw a signature on a canvas and capture it as a data URL, with clear and undo. - Category: Forms & Input - Install: `php artisan blatui:add signature-pad` - Registry: https://blatui.remix-it.com/r/signature-pad.json - Docs: https://blatui.remix-it.com/components/signature-pad - Files: signature-pad.blade.php - Depends on: button - Composer: mallardduck/blade-lucide-icons, gehrisandro/tailwind-merge-laravel ## Slider An input where the user selects a value — single, or a two-handle min–max range. - Category: Forms & Input - Install: `php artisan blatui:add slider` - Registry: https://blatui.remix-it.com/r/slider.json - Docs: https://blatui.remix-it.com/components/slider - Files: slider.blade.php - Composer: gehrisandro/tailwind-merge-laravel ## Toggle A two-state button that can be either on or off. - Category: Forms & Input - Install: `php artisan blatui:add toggle` - Registry: https://blatui.remix-it.com/r/toggle.json - Docs: https://blatui.remix-it.com/components/toggle - Files: toggle.blade.php - Composer: gehrisandro/tailwind-merge-laravel ## Toggle Group A set of two-state buttons that can be toggled on or off. - Category: Forms & Input - Install: `php artisan blatui:add toggle-group` - Registry: https://blatui.remix-it.com/r/toggle-group.json - Docs: https://blatui.remix-it.com/components/toggle-group - Files: toggle-group.blade.php, toggle-group-item.blade.php - Composer: gehrisandro/tailwind-merge-laravel ## Rating A star rating input with hover preview, keyboard support and a hidden field for forms. - Category: Forms & Input - Install: `php artisan blatui:add rating` - Registry: https://blatui.remix-it.com/r/rating.json - Docs: https://blatui.remix-it.com/components/rating - Files: rating.blade.php - Composer: mallardduck/blade-lucide-icons, gehrisandro/tailwind-merge-laravel ## Color Picker Accessible colour selection with a hue slider, a validating hex field and a preset swatch palette. - Category: Forms & Input - Install: `php artisan blatui:add color-picker` - Registry: https://blatui.remix-it.com/r/color-picker.json - Docs: https://blatui.remix-it.com/components/color-picker - Files: color-picker.blade.php - Composer: gehrisandro/tailwind-merge-laravel ## Password Strength A password field with a live strength meter and an optional requirements checklist. - Category: Forms & Input - Install: `php artisan blatui:add password-strength` - Registry: https://blatui.remix-it.com/r/password-strength.json - Docs: https://blatui.remix-it.com/components/password-strength - Files: password-strength.blade.php - Composer: mallardduck/blade-lucide-icons, gehrisandro/tailwind-merge-laravel ## File Upload A drag-and-drop dropzone with image thumbnails, file sizes and per-file progress bars. - Category: Forms & Input - Install: `php artisan blatui:add file-upload` - Registry: https://blatui.remix-it.com/r/file-upload.json - Docs: https://blatui.remix-it.com/components/file-upload - Files: file-upload.blade.php - Composer: mallardduck/blade-lucide-icons, gehrisandro/tailwind-merge-laravel ## Editable Click-to-edit inline text that swaps the value for an input, saving on Enter or blur. - Category: Forms & Input - Install: `php artisan blatui:add editable` - Registry: https://blatui.remix-it.com/r/editable.json - Docs: https://blatui.remix-it.com/components/editable - Files: editable.blade.php - Composer: mallardduck/blade-lucide-icons, gehrisandro/tailwind-merge-laravel ## Calendar A date field component that allows users to enter and edit dates. - Category: Forms & Input - Install: `php artisan blatui:add calendar` - Registry: https://blatui.remix-it.com/r/calendar.json - Docs: https://blatui.remix-it.com/components/calendar - Files: calendar.blade.php - Composer: mallardduck/blade-lucide-icons, gehrisandro/tailwind-merge-laravel ## Date Picker A date picker component with a calendar popover. - Category: Forms & Input - Install: `php artisan blatui:add date-picker` - Registry: https://blatui.remix-it.com/r/date-picker.json - Docs: https://blatui.remix-it.com/components/date-picker - Files: date-picker.blade.php - Depends on: calendar - Composer: mallardduck/blade-lucide-icons, gehrisandro/tailwind-merge-laravel - npm: @alpinejs/focus ## Date & Time Picker Pick a date and a time together — single or range — in one popover. - Category: Forms & Input - Install: `php artisan blatui:add datetime-picker` - Registry: https://blatui.remix-it.com/r/datetime-picker.json - Docs: https://blatui.remix-it.com/components/datetime-picker - Files: datetime-picker.blade.php - Depends on: button, calendar, time-field - Composer: mallardduck/blade-lucide-icons, gehrisandro/tailwind-merge-laravel - npm: @alpinejs/focus ## Time Field A time input with native and dropdown variants, 12/24-hour and seconds. - Category: Forms & Input - Install: `php artisan blatui:add time-field` - Registry: https://blatui.remix-it.com/r/time-field.json - Docs: https://blatui.remix-it.com/components/time-field - Files: time-field.blade.php - Depends on: input - Composer: mallardduck/blade-lucide-icons, gehrisandro/tailwind-merge-laravel ## Container A centered, max-width content wrapper with responsive padding and selectable widths. - Category: Layout - Install: `php artisan blatui:add container` - Registry: https://blatui.remix-it.com/r/container.json - Docs: https://blatui.remix-it.com/components/container - Files: container.blade.php - Composer: gehrisandro/tailwind-merge-laravel ## Stack A flexbox layout primitive for vertical or horizontal stacking with gap and alignment. - Category: Layout - Install: `php artisan blatui:add stack` - Registry: https://blatui.remix-it.com/r/stack.json - Docs: https://blatui.remix-it.com/components/stack - Files: stack.blade.php - Composer: gehrisandro/tailwind-merge-laravel ## Card Displays a card with header, content, and footer. - Category: Layout - Install: `php artisan blatui:add card` - Registry: https://blatui.remix-it.com/r/card.json - Docs: https://blatui.remix-it.com/components/card - Files: card.blade.php, card-action.blade.php, card-content.blade.php, card-description.blade.php, card-footer.blade.php, card-header.blade.php, card-title.blade.php - Composer: gehrisandro/tailwind-merge-laravel ## Bento Grid A modern bento grid for arranging cards of varying column and row spans. - Category: Layout - Install: `php artisan blatui:add bento-grid` - Registry: https://blatui.remix-it.com/r/bento-grid.json - Docs: https://blatui.remix-it.com/components/bento-grid - Files: bento-grid.blade.php - Composer: gehrisandro/tailwind-merge-laravel ## Page Header A page title block with a description and optional breadcrumb and action slots. - Category: Layout - Install: `php artisan blatui:add page-header` - Registry: https://blatui.remix-it.com/r/page-header.json - Docs: https://blatui.remix-it.com/components/page-header - Files: page-header.blade.php - Composer: gehrisandro/tailwind-merge-laravel ## Aspect Ratio Displays content within a desired ratio. - Category: Layout - Install: `php artisan blatui:add aspect-ratio` - Registry: https://blatui.remix-it.com/r/aspect-ratio.json - Docs: https://blatui.remix-it.com/components/aspect-ratio - Files: aspect-ratio.blade.php - Composer: gehrisandro/tailwind-merge-laravel ## Separator Visually or semantically separates content. - Category: Layout - Install: `php artisan blatui:add separator` - Registry: https://blatui.remix-it.com/r/separator.json - Docs: https://blatui.remix-it.com/components/separator - Files: separator.blade.php - Composer: gehrisandro/tailwind-merge-laravel ## Scroll Area Augments native scroll functionality for custom, cross-browser styling. - Category: Layout - Install: `php artisan blatui:add scroll-area` - Registry: https://blatui.remix-it.com/r/scroll-area.json - Docs: https://blatui.remix-it.com/components/scroll-area - Files: scroll-area.blade.php - Composer: gehrisandro/tailwind-merge-laravel ## Resizable Accessible resizable panel groups and layouts. - Category: Layout - Install: `php artisan blatui:add resizable` - Registry: https://blatui.remix-it.com/r/resizable.json - Docs: https://blatui.remix-it.com/components/resizable - Files: resizable-handle.blade.php, resizable-panel.blade.php, resizable-panel-group.blade.php - Composer: mallardduck/blade-lucide-icons, gehrisandro/tailwind-merge-laravel ## Sidebar A composable, themeable and customizable sidebar component. - Category: Layout - Install: `php artisan blatui:add sidebar` - Registry: https://blatui.remix-it.com/r/sidebar.json - Docs: https://blatui.remix-it.com/components/sidebar - Files: sidebar.blade.php, sidebar-content.blade.php, sidebar-footer.blade.php, sidebar-group.blade.php, sidebar-group-content.blade.php, sidebar-group-label.blade.php, sidebar-header.blade.php, sidebar-input.blade.php, sidebar-inset.blade.php, sidebar-menu.blade.php, sidebar-menu-action.blade.php, sidebar-menu-badge.blade.php, sidebar-menu-button.blade.php, sidebar-menu-item.blade.php, sidebar-menu-sub.blade.php, sidebar-menu-sub-button.blade.php, sidebar-menu-sub-item.blade.php, sidebar-provider.blade.php, sidebar-rail.blade.php, sidebar-separator.blade.php, sidebar-trigger.blade.php - Depends on: collapsible, tooltip - Composer: mallardduck/blade-lucide-icons, gehrisandro/tailwind-merge-laravel - npm: @alpinejs/focus ## Accent Recolors any subtree of BlatUI components from a single accent colour — no per-component props. - Category: Layout - Install: `php artisan blatui:add accent` - Registry: https://blatui.remix-it.com/r/accent.json - Docs: https://blatui.remix-it.com/components/accent - Files: accent.blade.php - Composer: gehrisandro/tailwind-merge-laravel ## Visually Hidden Hide content visually while keeping it available to screen readers, with an optional skip-link mode. - Category: Layout - Install: `php artisan blatui:add visually-hidden` - Registry: https://blatui.remix-it.com/r/visually-hidden.json - Docs: https://blatui.remix-it.com/components/visually-hidden - Files: visually-hidden.blade.php - Composer: gehrisandro/tailwind-merge-laravel - npm: @alpinejs/focus ## Avatar An image element with a fallback for representing the user. - Category: Data Display - Install: `php artisan blatui:add avatar` - Registry: https://blatui.remix-it.com/r/avatar.json - Docs: https://blatui.remix-it.com/components/avatar - Files: avatar.blade.php, avatar-fallback.blade.php, avatar-group.blade.php, avatar-image.blade.php - Composer: gehrisandro/tailwind-merge-laravel ## Presence An online / away / busy / offline status dot, optionally pinned to an avatar. - Category: Data Display - Install: `php artisan blatui:add presence` - Registry: https://blatui.remix-it.com/r/presence.json - Docs: https://blatui.remix-it.com/components/presence - Files: presence.blade.php - Composer: gehrisandro/tailwind-merge-laravel ## Badge Displays a badge, with semantic status tones (success, warning, danger, info, neutral). - Category: Data Display - Install: `php artisan blatui:add badge` - Registry: https://blatui.remix-it.com/r/badge.json - Docs: https://blatui.remix-it.com/components/badge - Files: badge.blade.php - Composer: gehrisandro/tailwind-merge-laravel ## Table A responsive table component. - Category: Data Display - Install: `php artisan blatui:add table` - Registry: https://blatui.remix-it.com/r/table.json - Docs: https://blatui.remix-it.com/components/table - Files: table.blade.php, table-body.blade.php, table-caption.blade.php, table-cell.blade.php, table-footer.blade.php, table-head.blade.php, table-header.blade.php, table-row.blade.php - Composer: gehrisandro/tailwind-merge-laravel ## Comparison Table A data-driven feature comparison table — tiers × features with checks, dashes and values. - Category: Data Display - Install: `php artisan blatui:add comparison-table` - Registry: https://blatui.remix-it.com/r/comparison-table.json - Docs: https://blatui.remix-it.com/components/comparison-table - Files: comparison-table.blade.php - Composer: mallardduck/blade-lucide-icons, gehrisandro/tailwind-merge-laravel ## Data Table An interactive table with search, sortable columns, row selection and pagination. - Category: Data Display - Install: `php artisan blatui:add data-table` - Registry: https://blatui.remix-it.com/r/data-table.json - Docs: https://blatui.remix-it.com/components/data-table - Files: data-table.blade.php - Depends on: button, input - Composer: mallardduck/blade-lucide-icons, gehrisandro/tailwind-merge-laravel ## Server Table A server-rendered, Livewire-first data table with declarative row actions, server sorting, search, selection and pagination. - Category: Data Display - Install: `php artisan blatui:add server-table` - Registry: https://blatui.remix-it.com/r/server-table.json - Docs: https://blatui.remix-it.com/components/server-table - Files: server-table.blade.php - Depends on: button, dropdown-menu, input, select - Composer: mallardduck/blade-lucide-icons, gehrisandro/tailwind-merge-laravel ## Tree Table A table whose rows expand to reveal nested child rows. - Category: Data Display - Install: `php artisan blatui:add tree-table` - Registry: https://blatui.remix-it.com/r/tree-table.json - Docs: https://blatui.remix-it.com/components/tree-table - Files: tree-table.blade.php - Depends on: button, tree-table-row - Composer: mallardduck/blade-lucide-icons, gehrisandro/tailwind-merge-laravel ## Server Tree Table A server-rendered, Livewire-first tree table: nested rows from your query, expand and collapse without a request, row actions, and drag-and-drop or keyboard reordering that persists with one call. - Category: Data Display - Install: `php artisan blatui:add server-tree-table` - Registry: https://blatui.remix-it.com/r/server-tree-table.json - Docs: https://blatui.remix-it.com/components/server-tree-table - Files: server-tree-table.blade.php - Depends on: button, dropdown-menu, input, select - Composer: mallardduck/blade-lucide-icons, gehrisandro/tailwind-merge-laravel ## Description List A semantic key/value list (term/description) — horizontal or vertical, with an optional bordered style. - Category: Data Display - Install: `php artisan blatui:add description-list` - Registry: https://blatui.remix-it.com/r/description-list.json - Docs: https://blatui.remix-it.com/components/description-list - Files: description-list.blade.php - Composer: gehrisandro/tailwind-merge-laravel ## Carousel A carousel with motion and swipe. - Category: Data Display - Install: `php artisan blatui:add carousel` - Registry: https://blatui.remix-it.com/r/carousel.json - Docs: https://blatui.remix-it.com/components/carousel - Files: carousel.blade.php, carousel-content.blade.php, carousel-item.blade.php, carousel-next.blade.php, carousel-previous.blade.php - Composer: mallardduck/blade-lucide-icons, gehrisandro/tailwind-merge-laravel ## Masonry A Pinterest-style masonry grid built on native CSS columns. - Category: Data Display - Install: `php artisan blatui:add masonry` - Registry: https://blatui.remix-it.com/r/masonry.json - Docs: https://blatui.remix-it.com/components/masonry - Files: masonry.blade.php - Composer: gehrisandro/tailwind-merge-laravel ## Comparison Slider A draggable before/after image comparison with a keyboard-operable divider. - Category: Data Display - Install: `php artisan blatui:add comparison-slider` - Registry: https://blatui.remix-it.com/r/comparison-slider.json - Docs: https://blatui.remix-it.com/components/comparison-slider - Files: comparison-slider.blade.php - Composer: mallardduck/blade-lucide-icons, gehrisandro/tailwind-merge-laravel ## Chart Beautiful charts, built using ApexCharts. - Category: Data Display - Install: `php artisan blatui:add chart` - Registry: https://blatui.remix-it.com/r/chart.json - Docs: https://blatui.remix-it.com/components/chart - Files: chart.blade.php, chart-container.blade.php, chart-tooltip-content.blade.php - Composer: gehrisandro/tailwind-merge-laravel - npm: apexcharts ## Sparkline A tiny inline trend line drawn from a data array — for KPI cards, tables and stats. - Category: Data Display - Install: `php artisan blatui:add sparkline` - Registry: https://blatui.remix-it.com/r/sparkline.json - Docs: https://blatui.remix-it.com/components/sparkline - Files: sparkline.blade.php - Composer: gehrisandro/tailwind-merge-laravel ## Stat A KPI metric card with a label, big value, trend arrow with change, optional icon and inline sparkline. - Category: Data Display - Install: `php artisan blatui:add stat` - Registry: https://blatui.remix-it.com/r/stat.json - Docs: https://blatui.remix-it.com/components/stat - Files: stat.blade.php - Depends on: sparkline - Composer: mallardduck/blade-lucide-icons, gehrisandro/tailwind-merge-laravel ## Meter A labelled measurement bar for a value within a range (usage, score, capacity), with status tones. - Category: Data Display - Install: `php artisan blatui:add meter` - Registry: https://blatui.remix-it.com/r/meter.json - Docs: https://blatui.remix-it.com/components/meter - Files: meter.blade.php - Composer: gehrisandro/tailwind-merge-laravel ## Heatmap A GitHub-style contributions heatmap of colour-graded daily counts. - Category: Data Display - Install: `php artisan blatui:add heatmap` - Registry: https://blatui.remix-it.com/r/heatmap.json - Docs: https://blatui.remix-it.com/components/heatmap - Files: heatmap.blade.php - Composer: gehrisandro/tailwind-merge-laravel ## Gantt A project timeline (Gantt) chart with task bars positioned by date and progress. - Category: Data Display - Install: `php artisan blatui:add gantt` - Registry: https://blatui.remix-it.com/r/gantt.json - Docs: https://blatui.remix-it.com/components/gantt - Files: gantt.blade.php - Composer: gehrisandro/tailwind-merge-laravel ## Scheduler A week / day agenda that positions events in time slots. - Category: Data Display - Install: `php artisan blatui:add scheduler` - Registry: https://blatui.remix-it.com/r/scheduler.json - Docs: https://blatui.remix-it.com/components/scheduler - Files: scheduler.blade.php - Composer: gehrisandro/tailwind-merge-laravel ## Org Chart A top-down organisational chart with connector lines, rendered from a tree. - Category: Data Display - Install: `php artisan blatui:add org-chart` - Registry: https://blatui.remix-it.com/r/org-chart.json - Docs: https://blatui.remix-it.com/components/org-chart - Files: org-chart.blade.php - Depends on: org-chart-node - Composer: gehrisandro/tailwind-merge-laravel ## Icon A thin wrapper over Lucide icons that auto-mirrors directional arrows under RTL. - Category: Data Display - Install: `php artisan blatui:add icon` - Registry: https://blatui.remix-it.com/r/icon.json - Docs: https://blatui.remix-it.com/components/icon - Files: icon.blade.php - Composer: mallardduck/blade-lucide-icons ## Item A flexible component for displaying content with media, title, and actions. - Category: Data Display - Install: `php artisan blatui:add item` - Registry: https://blatui.remix-it.com/r/item.json - Docs: https://blatui.remix-it.com/components/item - Files: item.blade.php, item-actions.blade.php, item-content.blade.php, item-description.blade.php, item-group.blade.php, item-media.blade.php, item-separator.blade.php, item-title.blade.php - Composer: gehrisandro/tailwind-merge-laravel ## Kbd Used to display textual user input from the keyboard. - Category: Data Display - Install: `php artisan blatui:add kbd` - Registry: https://blatui.remix-it.com/r/kbd.json - Docs: https://blatui.remix-it.com/components/kbd - Files: kbd.blade.php, kbd-group.blade.php - Composer: gehrisandro/tailwind-merge-laravel ## Marquee A seamless, infinite scroll of its content — logos, testimonials, badges. - Category: Data Display - Install: `php artisan blatui:add marquee` - Registry: https://blatui.remix-it.com/r/marquee.json - Docs: https://blatui.remix-it.com/components/marquee - Files: marquee.blade.php - Composer: gehrisandro/tailwind-merge-laravel ## Typewriter Types and deletes a cycling list of words — for hero headlines and taglines. - Category: Data Display - Install: `php artisan blatui:add typewriter` - Registry: https://blatui.remix-it.com/r/typewriter.json - Docs: https://blatui.remix-it.com/components/typewriter - Files: typewriter.blade.php - Composer: gehrisandro/tailwind-merge-laravel ## Text Reveal Brightens its words one by one as the element scrolls up through the viewport. - Category: Data Display - Install: `php artisan blatui:add text-reveal` - Registry: https://blatui.remix-it.com/r/text-reveal.json - Docs: https://blatui.remix-it.com/components/text-reveal - Files: text-reveal.blade.php - Composer: gehrisandro/tailwind-merge-laravel ## Quote A styled blockquote / testimonial with optional author, role and avatar. - Category: Data Display - Install: `php artisan blatui:add quote` - Registry: https://blatui.remix-it.com/r/quote.json - Docs: https://blatui.remix-it.com/components/quote - Files: quote.blade.php - Composer: gehrisandro/tailwind-merge-laravel ## Progress Displays an indicator showing the completion progress of a task — a linear bar or a circular ring. - Category: Data Display - Install: `php artisan blatui:add progress` - Registry: https://blatui.remix-it.com/r/progress.json - Docs: https://blatui.remix-it.com/components/progress - Files: progress.blade.php - Composer: gehrisandro/tailwind-merge-laravel ## Countdown A live countdown to a target date — days, hours, minutes and seconds, with an expired state. - Category: Data Display - Install: `php artisan blatui:add countdown` - Registry: https://blatui.remix-it.com/r/countdown.json - Docs: https://blatui.remix-it.com/components/countdown - Files: countdown.blade.php - Composer: gehrisandro/tailwind-merge-laravel ## Timeline A vertical timeline of events, with dots, connecting lines, icons and timestamps. - Category: Data Display - Install: `php artisan blatui:add timeline` - Registry: https://blatui.remix-it.com/r/timeline.json - Docs: https://blatui.remix-it.com/components/timeline - Files: timeline.blade.php, timeline-item.blade.php - Composer: mallardduck/blade-lucide-icons, gehrisandro/tailwind-merge-laravel ## Kanban A drag-and-drop board of columns whose cards can be moved between them. - Category: Data Display - Install: `php artisan blatui:add kanban` - Registry: https://blatui.remix-it.com/r/kanban.json - Docs: https://blatui.remix-it.com/components/kanban - Files: kanban.blade.php - Composer: gehrisandro/tailwind-merge-laravel ## Tree A collapsible, keyboard-navigable hierarchical tree view with folder and file icons. - Category: Data Display - Install: `php artisan blatui:add tree` - Registry: https://blatui.remix-it.com/r/tree.json - Docs: https://blatui.remix-it.com/components/tree - Files: tree.blade.php - Depends on: tree-node - Composer: gehrisandro/tailwind-merge-laravel ## JSON Viewer A collapsible, syntax-highlighted JSON tree with per-node expand/collapse and copy. - Category: Data Display - Install: `php artisan blatui:add json-viewer` - Registry: https://blatui.remix-it.com/r/json-viewer.json - Docs: https://blatui.remix-it.com/components/json-viewer - Files: json-viewer.blade.php - Depends on: json-viewer-node - Composer: mallardduck/blade-lucide-icons, gehrisandro/tailwind-merge-laravel ## Diff Viewer A line-based text diff with inline or side-by-side views and add/remove tinting. - Category: Data Display - Install: `php artisan blatui:add diff-viewer` - Registry: https://blatui.remix-it.com/r/diff-viewer.json - Docs: https://blatui.remix-it.com/components/diff-viewer - Files: diff-viewer.blade.php - Composer: mallardduck/blade-lucide-icons, gehrisandro/tailwind-merge-laravel ## Skeleton Use to show a placeholder while content is loading. - Category: Data Display - Install: `php artisan blatui:add skeleton` - Registry: https://blatui.remix-it.com/r/skeleton.json - Docs: https://blatui.remix-it.com/components/skeleton - Files: skeleton.blade.php - Composer: gehrisandro/tailwind-merge-laravel ## Code Block A dark code panel with an optional filename header and a copy button. - Category: Data Display - Install: `php artisan blatui:add code-block` - Registry: https://blatui.remix-it.com/r/code-block.json - Docs: https://blatui.remix-it.com/components/code-block - Files: code-block.blade.php - Composer: mallardduck/blade-lucide-icons, gehrisandro/tailwind-merge-laravel ## Typography Prose text styles — headings, lead, blockquote, lists, inline code and more, via a single variant prop. - Category: Data Display - Install: `php artisan blatui:add typography` - Registry: https://blatui.remix-it.com/r/typography.json - Docs: https://blatui.remix-it.com/components/typography - Files: typography.blade.php - Composer: gehrisandro/tailwind-merge-laravel ## Chat A composable chat transcript — role-aware message bubbles with avatars, names, timestamps and a typing indicator. - Category: AI - Install: `php artisan blatui:add chat` - Registry: https://blatui.remix-it.com/r/chat.json - Docs: https://blatui.remix-it.com/components/chat - Files: chat.blade.php - Depends on: chat-message - Composer: gehrisandro/tailwind-merge-laravel ## Prompt Input An AI chat composer with an auto-growing textarea, attach and send buttons, and ⌘↵ to send. - Category: AI - Install: `php artisan blatui:add prompt-input` - Registry: https://blatui.remix-it.com/r/prompt-input.json - Docs: https://blatui.remix-it.com/components/prompt-input - Files: prompt-input.blade.php - Composer: mallardduck/blade-lucide-icons, gehrisandro/tailwind-merge-laravel ## Streaming Text Reveals a passage token-by-token, LLM-style, with a blinking caret that stops when complete. - Category: AI - Install: `php artisan blatui:add streaming-text` - Registry: https://blatui.remix-it.com/r/streaming-text.json - Docs: https://blatui.remix-it.com/components/streaming-text - Files: streaming-text.blade.php - Composer: gehrisandro/tailwind-merge-laravel ## Reasoning A collapsible AI reasoning / "thinking" block that reveals the chain-of-thought behind an answer. - Category: AI - Install: `php artisan blatui:add reasoning` - Registry: https://blatui.remix-it.com/r/reasoning.json - Docs: https://blatui.remix-it.com/components/reasoning - Files: reasoning.blade.php - Composer: mallardduck/blade-lucide-icons, gehrisandro/tailwind-merge-laravel - npm: @alpinejs/collapse ## Tool Call A card showing an AI tool invocation — name, status, and collapsible JSON arguments and result. - Category: AI - Install: `php artisan blatui:add tool-call` - Registry: https://blatui.remix-it.com/r/tool-call.json - Docs: https://blatui.remix-it.com/components/tool-call - Files: tool-call.blade.php - Composer: mallardduck/blade-lucide-icons, gehrisandro/tailwind-merge-laravel - npm: @alpinejs/collapse ## Citation An inline, LLM-style source reference that reveals the source title, link and snippet in a popover. - Category: AI - Install: `php artisan blatui:add citation` - Registry: https://blatui.remix-it.com/r/citation.json - Docs: https://blatui.remix-it.com/components/citation - Files: citation.blade.php - Depends on: link - Composer: mallardduck/blade-lucide-icons, gehrisandro/tailwind-merge-laravel ## Terminal A terminal / console window with traffic-light controls — for command output and code demos. - Category: AI - Install: `php artisan blatui:add terminal` - Registry: https://blatui.remix-it.com/r/terminal.json - Docs: https://blatui.remix-it.com/components/terminal - Files: terminal.blade.php - Composer: gehrisandro/tailwind-merge-laravel ## Alert Displays a callout for user attention, with semantic status tones. - Category: Feedback - Install: `php artisan blatui:add alert` - Registry: https://blatui.remix-it.com/r/alert.json - Docs: https://blatui.remix-it.com/components/alert - Files: alert.blade.php, alert-action.blade.php, alert-description.blade.php, alert-title.blade.php - Composer: gehrisandro/tailwind-merge-laravel ## Banner A full-width, dismissible announcement bar with semantic tones. - Category: Feedback - Install: `php artisan blatui:add banner` - Registry: https://blatui.remix-it.com/r/banner.json - Docs: https://blatui.remix-it.com/components/banner - Files: banner.blade.php - Composer: mallardduck/blade-lucide-icons, gehrisandro/tailwind-merge-laravel ## Empty An empty state for when there is no data to display. - Category: Feedback - Install: `php artisan blatui:add empty` - Registry: https://blatui.remix-it.com/r/empty.json - Docs: https://blatui.remix-it.com/components/empty - Files: empty.blade.php, empty-content.blade.php, empty-description.blade.php, empty-header.blade.php, empty-media.blade.php, empty-title.blade.php - Composer: gehrisandro/tailwind-merge-laravel ## Spinner An animated loading indicator. - Category: Feedback - Install: `php artisan blatui:add spinner` - Registry: https://blatui.remix-it.com/r/spinner.json - Docs: https://blatui.remix-it.com/components/spinner - Files: spinner.blade.php - Composer: mallardduck/blade-lucide-icons, gehrisandro/tailwind-merge-laravel ## Loading Overlay A veil with a spinner shown over its content while busy. - Category: Feedback - Install: `php artisan blatui:add loading-overlay` - Registry: https://blatui.remix-it.com/r/loading-overlay.json - Docs: https://blatui.remix-it.com/components/loading-overlay - Files: loading-overlay.blade.php - Composer: gehrisandro/tailwind-merge-laravel ## Top Progress An NProgress-style top loading bar with start / set / done controls for navigation. - Category: Feedback - Install: `php artisan blatui:add top-progress` - Registry: https://blatui.remix-it.com/r/top-progress.json - Docs: https://blatui.remix-it.com/components/top-progress - Files: top-progress.blade.php - Composer: gehrisandro/tailwind-merge-laravel ## Sonner An opinionated toast notification component. Includes a sonner-flash bridge that turns Laravel session flashes into toasts. - Category: Feedback - Install: `php artisan blatui:add sonner` - Registry: https://blatui.remix-it.com/r/sonner.json - Docs: https://blatui.remix-it.com/components/sonner - Files: sonner.blade.php, sonner-flash.blade.php - Composer: mallardduck/blade-lucide-icons, gehrisandro/tailwind-merge-laravel ## Tooltip A popup that displays information related to an element when hovered or focused. - Category: Feedback - Install: `php artisan blatui:add tooltip` - Registry: https://blatui.remix-it.com/r/tooltip.json - Docs: https://blatui.remix-it.com/components/tooltip - Files: tooltip.blade.php, tooltip-content.blade.php, tooltip-trigger.blade.php - Composer: gehrisandro/tailwind-merge-laravel ## Hover Card For sighted users to preview content available behind a link. - Category: Feedback - Install: `php artisan blatui:add hover-card` - Registry: https://blatui.remix-it.com/r/hover-card.json - Docs: https://blatui.remix-it.com/components/hover-card - Files: hover-card.blade.php, hover-card-content.blade.php, hover-card-trigger.blade.php - Composer: gehrisandro/tailwind-merge-laravel ## Cookie Consent A GDPR cookie banner with accept / reject / customize, persisted to localStorage. - Category: Feedback - Install: `php artisan blatui:add cookie-consent` - Registry: https://blatui.remix-it.com/r/cookie-consent.json - Docs: https://blatui.remix-it.com/components/cookie-consent - Files: cookie-consent.blade.php - Composer: mallardduck/blade-lucide-icons, gehrisandro/tailwind-merge-laravel ## Dialog A window overlaid on the primary window, rendering the content underneath inert. - Category: Overlays - Install: `php artisan blatui:add dialog` - Registry: https://blatui.remix-it.com/r/dialog.json - Docs: https://blatui.remix-it.com/components/dialog - Files: dialog.blade.php, dialog-close.blade.php, dialog-content.blade.php, dialog-description.blade.php, dialog-footer.blade.php, dialog-header.blade.php, dialog-title.blade.php, dialog-trigger.blade.php - Composer: mallardduck/blade-lucide-icons, gehrisandro/tailwind-merge-laravel - npm: @alpinejs/focus ## Alert Dialog A modal dialog that interrupts the user with important content and expects a response. - Category: Overlays - Install: `php artisan blatui:add alert-dialog` - Registry: https://blatui.remix-it.com/r/alert-dialog.json - Docs: https://blatui.remix-it.com/components/alert-dialog - Files: alert-dialog.blade.php, alert-dialog-action.blade.php, alert-dialog-cancel.blade.php, alert-dialog-content.blade.php, alert-dialog-description.blade.php, alert-dialog-footer.blade.php, alert-dialog-header.blade.php, alert-dialog-title.blade.php, alert-dialog-trigger.blade.php - Composer: gehrisandro/tailwind-merge-laravel - npm: @alpinejs/focus ## Sheet Extends the dialog to display content that complements the main content of the screen. - Category: Overlays - Install: `php artisan blatui:add sheet` - Registry: https://blatui.remix-it.com/r/sheet.json - Docs: https://blatui.remix-it.com/components/sheet - Files: sheet.blade.php, sheet-content.blade.php, sheet-description.blade.php, sheet-footer.blade.php, sheet-header.blade.php, sheet-title.blade.php, sheet-trigger.blade.php - Composer: mallardduck/blade-lucide-icons, gehrisandro/tailwind-merge-laravel - npm: @alpinejs/focus ## Drawer A drawer component that slides in from the edge of the screen. - Category: Overlays - Install: `php artisan blatui:add drawer` - Registry: https://blatui.remix-it.com/r/drawer.json - Docs: https://blatui.remix-it.com/components/drawer - Files: drawer.blade.php, drawer-close.blade.php, drawer-content.blade.php, drawer-description.blade.php, drawer-footer.blade.php, drawer-header.blade.php, drawer-title.blade.php, drawer-trigger.blade.php - Composer: gehrisandro/tailwind-merge-laravel - npm: @alpinejs/focus ## Popover Displays rich content in a portal, triggered by a button. - Category: Overlays - Install: `php artisan blatui:add popover` - Registry: https://blatui.remix-it.com/r/popover.json - Docs: https://blatui.remix-it.com/components/popover - Files: popover.blade.php, popover-content.blade.php, popover-trigger.blade.php - Composer: gehrisandro/tailwind-merge-laravel - npm: @alpinejs/focus ## Dropdown Menu Displays a menu of actions or functions, triggered by a button. - Category: Overlays - Install: `php artisan blatui:add dropdown-menu` - Registry: https://blatui.remix-it.com/r/dropdown-menu.json - Docs: https://blatui.remix-it.com/components/dropdown-menu - Files: dropdown-menu.blade.php, dropdown-menu-checkbox-item.blade.php, dropdown-menu-content.blade.php, dropdown-menu-group.blade.php, dropdown-menu-item.blade.php, dropdown-menu-label.blade.php, dropdown-menu-radio-group.blade.php, dropdown-menu-radio-item.blade.php, dropdown-menu-separator.blade.php, dropdown-menu-shortcut.blade.php, dropdown-menu-sub.blade.php, dropdown-menu-sub-content.blade.php, dropdown-menu-sub-trigger.blade.php, dropdown-menu-trigger.blade.php - Depends on: menu-checkbox-item, menu-group, menu-item, menu-label, menu-radio-item, menu-separator, menu-shortcut - Composer: mallardduck/blade-lucide-icons, gehrisandro/tailwind-merge-laravel - npm: @alpinejs/focus ## Context Menu Displays a menu located at the pointer, triggered by a right click. - Category: Overlays - Install: `php artisan blatui:add context-menu` - Registry: https://blatui.remix-it.com/r/context-menu.json - Docs: https://blatui.remix-it.com/components/context-menu - Files: context-menu.blade.php, context-menu-checkbox-item.blade.php, context-menu-content.blade.php, context-menu-group.blade.php, context-menu-item.blade.php, context-menu-label.blade.php, context-menu-radio-group.blade.php, context-menu-radio-item.blade.php, context-menu-separator.blade.php, context-menu-shortcut.blade.php, context-menu-sub.blade.php, context-menu-sub-content.blade.php, context-menu-sub-trigger.blade.php, context-menu-trigger.blade.php - Depends on: menu-checkbox-item, menu-group, menu-item, menu-label, menu-radio-item, menu-separator, menu-shortcut - Composer: mallardduck/blade-lucide-icons, gehrisandro/tailwind-merge-laravel - npm: @alpinejs/focus ## Menubar A visually persistent menu common in desktop applications. - Category: Overlays - Install: `php artisan blatui:add menubar` - Registry: https://blatui.remix-it.com/r/menubar.json - Docs: https://blatui.remix-it.com/components/menubar - Files: menubar.blade.php, menubar-checkbox-item.blade.php, menubar-content.blade.php, menubar-group.blade.php, menubar-item.blade.php, menubar-label.blade.php, menubar-menu.blade.php, menubar-radio-group.blade.php, menubar-radio-item.blade.php, menubar-separator.blade.php, menubar-shortcut.blade.php, menubar-sub.blade.php, menubar-sub-content.blade.php, menubar-sub-trigger.blade.php, menubar-trigger.blade.php - Depends on: menu-checkbox-item, menu-group, menu-item, menu-label, menu-radio-item, menu-separator, menu-shortcut - Composer: mallardduck/blade-lucide-icons, gehrisandro/tailwind-merge-laravel - npm: @alpinejs/focus ## Command Fast, composable, command menu for your app. - Category: Overlays - Install: `php artisan blatui:add command` - Registry: https://blatui.remix-it.com/r/command.json - Docs: https://blatui.remix-it.com/components/command - Files: command.blade.php, command-empty.blade.php, command-group.blade.php, command-input.blade.php, command-item.blade.php, command-list.blade.php, command-separator.blade.php, command-shortcut.blade.php - Composer: mallardduck/blade-lucide-icons, gehrisandro/tailwind-merge-laravel ## Command Dialog A command menu rendered inside a dialog. - Category: Overlays - Install: `php artisan blatui:add command-dialog` - Registry: https://blatui.remix-it.com/r/command-dialog.json - Docs: https://blatui.remix-it.com/components/command-dialog - Files: command-dialog.blade.php - npm: @alpinejs/focus ## Notification Center A bell with an unread-count badge that opens an inbox of notifications. - Category: Overlays - Install: `php artisan blatui:add notification-center` - Registry: https://blatui.remix-it.com/r/notification-center.json - Docs: https://blatui.remix-it.com/components/notification-center - Files: notification-center.blade.php - Composer: mallardduck/blade-lucide-icons, gehrisandro/tailwind-merge-laravel - npm: @alpinejs/focus ## Onboarding Tour A guided product tour that spotlights elements step by step. - Category: Overlays - Install: `php artisan blatui:add onboarding-tour` - Registry: https://blatui.remix-it.com/r/onboarding-tour.json - Docs: https://blatui.remix-it.com/components/onboarding-tour - Files: onboarding-tour.blade.php - Composer: gehrisandro/tailwind-merge-laravel - npm: @alpinejs/focus ## Breadcrumb Displays the path to the current resource using a hierarchy of links. - Category: Navigation - Install: `php artisan blatui:add breadcrumb` - Registry: https://blatui.remix-it.com/r/breadcrumb.json - Docs: https://blatui.remix-it.com/components/breadcrumb - Files: breadcrumb.blade.php, breadcrumb-ellipsis.blade.php, breadcrumb-item.blade.php, breadcrumb-link.blade.php, breadcrumb-list.blade.php, breadcrumb-page.blade.php, breadcrumb-separator.blade.php - Composer: mallardduck/blade-lucide-icons, gehrisandro/tailwind-merge-laravel ## Link An inline, prose-friendly text link with default, muted and subtle variants. - Category: Navigation - Install: `php artisan blatui:add link` - Registry: https://blatui.remix-it.com/r/link.json - Docs: https://blatui.remix-it.com/components/link - Files: link.blade.php - Composer: gehrisandro/tailwind-merge-laravel ## Tabs A set of layered sections of content displayed one panel at a time. - Category: Navigation - Install: `php artisan blatui:add tabs` - Registry: https://blatui.remix-it.com/r/tabs.json - Docs: https://blatui.remix-it.com/components/tabs - Files: tabs.blade.php, tabs-content.blade.php, tabs-list.blade.php, tabs-trigger.blade.php - Composer: gehrisandro/tailwind-merge-laravel ## Navigation Menu A collection of links for navigating websites. - Category: Navigation - Install: `php artisan blatui:add navigation-menu` - Registry: https://blatui.remix-it.com/r/navigation-menu.json - Docs: https://blatui.remix-it.com/components/navigation-menu - Files: navigation-menu.blade.php, navigation-menu-content.blade.php, navigation-menu-item.blade.php, navigation-menu-link.blade.php, navigation-menu-list.blade.php, navigation-menu-trigger.blade.php - Composer: mallardduck/blade-lucide-icons, gehrisandro/tailwind-merge-laravel ## Pagination Pagination with page navigation, next and previous links. - Category: Navigation - Install: `php artisan blatui:add pagination` - Registry: https://blatui.remix-it.com/r/pagination.json - Docs: https://blatui.remix-it.com/components/pagination - Files: pagination.blade.php, pagination-content.blade.php, pagination-ellipsis.blade.php, pagination-item.blade.php, pagination-link.blade.php, pagination-next.blade.php, pagination-previous.blade.php - Composer: mallardduck/blade-lucide-icons, gehrisandro/tailwind-merge-laravel ## Stepper Guides users through a multi-step flow — horizontal or vertical, with completed-step checks. - Category: Navigation - Install: `php artisan blatui:add stepper` - Registry: https://blatui.remix-it.com/r/stepper.json - Docs: https://blatui.remix-it.com/components/stepper - Files: stepper.blade.php - Composer: gehrisandro/tailwind-merge-laravel ## Scrollspy A table-of-contents nav that highlights the section currently in view. - Category: Navigation - Install: `php artisan blatui:add scrollspy` - Registry: https://blatui.remix-it.com/r/scrollspy.json - Docs: https://blatui.remix-it.com/components/scrollspy - Files: scrollspy.blade.php - Composer: gehrisandro/tailwind-merge-laravel ## Bottom Navigation A mobile bottom tab bar with icons, labels, an active state and badges. - Category: Navigation - Install: `php artisan blatui:add bottom-navigation` - Registry: https://blatui.remix-it.com/r/bottom-navigation.json - Docs: https://blatui.remix-it.com/components/bottom-navigation - Files: bottom-navigation.blade.php - Depends on: bottom-navigation-item - Composer: gehrisandro/tailwind-merge-laravel ## Dock A macOS-style dock whose icons magnify as the cursor passes over them. - Category: Navigation - Install: `php artisan blatui:add dock` - Registry: https://blatui.remix-it.com/r/dock.json - Docs: https://blatui.remix-it.com/components/dock - Files: dock.blade.php - Depends on: dock-item - Composer: gehrisandro/tailwind-merge-laravel ## Speed Dial A floating action button that expands to reveal labelled actions. - Category: Navigation - Install: `php artisan blatui:add speed-dial` - Registry: https://blatui.remix-it.com/r/speed-dial.json - Docs: https://blatui.remix-it.com/components/speed-dial - Files: speed-dial.blade.php - Composer: mallardduck/blade-lucide-icons, gehrisandro/tailwind-merge-laravel ## Back To Top A floating button that appears after scrolling and smoothly returns to the top. - Category: Navigation - Install: `php artisan blatui:add back-to-top` - Registry: https://blatui.remix-it.com/r/back-to-top.json - Docs: https://blatui.remix-it.com/components/back-to-top - Files: back-to-top.blade.php - Composer: mallardduck/blade-lucide-icons, gehrisandro/tailwind-merge-laravel ## Infinite Scroll Loads more content when a sentinel scrolls into view, with a load-more fallback. - Category: Navigation - Install: `php artisan blatui:add infinite-scroll` - Registry: https://blatui.remix-it.com/r/infinite-scroll.json - Docs: https://blatui.remix-it.com/components/infinite-scroll - Files: infinite-scroll.blade.php - Depends on: button, spinner - Composer: gehrisandro/tailwind-merge-laravel ## Accordion A vertically stacked set of interactive headings that each reveal a section of content. - Category: Disclosure - Install: `php artisan blatui:add accordion` - Registry: https://blatui.remix-it.com/r/accordion.json - Docs: https://blatui.remix-it.com/components/accordion - Files: accordion.blade.php, accordion-content.blade.php, accordion-item.blade.php, accordion-trigger.blade.php - Composer: mallardduck/blade-lucide-icons, gehrisandro/tailwind-merge-laravel - npm: @alpinejs/collapse ## Collapsible An interactive component which expands and collapses a panel. - Category: Disclosure - Install: `php artisan blatui:add collapsible` - Registry: https://blatui.remix-it.com/r/collapsible.json - Docs: https://blatui.remix-it.com/components/collapsible - Files: collapsible.blade.php, collapsible-content.blade.php, collapsible-trigger.blade.php - npm: @alpinejs/collapse ## Product Card An e-commerce product card with image, badge, rating, price and an add-to-cart action. - Category: E-commerce - Install: `php artisan blatui:add product-card` - Registry: https://blatui.remix-it.com/r/product-card.json - Docs: https://blatui.remix-it.com/components/product-card - Files: product-card.blade.php - Depends on: badge, button, price, rating - Composer: mallardduck/blade-lucide-icons, gehrisandro/tailwind-merge-laravel ## Price A formatted product price with optional struck-through compare-at and a discount badge. - Category: E-commerce - Install: `php artisan blatui:add price` - Registry: https://blatui.remix-it.com/r/price.json - Docs: https://blatui.remix-it.com/components/price - Files: price.blade.php - Depends on: badge - Composer: gehrisandro/tailwind-merge-laravel ## Variant Selector Choose a product variant — size pills or colour swatches — from an accessible radio group. - Category: E-commerce - Install: `php artisan blatui:add variant-selector` - Registry: https://blatui.remix-it.com/r/variant-selector.json - Docs: https://blatui.remix-it.com/components/variant-selector - Files: variant-selector.blade.php - Composer: mallardduck/blade-lucide-icons, gehrisandro/tailwind-merge-laravel ## Add To Cart A stateful add-to-cart button that animates idle → adding → added. - Category: E-commerce - Install: `php artisan blatui:add add-to-cart` - Registry: https://blatui.remix-it.com/r/add-to-cart.json - Docs: https://blatui.remix-it.com/components/add-to-cart - Files: add-to-cart.blade.php - Depends on: button - Composer: mallardduck/blade-lucide-icons, gehrisandro/tailwind-merge-laravel ## Mini Cart A cart dropdown with line items, quantity steppers, a live subtotal and checkout. - Category: E-commerce - Install: `php artisan blatui:add mini-cart` - Registry: https://blatui.remix-it.com/r/mini-cart.json - Docs: https://blatui.remix-it.com/components/mini-cart - Files: mini-cart.blade.php - Depends on: button - Composer: mallardduck/blade-lucide-icons, gehrisandro/tailwind-merge-laravel - npm: @alpinejs/focus ## Gradient Text Text painted with a gradient fill, with optional animated shimmer and colour presets. - Category: Effects - Install: `php artisan blatui:add gradient-text` - Registry: https://blatui.remix-it.com/r/gradient-text.json - Docs: https://blatui.remix-it.com/components/gradient-text - Files: gradient-text.blade.php - Composer: gehrisandro/tailwind-merge-laravel ## Number Ticker A number that animates counting up to its target when it scrolls into view. - Category: Effects - Install: `php artisan blatui:add number-ticker` - Registry: https://blatui.remix-it.com/r/number-ticker.json - Docs: https://blatui.remix-it.com/components/number-ticker - Files: number-ticker.blade.php - Composer: gehrisandro/tailwind-merge-laravel ## Border Beam A container with a light beam continuously travelling around its border. - Category: Effects - Install: `php artisan blatui:add border-beam` - Registry: https://blatui.remix-it.com/r/border-beam.json - Docs: https://blatui.remix-it.com/components/border-beam - Files: border-beam.blade.php - Composer: gehrisandro/tailwind-merge-laravel ## Spotlight Card A card with a soft radial spotlight that follows the cursor on hover. - Category: Effects - Install: `php artisan blatui:add spotlight-card` - Registry: https://blatui.remix-it.com/r/spotlight-card.json - Docs: https://blatui.remix-it.com/components/spotlight-card - Files: spotlight-card.blade.php - Composer: gehrisandro/tailwind-merge-laravel ## Tilt Card A card that tilts in 3D toward the cursor, with an optional glare highlight. - Category: Effects - Install: `php artisan blatui:add tilt-card` - Registry: https://blatui.remix-it.com/r/tilt-card.json - Docs: https://blatui.remix-it.com/components/tilt-card - Files: tilt-card.blade.php - Composer: gehrisandro/tailwind-merge-laravel ## Flip Card A card that flips on hover or click to reveal a back face. - Category: Effects - Install: `php artisan blatui:add flip-card` - Registry: https://blatui.remix-it.com/r/flip-card.json - Docs: https://blatui.remix-it.com/components/flip-card - Files: flip-card.blade.php - Composer: gehrisandro/tailwind-merge-laravel ## Confetti A celebratory confetti burst fired from a button or any trigger. - Category: Effects - Install: `php artisan blatui:add confetti` - Registry: https://blatui.remix-it.com/r/confetti.json - Docs: https://blatui.remix-it.com/components/confetti - Files: confetti.blade.php - Depends on: button - Composer: gehrisandro/tailwind-merge-laravel ## Meteors Animated falling meteor streaks behind your content. - Category: Effects - Install: `php artisan blatui:add meteors` - Registry: https://blatui.remix-it.com/r/meteors.json - Docs: https://blatui.remix-it.com/components/meteors - Files: meteors.blade.php - Composer: gehrisandro/tailwind-merge-laravel ## Animated Beam An SVG line with a travelling light gradient connecting two elements. - Category: Effects - Install: `php artisan blatui:add animated-beam` - Registry: https://blatui.remix-it.com/r/animated-beam.json - Docs: https://blatui.remix-it.com/components/animated-beam - Files: animated-beam.blade.php - Composer: gehrisandro/tailwind-merge-laravel ## Parallax Translates its content as it scrolls for a depth effect. - Category: Effects - Install: `php artisan blatui:add parallax` - Registry: https://blatui.remix-it.com/r/parallax.json - Docs: https://blatui.remix-it.com/components/parallax - Files: parallax.blade.php - Composer: gehrisandro/tailwind-merge-laravel ## Dot Pattern A decorative dotted-grid background layer with adjustable size, gap and edge fade. - Category: Effects - Install: `php artisan blatui:add dot-pattern` - Registry: https://blatui.remix-it.com/r/dot-pattern.json - Docs: https://blatui.remix-it.com/components/dot-pattern - Files: dot-pattern.blade.php - Composer: gehrisandro/tailwind-merge-laravel ## Grid Pattern A decorative grid / graph-paper background layer with an optional edge fade. - Category: Effects - Install: `php artisan blatui:add grid-pattern` - Registry: https://blatui.remix-it.com/r/grid-pattern.json - Docs: https://blatui.remix-it.com/components/grid-pattern - Files: grid-pattern.blade.php - Composer: gehrisandro/tailwind-merge-laravel ## Aurora An animated northern-lights gradient backdrop with your content overlaid. - Category: Effects - Install: `php artisan blatui:add aurora` - Registry: https://blatui.remix-it.com/r/aurora.json - Docs: https://blatui.remix-it.com/components/aurora - Files: aurora.blade.php - Composer: gehrisandro/tailwind-merge-laravel ## Audio Player A custom audio player — play/pause, seek, time and volume — over a native HTML5 audio element. - Category: Media - Install: `php artisan blatui:add audio-player` - Registry: https://blatui.remix-it.com/r/audio-player.json - Docs: https://blatui.remix-it.com/components/audio-player - Files: audio-player.blade.php - Composer: mallardduck/blade-lucide-icons, gehrisandro/tailwind-merge-laravel ## Video A styled HTML5 video player with a custom poster and play overlay. - Category: Media - Install: `php artisan blatui:add video` - Registry: https://blatui.remix-it.com/r/video.json - Docs: https://blatui.remix-it.com/components/video - Files: video.blade.php - Composer: mallardduck/blade-lucide-icons, gehrisandro/tailwind-merge-laravel ## Image A smart image with a skeleton, blur-up fade-in and a graceful error fallback. - Category: Media - Install: `php artisan blatui:add image` - Registry: https://blatui.remix-it.com/r/image.json - Docs: https://blatui.remix-it.com/components/image - Files: image.blade.php - Composer: mallardduck/blade-lucide-icons, gehrisandro/tailwind-merge-laravel ## Gallery A thumbnail grid that opens a full-screen lightbox with keyboard navigation. - Category: Media - Install: `php artisan blatui:add gallery` - Registry: https://blatui.remix-it.com/r/gallery.json - Docs: https://blatui.remix-it.com/components/gallery - Files: gallery.blade.php - Composer: mallardduck/blade-lucide-icons, gehrisandro/tailwind-merge-laravel - npm: @alpinejs/focus ## QR Code A client-side QR code generator rendered as a crisp, theme-aware SVG — no dependencies. - Category: Media - Install: `php artisan blatui:add qr-code` - Registry: https://blatui.remix-it.com/r/qr-code.json - Docs: https://blatui.remix-it.com/components/qr-code - Files: qr-code.blade.php - Composer: gehrisandro/tailwind-merge-laravel ## Map A keyless OpenStreetMap embed that drops a pin at any latitude / longitude. - Category: Media - Install: `php artisan blatui:add map` - Registry: https://blatui.remix-it.com/r/map.json - Docs: https://blatui.remix-it.com/components/map - Files: map.blade.php - Composer: mallardduck/blade-lucide-icons, gehrisandro/tailwind-merge-laravel