Getting Started

Overview

Enara Design System provides:

Design Tokens - 304 CSS variables across 12 categories (colors, spacing, typography, motion, etc.)
React Components - Vanilla React components with CSS Modules and CVA for type-safe variants
AI Metadata - Structured component metadata for AI-assisted development

Prerequisites

Node.js >= 18
pnpm >= 8 (or npm/yarn)

Installation

Packages are published to the GitHub Packages registry. Make sure your .npmrc is configured to use it for the @enara-health scope:

.npmrc

@enara-health:registry=https://npm.pkg.github.com

Then install both packages:

pnpm

pnpm add @enara-health/tokens @enara-health/ui-react

npm

npm install @enara-health/tokens @enara-health/ui-react

Peer dependencies: React 18 or 19 is required. Both react and react-dom must be installed in your project.

Font Setup

The design system uses Outfit as the primary font family. You must load this font in your application for components to display correctly.

Google Fonts (Recommended)

Add the following to your HTML <head>:

HTML

<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
  href="https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap"
  rel="stylesheet"
/>

Self-Hosting

If you prefer to self-host fonts, download Outfit from Google Fonts and use @font-face declarations in your CSS.

Verification

Once loaded, the design system will automatically use Outfit via the --font-family-primary CSS variable. No additional configuration needed.

Development

Common commands for working with the design system:

Build All Packages

pnpm build

Start Documentation Site

pnpm dev

Start Component Dev Server

pnpm --filter @enara-health/ui-react dev

Using Tokens

Import tokens once in your application and use CSS variables throughout your styles.

Import CSS Variables

@import '@enara-health/tokens/css';

Typography

h1 {
  font: var(--text-display-xl-bold);
}
p {
  font: var(--text-body-md-regular);
}

Semantic Colors

.card {
  background: var(--semantic-background-surface);
  color: var(--semantic-foreground-base);
  border: 1px solid var(--semantic-border-bounds);
}

Spacing and Layout

.container {
  padding: var(--size-16);
  gap: var(--size-8);
}

Elevation and Motion

.card {
  box-shadow: var(--elevation-100);
  border-radius: var(--radius-md);
  transition: box-shadow var(--motion-duration-normal) var(--motion-easing-ease-out);
}
.card:hover {
  box-shadow: var(--elevation-200);
}

JavaScript Constants

Tokens are also available as JavaScript constants:

import {
  TextDisplayXlBold,
  SemanticBackgroundSurface,
  ColorMoonstone500
} from '@enara-health/tokens';

// Use in React inline styles
<h1 style={TextDisplayXlBold}>Heading</h1>

Using Components

Import components and styles in your React application:

import { Button, Chip, Input } from '@enara-health/ui-react';

function App() {
  return (
    <>
      <Chip label="Active" color="success" />
      <Chip label="Pending" color="warning" variant="outline" />
      <Button role="primary" color="primary">Submit</Button>
      <Input placeholder="Enter text..." />
    </>
  );
}

Available Components

The library ships 35 components organized by atomic design hierarchy. Visit the Components section for full documentation.

Atoms (21)

Component	Description
Avatar	User or entity image with fallback initials
Badge	Small status indicator or count label
Box	Polymorphic layout primitive
Button	Primary action trigger with variants
Card	Content container with optional header and footer
Checkbox	Toggle for boolean values
Chip	Compact label for status, tags, or filters
Divider	Visual separator between content sections
FormField	Label, hint, and error wrapper for form inputs
IconButton	Icon-only action button
Input	Text input with icon and addon support
Pagination	Page navigation for paged data
Radio	Single-select from a group of options
SearchInput	Specialized input for search queries
Select	Dropdown selection control
Spinner	Loading indicator
Switch	Toggle control for on/off states
Tabs	Tabbed content navigation
Text	Typography primitive with token-based styles
Textarea	Multi-line text input
Tooltip	Contextual hint on hover or focus

Molecules (8)

Component	Description
ActionMenu	Dropdown menu for contextual actions
ActivityItem	Timeline entry for activity feeds
BuilderLayout	Side panel and main area layout for builders
EmptyState	Placeholder for sections with no data
FilterBar	Horizontal bar for data filtering controls
SortableList	Drag-and-drop reorderable list
StatCard	Metric display with label and trend
Table	Data table with sorting and selection

Organisms (5)

Component	Description
AppHeader	Top-level application header bar
AppRail	Vertical icon navigation rail
NavigationDrawer	Collapsible side navigation panel
PageHeader	Page title area with breadcrumbs and actions
Sidebar	Sidebar container with sections

Templates (1)

Component	Description
AppLayout	Full application shell with rail, sidebar, header, and content