io.github.anousss007/blatui

List every BlatUI component with its title and one-line description. Optionally filter by category.

Search BlatUI components, blocks and charts by name, title or description.

Get a component's full Blade source, dependencies, required packages and install command.

Get the full Blade source of a block or chart, plus the components and packages it needs.

Build the exact `php artisan blatui:add` command plus required composer/npm packages for one or more components.

Recolors any subtree of BlatUI components from a single accent colour — no per-component props.

A vertically stacked set of interactive headings that each reveal a section of content.

A stateful add-to-cart button that animates idle → adding → added.

Displays a callout for user attention, with semantic status tones.

A modal dialog that interrupts the user with important content and expects a response.

An SVG line with a travelling light gradient connecting two elements.

Displays content within a desired ratio.

A custom audio player — play/pause, seek, time and volume — over a native HTML5 audio element.

An animated northern-lights gradient backdrop with your content overlaid.

A text input that filters and suggests options as you type.

A textarea that grows and shrinks to fit its content, with an optional max-rows cap.

An image element with a fallback for representing the user.

A floating button that appears after scrolling and smoothly returns to the top.

Displays a badge, with semantic status tones (success, warning, danger, info, neutral).

A full-width, dismissible announcement bar with semantic tones.

A modern bento grid for arranging cards of varying column and row spans.

A container with a light beam continuously travelling around its border.

A mobile bottom tab bar with icons, labels, an active state and badges.

Displays the path to the current resource using a hierarchy of links.

Displays a button or a component that looks like a button.

Groups related buttons together with consistent styling.

A date field component that allows users to enter and edit dates.

Displays a card with header, content, and footer.

A carousel with motion and swipe.

Beautiful charts, built using ApexCharts.

A composable chat transcript — role-aware message bubbles with avatars, names, timestamps and a typing indicator.

A control that allows the user to toggle between checked and not checked.

An inline, LLM-style source reference that reveals the source title, link and snippet in a popover.

A dark code panel with an optional filename header and a copy button.

An interactive component which expands and collapses a panel.

Accessible colour selection with a hue slider, a validating hex field and a preset swatch palette.

A filterable picker over a list of options — button or inline-input trigger, single or multi-select.

Fast, composable, command menu for your app.

A command menu rendered inside a dialog.

A draggable before/after image comparison with a keyboard-operable divider.

A data-driven feature comparison table — tiers × features with checks, dashes and values.

A celebratory confetti burst fired from a button or any trigger.

A centered, max-width content wrapper with responsive padding and selectable widths.

Displays a menu located at the pointer, triggered by a right click.

A GDPR cookie banner with accept / reject / customize, persisted to localStorage.

A button that copies text to the clipboard, with a copied state and a live announcement.

A live countdown to a target date — days, hours, minutes and seconds, with an expired state.

An interactive table with search, sortable columns, row selection and pagination.

A date picker component with a calendar popover.

Pick a date and a time together — single or range — in one popover.

A semantic key/value list (term/description) — horizontal or vertical, with an optional bordered style.

A window overlaid on the primary window, rendering the content underneath inert.

A line-based text diff with inline or side-by-side views and add/remove tinting.

A macOS-style dock whose icons magnify as the cursor passes over them.

A decorative dotted-grid background layer with adjustable size, gap and edge fade.

A drawer component that slides in from the edge of the screen.

Displays a menu of actions or functions, triggered by a button.

Click-to-edit inline text that swaps the value for an input, saving on Enter or blur.

An empty state for when there is no data to display.

Combine labels, controls, and help text to compose accessible form fields.

A drag-and-drop dropzone with image thumbnails, file sizes and per-file progress bars.

A card that flips on hover or click to reveal a back face.

A thumbnail grid that opens a full-screen lightbox with keyboard navigation.

A project timeline (Gantt) chart with task bars positioned by date and progress.

Text painted with a gradient fill, with optional animated shimmer and colour presets.

A decorative grid / graph-paper background layer with an optional edge fade.

A GitHub-style contributions heatmap of colour-graded daily counts.

For sighted users to preview content available behind a link.

A thin wrapper over Lucide icons that auto-mirrors directional arrows under RTL.

A smart image with a skeleton, blur-up fade-in and a graceful error fallback.

Loads more content when a sentinel scrolls into view, with a load-more fallback.

Displays a form input field or a component that looks like an input field.

Group inputs with text, buttons, icons, and more.

Accessible one-time password component with copy-paste functionality.

A flexible component for displaying content with media, title, and actions.

A collapsible, syntax-highlighted JSON tree with per-node expand/collapse and copy.

A drag-and-drop board of columns whose cards can be moved between them.

Used to display textual user input from the keyboard.

A rotary dial input — drag, scroll or use the keyboard to set a value.

Renders an accessible label associated with controls.

An inline, prose-friendly text link with default, muted and subtle variants.

A veil with a spinner shown over its content while busy.

