@healthcare-admin/ui

Reusable React + TypeScript component library for healthcare admin dashboards, inspired by an Authorization History / Utilization Management UI.

What is included

Components:

• AppHeader
• PageTitleBar
• FilterSidebar
• FilterSection
• FormField
• TextInput
• SelectField
• ShowMoreToggle
• ActiveFiltersBar
• FilterChip
• DataTable
• TableHeader
• TableRow
• TableCell

Demo:

• AuthorizationHistoryPage

Design tokens:

• colors
• typography
• spacing
• sizing
• borders
• radius
• table density

Installation

npm install @healthcare-admin/ui

Because this library uses React as a peer dependency, your app should already have React and React DOM installed.

npm install react react-dom

Usage

import { AuthorizationHistoryPage } from '@healthcare-admin/ui';
import '@healthcare-admin/ui/dist/tokens.css';
import '@healthcare-admin/ui/dist/components.css';

export default function App() {
  return <AuthorizationHistoryPage username="JACOB" />;
}

Build locally

npm install
npm run build

The build output is generated in dist/.

Publish to npm

npm login
npm publish --access public

For scoped packages like @healthcare-admin/ui, use --access public if the package is public.

Use components separately

import {
  AppHeader,
  PageTitleBar,
  FilterSidebar,
  FilterSection,
  FormField,
  TextInput,
  SelectField,
  ActiveFiltersBar,
  DataTable,
  type TableColumn
} from '@healthcare-admin/ui';

const columns: TableColumn[] = [
  { key: 'id', label: 'Processed Auth ID', width: 220 },
  { key: 'member', label: 'Member', width: 160 },
  { key: 'dob', label: 'DOB', width: 110 }
];

const data = [
  { id: '260422009110002026101', member: 'Sample Member', dob: '01/01/1929' }
];

export function MyPage() {
  return (
    <div className="ha-root">
      <AppHeader
        title="Utilization Management"
        username="JACOB"
        navItems={[{ label: 'Dashboard' }, { label: 'Authorizations' }]}
      />
      <PageTitleBar title="Authorization History" />

      <div className="ha-dashboard-layout">
        <FilterSidebar>
          <FilterSection title="Member Level Filters">
            <FormField label="Member Name" htmlFor="member-name">
              <TextInput id="member-name" />
            </FormField>
            <FormField label="Member Language" htmlFor="member-language">
              <SelectField
                id="member-language"
                options={[{ label: 'All items checked', value: 'all' }]}
              />
            </FormField>
          </FilterSection>
        </FilterSidebar>

        <main className="ha-main-content">
          <ActiveFiltersBar
            filters={[{ id: 'from', label: 'Requested From', value: '04/07/2026' }]}
          />
          <DataTable columns={columns} data={data} />
        </main>
      </div>
    </div>
  );
}

Override design tokens

You can customize the UI by overriding CSS variables in your app.

:root {
  --ha-color-primary: #007f8c;
  --ha-color-header-bg: #dbeaf6;
  --ha-size-sidebar-width: 26rem;
  --ha-table-row-min-height: 9rem;
  --ha-table-cell-padding-x: 0.875rem;
}

Folder structure

@healthcare-admin/ui
├─ package.json
├─ tsconfig.json
├─ vite.config.ts
├─ README.md
└─ src
   ├─ index.ts
   ├─ styles
   │  ├─ tokens.css
   │  └─ components.css
   ├─ components
   │  ├─ AppHeader.tsx
   │  ├─ PageTitleBar.tsx
   │  ├─ FilterSidebar.tsx
   │  ├─ FilterSection.tsx
   │  ├─ FormField.tsx
   │  ├─ TextInput.tsx
   │  ├─ SelectField.tsx
   │  ├─ ShowMoreToggle.tsx
   │  ├─ ActiveFiltersBar.tsx
   │  ├─ FilterChip.tsx
   │  ├─ DataTable.tsx
   │  ├─ TableHeader.tsx
   │  ├─ TableRow.tsx
   │  └─ TableCell.tsx
   └─ demo
      └─ AuthorizationHistoryPage.tsx