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.
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.
Usage
Import components from @enara-health/ui-react:
import { Button, Chip, Input } from '@enara-health/ui-react';