Components
A collection of reusable React components built with design tokens for consistent, accessible interfaces. All components follow atomic design principles.
Atoms
Basic building blocks of the design system. These are the smallest, most fundamental components that cannot be broken down further.
Avatar
User avatar with auto-generated colors from name, initials, and image support with fallback.
Badge
Status indicator with semantic colors for labels, tags, and status information.
Button
Interactive button with multiple variants, sizes, and states for actions and navigation.
Card
Container for grouping content with elevation, padding, and interactive states.
Chip
Compact element for displaying status, categories, tags, or attributes.
Input
Text input with support for states, icons, and built-in clear/password toggle.
Switch
Toggle control for binary on/off states, commonly used for settings.
Checkbox
Form control for selecting one or more options, with indeterminate state support.
Radio
Radio button for single-select options within a group.
IconButton
Icon-only button for compact actions in toolbars, headers, and dense UIs.
Spinner
Loading indicator for communicating ongoing processes and async operations.
Tabs
Navigation component for switching between different views or sections.
Text
Polymorphic typography component for consistent text styling across the design system.
Pagination
Navigation component for browsing through pages of data with page size controls.
Box
Polymorphic layout primitive with system props for spacing, sizing, flex, colors, and more.
Divider
Horizontal or vertical separator line for visually dividing content sections.
SearchInput
Specialized search input with built-in search icon, clear button, and loading state.
Select
Dropdown select for choosing from a list of options with labels and error states.
Textarea
Multi-line text input with character count, resize options, and validation.
FormField
Wrapper for form controls providing consistent labels, helper text, and errors.
Tooltip
Informative text displayed on hover or focus for supplementary context.
Data Display
Components for displaying and interacting with data in tables, lists, and other data-driven interfaces.
EmptyState
Placeholder component for empty lists, tables, or containers with optional call-to-action.
FilterBar
Layout container for organizing filter controls in a horizontal row above tables or lists.
ActionMenu
Dropdown menu for contextual actions, commonly used in table rows for row-level operations.
Table
Composable table system for displaying structured tabular data.
StatCard
Dashboard metric card with value, label, trend indicator, and comparison.
ActivityItem
Activity feed item with avatar, title, description, and timestamp.
SortableList
Drag-and-drop list with nested structures and external drag source support.
Layout
Structural components that provide the overall layout and organization of your application pages.
Sidebar
Navigation sidebar with collapsible support, sections, and items with icons and badges.
AppLayout
Main application layout with sidebar, header, and content areas.
AppHeader
Global application header with start, center, and end slots for navigation and actions.
PageHeader
Page-level header with title, subtitle, breadcrumb, and action buttons.
AppRail
Narrow vertical icon navigation for switching between application sections.
BuilderLayout
Two-column layout with side panel and main content for builder interfaces.
Usage
Import components from @enara-health/ui-react:
import { Button, Chip, Input } from '@enara-health/ui-react';