Imagine ArtComponents
60 production-ready React components with CVA variants and semantic tokens.
Actions
Interactive controls for triggering operations and user actions.
Button
Triggers actions like form submission, navigation, or confirmation dialogs.
FAB
A floating action button for the primary, most prominent action on a screen.
Dropdown Menu
A contextual menu triggered by a button, displaying a list of actions or options.
Expressive Button
A gradient CTA button with prominent styling for hero sections and key actions.
Menu Button
A button that opens an attached dropdown menu for selecting from a list of actions.
Theme Toggle
A sun/moon toggle button for switching between light and dark themes with rotation animation.
File Menu
A desktop-style menu bar with multiple dropdown menus, keyboard shortcuts, and separators.
Feedback & Status
Inform users about system state, outcomes, and ongoing processes.
Alert
Displays a prominent message to communicate information, success, warning, or error states.
Snackbar
A brief, auto-dismissing notification that appears at the bottom of the screen.
Badge
A small label that highlights a status, count, or category in a compact form.
Chip
A compact element for tags, filters, or selections that can be toggled or removed.
Progress
A horizontal bar that visually communicates the completion percentage of a task.
Spinner
An animated loading indicator that signals an ongoing background process.
Skeleton
Placeholder shapes that mimic content layout while data is loading.
Banner
A full-width notification bar for announcements, alerts, and system-level messages.
Tag
A compact keyword label for categorizing and filtering content.
Reaction Chip
An emoji reaction pill with count display and active toggle state.
Token Display
A monospace pill for showing API keys, tokens, or hashes with optional copy-to-clipboard.
Forms
Controls for collecting, editing, and validating user input.
Input
A single-line text field for short-form data entry like names, emails, and search queries.
Textarea
A multi-line text field for longer content like descriptions, comments, and messages.
Select
A dropdown control that lets users pick one option from a predefined list.
Combobox
A searchable dropdown that combines a text input with a filterable option list.
Checkbox
A control that allows users to select one or more items from a set of options.
Radio Group
A set of mutually exclusive options where only one can be selected at a time.
Toggle
A switch control for toggling between two states like on/off or enabled/disabled.
Slider
A draggable range control for selecting a numeric value within a defined range.
Upload
A drag-and-drop zone for uploading files with preview and progress states.
Date Picker
A calendar-based control for selecting dates with month navigation and day states.
Drop Zone
A dedicated file drop area with drag-over feedback, file validation, and loading state.
Selection Dropdown
A multi-select dropdown with checkboxes, search filtering, and tag display for selected items.
Rating
A star rating input with half-star support, hover preview, and read-only mode.
Layout & Structure
Structural primitives for organizing and presenting page content.
Card
A container that groups related content and actions with consistent styling and elevation.
Divider
A horizontal or vertical line that separates content into distinct sections.
Scroll Area
A container with custom-styled scrollbars for overflowing content.
Pricing Card
A structured card for displaying subscription tiers with features, pricing, and CTAs.
Footer
A responsive page footer with brand info, navigation links, and social media icons.
List
A structured list with rich items supporting leading icons, descriptions, and trailing actions.
Comment
Displays comment threads with author info, timestamps, and a reply input box.
Accordion
Collapsible content sections with animated expand/collapse and single or multiple open mode.
Navigation
Wayfinding components for moving between views and content sections.
Tabs
Organizes content into switchable panels, allowing users to navigate between related views.
Breadcrumbs
A trail of links showing the user's current position within a page hierarchy.
Pagination
Controls for navigating between pages of content with page numbers and arrows.
Segmented Control
A group of mutually exclusive buttons for switching between related views or filters.
Side Navigation
A collapsible vertical sidebar with nested items, icon-only mode, and badge indicators.
Top Navigation
A horizontal navigation bar with brand slot, nav links, and action buttons.
Stepper
A multi-step progress indicator showing completed, active, and upcoming steps.
Platform Switcher
A dropdown selector for switching between different platforms or products.
Overlays
Layered surfaces for contextual content, confirmations, and focus.
Modal
A dialog overlay that focuses the user's attention on a specific task or confirmation.
Popover
A floating panel that appears next to a trigger element for contextual content.
Tooltip
A small label that appears on hover to describe the purpose of an element.
Bottom Sheet
A mobile-friendly panel that slides up from the bottom of the screen.
Context Menu
A floating menu triggered by right-click with items, shortcuts, and separators.
Error Modal
A specialized modal for displaying error, warning, and confirmation dialogs with icon variants.
Media & Visuals
Components for displaying visual content and media playback.
Avatar
Displays a user's profile image, initials fallback, or a generic user icon.
Video Player
A media player with play/pause, seek, volume controls, and auto-hiding overlay.
Audio Player
An audio playback component with play/pause, progress bar, time display, and volume.
Chart
SVG-based bar and donut chart for data visualization with labels and value displays.
Social Icon
SVG social media icons for 15 platforms with default and filled variants.
Image Skeleton
A shimmer placeholder for images with shape variants and customizable aspect ratio.
Video Skeleton
A shimmer placeholder for video content with a play button and controls bar overlay.