Components
68 components — every export of @timelycare/helix-ui, grouped by what it does.
Actions
Buttons and controls that trigger things
Interactive button component with multiple visual variants and sizes, built on CVA with optional Radix Slot composition.
Groups buttons together with shared borders, supporting horizontal and vertical orientations with optional separators and text segments.
Two-state toggle button built on Radix Toggle primitive with default and outline variants, used for toggling a single option on/off.
Group of toggle buttons built on Radix ToggleGroup primitive, supporting single or multiple selection with shared variant/size via context.
Forms & input
Collecting and editing user input
Date picker calendar built on react-day-picker with single date, range, and multi-date selection support.
Accessible checkbox built on Radix UI Checkbox primitive with checked/unchecked/indeterminate states and a CheckIcon indicator.
Autocomplete/typeahead select built on Base UI Combobox primitive, supporting single and multi-select with chips, groups, and custom filtering.
Date selection composition built on Calendar + Popover.
A labeled section of related fields the user can view and edit — settings, profile dossiers, account info, contact records. Two variants via discriminated-union props: card-edit (admin surfaces, per-section atomic save with an Edit affordance) and form-save (consumer surfaces, form-wide commit at the bottom of the page). The canonical drift-paired-as-variants compound — both save models are valid for their surface tier.
Form field layout system with label, description, error, and content sub-components. Supports vertical, horizontal, and responsive orientations.
Form field components built on react-hook-form's FormProvider and Controller, providing automatic label association, error display, and accessible descriptions.
Styled native input element with focus ring, error state, and file input support.
Composable input wrapper that combines an input or textarea with addons like icons, buttons, text, and keyboard shortcuts.
One-time password input with individual character slots, built on the input-otp library. Supports grouping and separators.
Accessible label component built on Radix UI Label primitive with automatic disabled state styling.
Password field with a show/hide toggle, plus a live rules list that gives check/× feedback as the user types. Implements the password-rules convention.
Accessible radio group built on Radix RadioGroup primitive for single-selection from a set of options.
Dropdown select component built on Radix UI Select primitive with keyboard navigation, grouped items, and portal-based content positioning.
Range slider built on Radix Slider primitive, supporting single and multi-thumb values with horizontal and vertical orientations.
Toggle switch built on Radix Switch primitive for binary on/off states, with default and small size variants.
Multi-line text input with auto-sizing via field-sizing-content, styled to match the Input component.
Data display
Presenting content, records, and data
User avatar with image, fallback initials, optional badge, and group layout. Built on Radix Avatar primitive with three size options.
Inline status indicator with semantic and primitive color variants, rendered as a span with optional Slot composition.
Scrollable content carousel with previous/next navigation, built on embla-carousel-react.
Chart wrapper and tooltip/legend components built on Recharts, with theme-aware color configuration via ChartConfig.
Sortable, filterable table composition built on Table + TanStack Table.
Canonical filter UI for data tables: a trigger button that opens a popover containing caller-supplied form fields, with a Clear All / Apply footer the compound enforces. Confirmed across Provider (Members, Past Visits, In-Visit), Member (Community), and Campus (Visits, Manage Accounts). For analytics dashboards where filters stay visible, use FilterCard instead.
Versatile list/content item with media, title, description, actions, header, and footer slots. Supports outline and muted variants.
Keyboard shortcut display component showing key combinations in a styled inline badge, with KbdGroup for multi-key sequences.
Analytics-surface KPI card with 3 layout variants (basic / split / glance) selected via discriminated-union props. Consolidates 5 audit candidates into one compound. Use `basic` for single KPIs scanned in rows, `split` for service-line breakdowns inside one card, `glance` for grids of micro-KPIs with per-cell context.
Pure HTML-based data table with header, body, footer, caption, and striped row support.
Feedback & status
Communicating state, progress, and results
Inline alert banner for displaying important messages with optional icon, title, and description.
Empty state placeholder with icon/media, title, description, and action areas for when no content is available.
Determinate progress bar indicating completion percentage, built on Radix Progress.
Animated placeholder block used to indicate loading content before data arrives.
Animated loading spinner using the Loader2 icon with CSS spin animation. Includes role='status' and aria-label for accessibility.
Loading placeholder shaped like a table — Skeleton bars laid out in real table rows and cells, with the live-region wiring included.
Toast notification system built on the sonner library with next-themes integration for automatic theme matching. Render once at the app root and trigger via toast() function.
Layout & structure
Page scaffolding, containers, and spacing
Vertically stacked collapsible sections with animated expand/collapse, built on Radix Accordion.
Top-level application chrome. Composes top bar (global chrome only) + sidebar + main content area. Universal across all 6 TimelyCare products — no variants. The AppShell-vs-PageHeader ownership rule is enforced via the typed AppShellTopBar sub-component, which has slots only for global chrome (logo, search, notifications, user menu, optional global actions) and NO slots for page chrome (title, breadcrumb, page actions — those live in PageHeader inside children).
Container that maintains a specified aspect ratio for its child content, built on Radix AspectRatio.
Container component for grouping related content with a bordered, rounded surface and consistent spacing.
Expandable/collapsible section built on Radix Collapsible primitive for showing and hiding content.
The bar across the top of the app for global tools like search and the user's avatar. It stays the same on every page; page titles and breadcrumbs live in Page Header.
Opinionated layout template for list pages — PageHeader + optional tabs + search + content slot. The canonical shape confirmed in 5 of 6 TimelyCare products. Single universal compound (no variants).
Top-of-content region header — breadcrumb, heading, description, and primary actions. Universal across all TimelyCare products.
Resizable panel layout with draggable handles, built on react-resizable-panels.
Custom-styled scrollable area with overlay scrollbars, built on Radix ScrollArea.
Visual divider line for separating content horizontally or vertically, built on Radix Separator.
Overlays
Content layered above the page
A modal dialog that interrupts the user with important content and expects a response, typically used for destructive action confirmations.
A right-click menu that provides contextual actions for an element, with the same item types as DropdownMenu (items, checkboxes, radios, sub-menus).
Modal dialog overlay built on Radix UI Dialog primitive with managed focus, backdrop overlay, and close button.
A touch-friendly panel (powered by vaul) that slides from any edge with swipe-to-dismiss, optimized for mobile interactions.
A menu of actions or options that appears from a trigger button, supporting items, checkboxes, radio groups, sub-menus, and keyboard navigation.
A floating card that appears on hover to show a preview of content, such as user profiles, link previews, or entity summaries.
A floating panel anchored to a trigger element, used for rich interactive content like forms, settings, or filters.
A panel that slides in from the edge of the screen, used for supplementary content that doesn't require a full page navigation.
A small floating label that appears on hover/focus to describe an element, primarily for icon-only buttons and truncated text.
Utilities
Helpers and infrastructure components