Skip to content

react-components

Directory actions

More options

Directory actions

More options

Latest commit

 

History

History

react-components

README.md

Health Samurai

@health-samurai/react-components

A React component library for healthcare UIs.
Looks good out of the box, flexible enough for real-world applications.

npm Storybook

Built on React 19, Radix UI, and Tailwind CSS 4. Dark mode support and a design token system are included.

How to use

pnpm add @health-samurai/react-components@alpha

Requires react and react-dom 19+.

Import the styles — without this, components will render unstyled:

import "@health-samurai/react-components/full.css";

Add the fonts to the <head> of the page:

<link href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&display=swap" rel="stylesheet">

60+ components

The library ships with a full set of UI primitives (based on shadcn/ui) alongside custom components built specifically for healthcare developer tooling.

UI Primitives — Buttons, dialogs, forms, menus, popovers, tables, tabs, tooltips, and more. Based on Radix UI for accessibility, styled with Tailwind. The full set is available in Storybook.

Healthcare & Developer Tools:

Component Description
CodeEditor CodeMirror 6-based editor with syntax highlighting for JSON, YAML, SQL, and HTTP
DataTable TanStack Table wrapper with sticky headers, column resizing, and sorting
FhirStructureView Tree view for displaying FHIR resource structure definitions
OperationOutcomeView Renders FHIR OperationOutcome issues with severity indicators
SegmentControl Multi-option selector (auto-switches to toggle for 2 items)
SplitButton Button with a dropdown for secondary actions
RequestLineEditor HTTP method + URL editor for API tools
TreeView General-purpose hierarchical data display

Design tokens

A token system defined as CSS custom properties:

  • Colors — Neutral, brand, semantic, and status palettes with light/dark variants (OKLch-based)
  • Typography — Inter (sans) and JetBrains Mono (mono), with a size scale from xxs to 9xl
  • Spacing — 8px base unit with quarter, half, and multiplied variants
  • Radii — xs through max for consistent rounding

Storybook

All components and their variants are available in Storybook.

To run locally:

pnpm storybook

Development

The package lives in the aidbox-ts-sdk monorepo and is built with SWC + TypeScript + Tailwind CSS.

git clone git@github.com:HealthSamurai/aidbox-ts-sdk.git
cd aidbox-ts-sdk
pnpm install
cd packages/react-components
pnpm build          # Build the library
pnpm storybook      # Start Storybook on port 6006
pnpm tsc:check      # Type-check
pnpm lint:fix       # Lint and format with Biome

Linking for local development

To use a local build of the library in another project:

cd aidbox-ts-sdk && pnpm link
cd <your-project> && pnpm link @health-samurai/react-components