DocsGitHub
Getting Started
  • Overview
  • Design Tokens
Components
  • Accordion
  • Alert
  • Announcement
  • Avatar
  • Badge
  • BigCalendar
  • Breadcrumb
  • Button
  • ButtonGroup
  • Calendar
  • Card
  • Checkbox
  • Chip
  • CloseButton
  • Combobox
  • CommandPalette
  • ContextMenu
  • Currency
  • DatePicker
  • DescriptionList
  • Drawer
  • DropdownMenu
  • EmptyState
  • Field
  • FileUpload
  • FormGrid
  • Hotkey
  • Icon
  • Input
  • Metric
  • Modal
  • MultiSelect
  • NumberInput
  • Pagination
  • Popover
  • ProgressBar
  • Radio
  • Rating
  • SegmentedControl
  • Select
  • SelectionCard
  • Sidebar
  • Skeleton
  • Slider
  • Spinner
  • Stepper
  • Switch
  • Table
  • Tabs
  • Textarea
  • Timeline
  • TimePicker
  • Toast
  • Tooltip
  • TransferList
  • TreeView
  • Wizard
Charts
  • Overview
  • Area Chart
  • Bar Chart
  • Donut Chart
  • Line Chart
  • Pie Chart
  • Stacked Bar Chart

Components

A collection of 20+ accessible, themeable React components. Each component uses CSS Modules, superellipse-style corners, and the HSL token system.

Components

Accordion

Accessible single- or multi-expand disclosure sections with controlled state.

Alert

Contextual feedback message for success, warning, error, and info states.

Announcement

Compound badge for announcements with tag, title, and optional link.

Avatar

User avatar with image, initials fallback, and status indicator.

Badge

Compact count or dot indicator for notifications and anchored status.

BigCalendar

Full-viewport monthly calendar grid with event bars, multi-day spanning, and overflow indicators.

Breadcrumb

Hierarchical navigation trail for showing the current page location.

Button

Primary action trigger with variants, sizes, icons, and loading state.

ButtonGroup

Joins related buttons into a single visual unit with shared variant, size, and disabled defaults.

Calendar

Standalone monthly calendar with single and range date selection.

Card

Content container with header, body, and footer sections.

Checkbox

Checkbox with label, description, indeterminate state, and multiple layout variants.

Chip

Compact status/tag element with color variants and optional icon support.

CloseButton

Small icon-only button for dismissing modals, toasts, chips, or any dismissible surface.

Combobox

Searchable single-select input for local or asynchronously filtered datasets.

CommandPalette

Keyboard-first command search with ranking, sections, recents, and hotkeys.

ContextMenu

Pointer- and keyboard-triggered action menu anchored to a virtual position.

Currency

Localized currency formatting with support for symbols, codes, and RTL output.

DatePicker

Date selection with calendar dropdown, single or date-range mode, presets, an inline variant, and min/max constraints.

DescriptionList

Responsive semantic term-and-description layout for record details.

Drawer

Focus-trapped side panel for record details, edits, and contextual workflows.

DropdownMenu

Action menu with items, separators, and keyboard navigation.

EmptyState

Presentational zero-data state with optional icon, description, and actions.

Field

Validation-agnostic label, help, error, and accessibility wiring for form controls.

FileUpload

Transport-agnostic dropzone and file list with validation and progress display.

FormGrid

Responsive one-to-four-column layout for consistent enterprise forms.

Hotkey

Displays a keyboard key or shortcut, such as a single key or a combination of modifier keys.

Icon

Icon wrapper with size and color presets for Lucide icons.

Input

Text input with label, helper text, error state, and icon slots.

Metric

KPI display for prominent values, labels, and sentiment cues.

Modal

Dialog overlay with focus trapping, sizes, accessible close behavior, and a built-in ConfirmDialog confirmation preset.

MultiSelect

Searchable multi-value selection with removable chips and overflow collapsing.

NumberInput

Accessible numeric text input with clamping, precision, adornments, and steppers.

Pagination

Controlled or uncontrolled page navigation with ellipsis windowing and edge controls.

Popover

Collision-aware non-modal anchored surface for focused interactive content.

ProgressBar

Horizontal progress indicator with sizes, colors, animated and indeterminate modes.

Radio

Radio group with label and description support.

Rating

Interactive star rating for user feedback with hover preview and keyboard navigation.

SegmentedControl

Compact option switcher for toggling between a small set of views or states.

Select

Dropdown select with search, custom options, and controlled/uncontrolled modes.

SelectionCard

Card-based selection input for visually rich single or multi-choice options.

Sidebar

Collapsible navigation sidebar with sections, icons, and nested items.

Skeleton

Reduced-motion-aware loading placeholder for text, rectangular, and circular content.

Slider

Range input for selecting a value from a continuous set with labels and marks.

Spinner

Accessible loading status indicator with reusable size presets.

Stepper

Progress indicator for multi-step flows with current, completed, and error states.

Switch

Toggle control for switching between on and off states.

Table

Data table with sorting, striped rows, density options, and sticky header.

Tabs

Tabbed interface for switching between content panels.

Textarea

Multi-line text input with character counter, resize control, and validation.

Timeline

Semantic activity and audit trail with timestamps and status-colored markers.

TimePicker

24-hour time input with free-form parsing and a constrained option panel.

Toast

Non-blocking notifications with variants, auto-dismiss, and stacking.

Tooltip

Informational popup on hover/focus with configurable positioning.

TransferList

Dual searchable listboxes for assigning and removing sets of options.

TreeView

Accessible hierarchical tree with roving focus, expansion, and logical RTL navigation.

Wizard

Multi-step stacked dialog for onboarding flows, setup wizards, and guided processes.

Charts

Overview

Shared ChartConfig API, props, and usage patterns across all chart types.

Area Chart

Smoothed area chart for trend visualization across time periods.

Bar Chart

Category comparison using vertical bars and legends.

Donut Chart

Pie variant with center labels for key summary metrics.

Line Chart

Trend comparison with configurable line interpolation and dots.

Pie Chart

Part-to-whole distribution chart with legend and tooltip.

Stacked Bar Chart

Stacked series bars to compare totals and composition by category.