Component Library
33 production-grade, accessible, animated components. Copy the code, customize with tokens.
A versatile button component with multiple variants, sizes, and a loading state. Built with CVA for variant management and Framer Motion for micro-interactions.
Compact label component for status indicators, tags, and counts. Supports a pulsing "live" animation variant.
User representation with image support, fallback to initials, and optional status indicator dot.
Text input with label, helper text, error state, and optional icon adornments. Animated focus ring.
Accessible checkbox control with visible label, optional helper text, disabled state, and token-based focus styling.
Native select field styled with GridNest tokens, label support, helper text, disabled state, and error feedback.
Inline status message for confirmations, warnings, errors, and neutral information.
Full-featured modal with backdrop blur, scale + fade entrance animation, and focus trap via Radix Dialog portal.
Slide-in notification from bottom-right with auto-dismiss, progress bar, and success/error/warning variants.
Container component with default, elevated, bordered, and interactive hover variants.
Tab navigation with an animated underline indicator, full keyboard navigation, and an optional vertical layout.
Expand/collapse sections with spring-based animation. Supports single and multiple open items.
Radix-powered dropdown menu with animated open/close, keyboard navigation, and sub-menu support.
Spring-physics animated switch with accessible label and multiple sizes.
Shimmer animation placeholder for loading states. Composable with text, circle, and rectangle variants.
Animated progress bar supporting determinate and indeterminate modes with color variants.
Multi-line text field with label, helper text, disabled state, and error styling.
Accessible radio option group with descriptions, disabled options, and controlled or uncontrolled state.
Compact numeric control with increment/decrement buttons and min/max clamping.
Hierarchical navigation trail with current-page semantics and compact separators.
Page navigation control with previous/next buttons, active page state, and current-page semantics.
Horizontal or vertical separator with optional centered label for section breaks.
Composed empty-content panel with icon, title, description, and optional action slot.
Keyboard shortcut token for command hints, menus, and documentation.
Accessible loading indicator with size variants and screen-reader label.
Compact metric card with label, value, change text, and trend tone.
Responsive data table with typed columns, alignment controls, sticky styling foundations, and token-based borders.
Vertical event timeline for activity feeds, release histories, and audit trails.
Stacked avatar cluster with overflow counter for teams, collaborators, and assignees.
Native range input styled with GridNest tokens for numeric settings and quick adjustments.
Prominent product message with icon, supporting copy, and action slot.
Compact command surface for editor actions, filters, and grouped controls.
Radix-powered tooltip with custom GridNest styling and smooth appear/disappear animation.