UI Components

A versatile button component with multiple variants and sizes

• •Multiple variants (primary, secondary, outline, ghost)
• •Three sizes (sm, md, lg)
• •ForwardRef support

A button styled as a link with Next.js routing support

• •Automatic Next.js Link for internal navigation
• •External link support with target="_blank"
• •Same styling as Button component

Expandable accordion component with single-item expansion

• •Single-item expansion (radio-style)
• •Animated chevron rotation
• •Optional category filtering

A small status indicator for labeling items with colors, counts, or keywords

• •6 color variants (default, success, warning, error, outline, secondary)
• •2 sizes (sm, md)
• •Rounded-full pill shape

An inline feedback component for displaying informational, success, warning, or error messages

• •4 semantic types: info, success, warning, error
• •Auto icon per type (lucide-react)
• •Optional title prop

A composable tab component for switching between content panels — built as Tabs + TabsList + TabsTrigger + TabsContent

• •Composition pattern: Tabs + TabsList + TabsTrigger + TabsContent
• •Controlled and uncontrolled modes
• •ARIA roles: tablist, tab, tabpanel

A loading placeholder that mimics content layout using animated pulse — pairs naturally with React 19 Suspense

• •4 variants: line, circle, card, block
• •animate-pulse CSS animation
• •Multi-line mode with natural last-line shortening

A flexible container component with Header, Content, and Footer sub-components for structured layouts

• •Composable sub-components: CardHeader, CardTitle, CardDescription, CardContent, CardFooter
• •unstyled prop for custom containers
• •Responsive padding and border radius

A text input with label, helper text, error state, and icon slot support

• •ForwardRef support
• •Accessible label/input association via id
• •Error state with aria-invalid + aria-describedby

User avatar with image support, initials fallback, multiple sizes, and AvatarGroup for overlapping stacks

• •5 sizes: xs, sm, md, lg, xl
• •Image with broken-image fallback
• •Initials fallback with primary color

An accessible toggle switch supporting controlled, uncontrolled, and labeled modes

• •Controlled and uncontrolled modes
• •role="switch" + aria-checked for accessibility
• •Label and description slots

A horizontal or vertical divider with optional centered label text

• •Horizontal and vertical orientations
• •Optional centered label
• •role="separator" + aria-orientation

Accessible dialog overlay with backdrop, ESC close, body scroll lock, and composable sub-components

• •Portal rendering into document.body
• •ESC key to close
• •Backdrop click to close

Global notification system with auto-dismiss, four variants, six positions, and useToast hook

• •Context + useToast hook API
• •ToastProvider wraps app (or section)
• •Four variants: success, error, warning, info

Hover and focus triggered tooltip with four position options

• •Four positions: top, bottom, left, right
• •Mouse hover and keyboard focus triggers
• •role="tooltip" for accessibility

Animated progress bar with label, value display, four color variants, and three size options

• •Four color variants: default (primary), success, warning, danger
• •Three size options (sm, md, lg)
• •Optional label and percentage display

An anchor-aware floating popover with auto-positioning, sub-components, and keyboard/click-outside dismissal.

• •Auto-positioning with getBoundingClientRect
• •Keyboard: Escape to close
• •Click-outside to close

A slide-in drawer panel that can appear from any edge of the screen — right, left, bottom, or top.

• •Four slide directions (right, left, bottom, top)
• •Backdrop with opacity transition
• •Keyboard: Escape to close

A single-item expandable panel with animated height transition — perfect for FAQs, descriptions, and settings.

• •CSS max-height animation (no extra deps)
• •Chevron rotation indicator
• •Controlled & uncontrolled modes

A two-state toggle button and a ToggleGroup for mutually exclusive selections — ideal for toolbars and settings.

• •Two variants: default and outline
• •Three sizes: sm, md, lg
• •ToggleGroup for single-selection radio-like behaviour

A row of overlapping user avatars with auto-generated initials, color coding, and an overflow "+N" badge.

• •Auto-generates initials from name
• •Automatic distinct color assignment
• •Supports image avatars via src

A ⌘K command palette with fuzzy search, grouped items, keyboard navigation, and shortcut badges.

• •Fuzzy search filtering via cmdk
• •Grouped items with section headings
• •Keyboard navigation (arrows + Enter)

A touch-friendly carousel powered by Embla Carousel with arrows, dot pagination, autoplay, loop, and multi-slide views.

• •Powered by Embla Carousel
• •Touch/swipe support
• •Prev/Next arrow buttons

A rich preview card that appears on hover with configurable delay, side placement, and portal rendering.

• •Open/close hover delay
• •Four placement sides
• •Portal rendering (never clipped)

Sortable, paginated data table powered by @tanstack/react-table.