A keyless OpenStreetMap embed that drops a pin at any latitude / longitude.

A Markdown textarea with a live preview, formatting toolbar and Write/Preview tabs.

A seamless, infinite scroll of its content — logos, testimonials, badges.

A Pinterest-style masonry grid built on native CSS columns.

A textarea that surfaces a suggestion list when you type @ to insert a mention.

A visually persistent menu common in desktop applications.

Animated falling meteor streaks behind your content.

A labelled measurement bar for a value within a range (usage, score, capacity), with status tones.

A cart dropdown with line items, quantity steppers, a live subtotal and checkout.

A collection of links for navigating websites.

A bell with an unread-count badge that opens an inbox of notifications.

A numeric stepper with minus/plus buttons that clamp a value to an optional min, max and step.

A number that animates counting up to its target when it scrolls into view.

A guided product tour that spotlights elements step by step.

A top-down organisational chart with connector lines, rendered from a tree.

A page title block with a description and optional breadcrumb and action slots.

Pagination with page navigation, next and previous links.

Translates its content as it scrolls for a depth effect.

A password field with a live strength meter and an optional requirements checklist.

A phone number field with a searchable country-code selector.

Displays rich content in a portal, triggered by a button.

An online / away / busy / offline status dot, optionally pinned to an avatar.

A formatted product price with optional struck-through compare-at and a discount badge.

An e-commerce product card with image, badge, rating, price and an add-to-cart action.

Displays an indicator showing the completion progress of a task — a linear bar or a circular ring.

An AI chat composer with an auto-growing textarea, attach and send buttons, and ⌘↵ to send.

A client-side QR code generator rendered as a crisp, theme-aware SVG — no dependencies.

A styled blockquote / testimonial with optional author, role and avatar.

A set of checkable buttons where no more than one can be checked at a time.

A star rating input with hover preview, keyboard support and a hidden field for forms.

A collapsible AI reasoning / "thinking" block that reveals the chain-of-thought behind an answer.

Addable / removable field rows (a form field-array) that submit as an array.

Accessible resizable panel groups and layouts.

A lightweight, dependency-free WYSIWYG editor with a formatting toolbar.

A week / day agenda that positions events in time slots.

Augments native scroll functionality for custom, cross-browser styling.

A table-of-contents nav that highlights the section currently in view.

An iOS-style segmented control for picking one option from a small set.

Displays a list of options for the user to pick from, triggered by a button.

Visually or semantically separates content.

A server-rendered, Livewire-first data table with declarative row actions, server sorting, search, selection and pagination.

Extends the dialog to display content that complements the main content of the screen.

A composable, themeable and customizable sidebar component.

Draw a signature on a canvas and capture it as a data URL, with clear and undo.

Use to show a placeholder while content is loading.

An input where the user selects a value — single, or a two-handle min–max range.

An opinionated toast notification component. Includes a sonner-flash bridge that turns Laravel session flashes into toasts.

A tiny inline trend line drawn from a data array — for KPI cards, tables and stats.

A floating action button that expands to reveal labelled actions.

An animated loading indicator.

A card with a soft radial spotlight that follows the cursor on hover.

A flexbox layout primitive for vertical or horizontal stacking with gap and alignment.

A KPI metric card with a label, big value, trend arrow with change, optional icon and inline sparkline.

Guides users through a multi-step flow — horizontal or vertical, with completed-step checks.

Reveals a passage token-by-token, LLM-style, with a blinking caret that stops when complete.

A control that allows the user to toggle between an on and off state.

A responsive table component.

A set of layered sections of content displayed one panel at a time.

A tag entry field — type and press Enter or comma to add removable chips, with form-array submission.

A terminal / console window with traffic-light controls — for command output and code demos.

Brightens its words one by one as the element scrolls up through the viewport.

A form textarea that auto-grows to fit its content, with optional rows and a max-rows cap.

A card that tilts in 3D toward the cursor, with an optional glare highlight.

A time input with native and dropdown variants, 12/24-hour and seconds.

A vertical timeline of events, with dots, connecting lines, icons and timestamps.

A two-state button that can be either on or off.

A set of two-state buttons that can be toggled on or off.

A card showing an AI tool invocation — name, status, and collapsible JSON arguments and result.

A popup that displays information related to an element when hovered or focused.

An NProgress-style top loading bar with start / set / done controls for navigation.

A collapsible, keyboard-navigable hierarchical tree view with folder and file icons.

A table whose rows expand to reveal nested child rows.

Types and deletes a cycling list of words — for hero headlines and taglines.

Prose text styles — headings, lead, blockquote, lists, inline code and more, via a single variant prop.

Choose a product variant — size pills or colour swatches — from an accessible radio group.

A styled HTML5 video player with a custom poster and play overlay.

Hide content visually while keeping it available to screen readers, with an optional skip-link mode.

Insert a BlatUI component with its source and install command.

Scaffold a full page from BlatUI blocks (dashboard, login, signup, marketing, pricing).