Components

Browse all available BrutxUI components. This catalog is generated from shared metadata so the docs, Registry, and CLI all read from the same component source of truth.

Actions

Component	Description
Button	Interactive button with loading state, icon support, and multiple style variants.
Toggle	Pressable toggle button with active state.
Toggle Group	Group of toggle buttons with single or multiple selection.

Form & Input

Component	Description
Cascader	Cascading selector with multi-level option navigation and search support.
Checkbox	Accessible checkbox with label and indeterminate state support.
Color Picker	Color picker with palette, input, history, and swatches.
Combobox	Searchable dropdown with single and multi-select modes.
Date Picker	Date picker with range selection, time input, and locale-aware formatting.
Form	Form validation and field management powered by vee-validate with wizard support.
Hardcore Input	Input field with audio feedback and visual effects.
Input	Text input field with validation styling.
Label	Form label associated with input controls.
Number Input	Numeric input with increment, decrement, and step controls.
Radio Group	Mutually exclusive radio button group.
Rate	Star rating input with half-star precision and keyboard navigation.
Select	Single-value select dropdown with grouped items.
Slider	Range slider with single or dual thumbs.
Switch	Toggle switch for boolean on/off states.
Tags Input	Input field for adding and removing tag chips.
Textarea	Multi-line text input with validation styling.
Transfer	Dual-panel transfer list for moving items between source and target collections.
Tree Select	Hierarchical tree-based select with multi-select support.
Upload	File upload with drag-and-drop, preview, and progress tracking.

Data Display

Component	Description
Avatar	User avatar with image, fallback initials, and status indicator support.
Calendar	Date calendar with single and range selection powered by v-calendar.
Carousel	Image and content carousel with navigation and autoplay.
Chat Bubble	Chat message bubbles with avatar and timestamp.
Code Block	Syntax-highlighted code display with language selector and copy button.
Counter	Animated number counter with formatting.
Data Table	Full-featured data table with sorting, filtering, pagination, and row selection.
Descriptions	Key-value description list in horizontal or vertical layout.
Image	Image component with lazy loading, fallback image, and Neo-Brutalist interactive preview modal.
Sketchy Chart	Hand-drawn style data visualization chart.
Table	Structured data table with header, body, footer, and caption.
Timeline	Vertical timeline with connected events and content.
Tree View	Hierarchical tree with expandable nodes and selection.

Navigation

Component	Description
Accordion	Collapsible content sections with keyboard navigation.
Backtop	Brutalist back-to-top button with scroll detection and click behavior.
Breadcrumb	Hierarchical navigation breadcrumb with separator and ellipsis.
Menu	Horizontal or vertical navigation menu with sub-menu support.
Pagination	Page navigation with first, previous, next, last controls and locale support.
Stepper	Multi-step wizard with progress indicator.
Tabs	Tabbed interface with content panels and locale support.

Feedback & Status

Component	Description
Alert	Contextual alert banners with variants for info, success, warning, and error states.
Badge	Inline status badges and labels with color variants.
Loading	Container wrapper and v-loading custom directive for displaying loading state overlay with custom text.
Message	Imperative message notification system with singleton container, TransitionGroup stacking, and auto GC.
Progress	Determinate progress bar indicator.
Result	Feedback result display with state color blocks and action buttons.
Skeleton	Loading placeholder skeletons for text, cards, avatars, and tables.
Spinner	Loading spinners with bars, blocks, and dots animation variants.
Toast	Ephemeral notification toasts with auto-dismiss and action support.

Overlay & Popup

Component	Description
Alert Dialog	Confirmation dialog requiring explicit user action before proceeding.
Command	Command palette with keyboard navigation and fuzzy search.
Dialog	Modal dialog with overlay, header, footer, and description.
Dropdown Menu	Dropdown menu with checkbox items, radio items, and sub-menus.
Popconfirm	Confirmation popover with customizable content and actions.
Popover	Floating popover anchored to trigger elements.
Sheet	Side panel overlay sliding from any edge of the viewport.
Tooltip	Contextual tooltip triggered on hover or focus.
Tour	Neo-Brutalist step-by-step interactive onboarding tour component with Canvas mask highlight.

Layout & Structure

Component	Description
Card	Content card container with header, body, footer, and description sections.
Card 3d	Interactive card with 3D tilt effect on mouse movement.
Scroll Area	Custom scrollable container with styled scrollbars.
Separator	Visual divider line between content sections.

Interaction & Visualization

Component	Description
Before After	Side-by-side image comparison with draggable slider.
Glitch Text	Text with glitch animation and distortion effects.
Marquee	Auto-scrolling marquee banner for announcements.
Noise Background	Animated noise texture background overlay.
Scratch Card	Scratch-off reveal card with canvas interaction.
Typewriter Text	Text with typewriter typing animation effect.

Theme & Utilities

Component	Description
Color Mode Switcher	Toggle between light, dark, and system color modes.
Copy To Clipboard	Click-to-copy button with success feedback.
Infinite Scroll	Auto-loading list that fetches more content on scroll.
Kanban	Drag-and-drop kanban board with columns and cards.
Kbd	Keyboard shortcut key display element.
Virtual Scroll	High-performance virtualized list for large datasets.
Watermark	Watermark overlay with Canvas text/image rendering and MutationObserver anti-tampering.