• •Column sorting with visual indicator
• •Client-side pagination
• •Striped and bordered variants

Responsive bar chart with multi-series and stacked support via Recharts.

• •Multi-series support
• •Stacked bar mode
• •Custom colors per series

Smooth line chart with multi-series, dashed lines, and dot control.

• •Smooth monotone curves
• •Dashed line support
• •Dot visibility control

Pie and donut charts with percentage labels and custom colors.

• •Pie and donut variants
• •Percentage labels
• •Custom per-slice colors

Navigation trail showing the current page location in a hierarchy.

• •Custom separators
• •Home icon option
• •Icon per item

Page navigation control with ellipsis, prev/next buttons, and keyboard support.

• •Ellipsis for large ranges
• •Prev/Next buttons
• •Configurable sibling count

Groups multiple buttons with seamless borders, supporting horizontal and vertical layouts.

• •Horizontal and vertical orientations
• •Seamless borders between buttons
• •Works with Button component

Compact label component for categorization, filtering, and status indicators.

• •6 color variants
• •3 sizes
• •Removable with X button

One-click clipboard copy button with animated success feedback.

• •navigator.clipboard API
• •2-second success state
• •Check icon feedback

Star rating component with hover preview, readonly mode, and customizable max.

• •Hover preview
• •Readonly mode
• •Configurable max

Animated SVG loading spinner with 5 sizes and custom color support.

• •5 sizes
• •Custom color
• •Accessible aria-label

Keyboard shortcut display component for documenting hotkeys and commands.

• •Single key display
• •KbdShortcut for multi-key combos
• •Native keyboard styling

Frosted glass card with configurable blur, border, and padding for layered UIs.

• •backdrop-blur
• •4 blur levels
• •Semi-transparent border

Render text with a customizable CSS gradient fill using background-clip.

• •Any CSS color
• •Optional via stop
• •8 directions

Accessible form label built on Radix UI with required indicator and hint text.

• •Radix UI accessibility
• •Required indicator
• •Hint text

Modal dialog for confirmations and destructive actions, built on Radix UI AlertDialog.

• •Focus management
• •Backdrop click to close
• •Keyboard Escape to close

Accessible dropdown menu with items, checkboxes, radio groups, and sub-menus.

• •Keyboard navigation
• •Checkbox items
• •Radio groups

Custom-styled scrollable container with consistent cross-browser scrollbars.

• •Cross-browser scrollbars
• •Vertical/horizontal/both
• •Radix UI primitive

One-time password input with individual character boxes, paste handling, and keyboard navigation.

• •Paste support
• •Keyboard navigation
• •Auto-complete on fill

Multi-button toggle supporting single or multi-select mode with size variants.

• •Single & multiple mode
• •Size variants
• •Disabled state

Contextual callout blocks for info, warning, success, error, and tip messages.

• •5 variants
• •Custom icon
• •Optional title

Card-based radio buttons with icon, badge, and description support.

• •Card layout
• •Icon support
• •Badge overlay

Drag-to-resize split panels using react-resizable-panels with horizontal or vertical layout.

• •Horizontal & vertical
• •Min/max constraints
• •Drag handle

Drag-and-drop file upload area with image preview, size validation, and file list.

• •Drag and drop
• •Image previews
• •Size validation

Color picker with hex input, native color wheel, RGB readout, and preset swatches.

• •Hex input
• •Native color wheel
• •RGB display

Structured key-value display for metadata, specs, and profile details.

• •Key-value layout
• •1 or 2 columns
• •Badge support

Right-click context menu with items, separators, labels, keyboard shortcuts, and checkmarks.

• •Right-click trigger
• •Keyboard shortcuts
• •Separator & label types

Sortable data table with striped rows, borders, compact mode, and custom cell renderers.

• •Column sorting
• •Striped rows
• •Compact mode

Mobile-first bottom sheet drawer with snap points and drag-to-dismiss, powered by vaul.

• •Snap points
• •Drag to dismiss
• •Backdrop blur

Multi-value chip input — press Enter or comma to add tags, Backspace to remove.

• •Enter or comma to add
• •Backspace to remove
• •Max tags limit

Pill-style radio segments with size variants and full-width option.

• •Size variants
• •Full-width mode
• •Disabled segments

Stacked notification toasts with promise support, powered by Sonner.

• •5 variants
• •Promise toast
• •Rich colors

Step wizard with horizontal and vertical orientation, completed/active/pending states.

• •Horizontal & vertical
• •Click to navigate
• •Completed state checkmark

Selectable chip pills for filtering and tagging. Supports single or multi-select, size/color/variant combinations, count badges, removable chips, icons, and disabled options.

• •Single and multi-select modes
• •Filled, outline, and soft visual variants
• •5 color themes