@neutron-l/design-system

Neutron-L Design System

A comprehensive, accessible, and themeable React component library built for healthcare applications.

Installation

npm install @neutron-l/design-system

Peer Dependencies

Ensure you have the following peer dependencies installed:

npm install react react-dom

Quick Start

import { HXDSProvider, Button, PatientCard, StatusBadge } from "@neutron-l/design-system";
import "@neutron-l/design-system/styles.css";

function App() {
  return (
    <HXDSProvider theme="rso">
      <Button variant="primary">Get Started</Button>
    </HXDSProvider>
  );
}

Available Themes

Neutron-L supports multiple product themes out of the box:

| Theme | Description | Primary Color | |-------|-------------|---------------| | rso | Real-time Scheduling Operations | HCA Blue | | rcm | Revenue Cycle Management | Green | | nurse-handoff | Nurse Handoff System | Purple | | timpani | Healthcare Orchestration | Deep Purple | | supply-chain | Supply Chain Management | Teal |

Using Themes

import { HXDSProvider } from "@neutron-l/design-system";

// Set theme at the provider level
<HXDSProvider theme="rcm">
  {/* Your app */}
</HXDSProvider>

// Or switch themes dynamically
const { setTheme } = useHXDS();
setTheme("nurse-handoff");

Components

Core Components

• Button - Primary action buttons with multiple variants
• TextField - Text input with validation states
• Select - Dropdown selection component
• Checkbox - Checkbox with label support
• Switch - Toggle switch component

Layout & Display

• Card - Container component with variants
• Avatar - User avatar with status indicators
• StatusBadge - Status indicators (success, warning, error, etc.)
• Tabs - Tabbed interface component
• Progress - Progress bar component
• Skeleton - Loading placeholder components
• Tooltip - Hover tooltips

Feedback

• Alert - Alert messages with variants

Data Display

• DataTable - Sortable, filterable data tables

Healthcare-Specific

• PatientCard - Patient information display
• VitalsPanel - Vital signs display
• MedicationList - Medication list with scheduling

Dark Mode

Neutron-L supports dark mode out of the box:

const { isDark, toggleDark } = useHXDS();

<button onClick={toggleDark}>
  {isDark ? "Light Mode" : "Dark Mode"}
</button>

TypeScript Support

Neutron-L is written in TypeScript and includes full type definitions:

import type { ButtonProps, PatientCardProps, ThemeName } from "@neutron-l/design-system";

Tailwind CSS Integration

Neutron-L uses Tailwind CSS and provides design tokens as CSS custom properties. Extend your tailwind.config.js:

module.exports = {
  content: [
    // ... your content
    "./node_modules/@neutron-l/design-system/dist/**/*.js",
  ],
  // Neutron-L tokens are automatically available via CSS custom properties
};

Accessibility

All Neutron-L components are built with accessibility in mind:

• Full keyboard navigation
• ARIA attributes
• Screen reader support
• Focus management
• Color contrast compliance

Browser Support

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)

Building the Library

# Build the component library
npm run build:lib

This generates:

• dist/index.js - ESM bundle
• dist/index.cjs - CommonJS bundle
• dist/index.d.ts - TypeScript declarations
• dist/styles.css - CSS styles and tokens

Development

# Start the documentation site
npm run dev

# Build the documentation site
npm run build

License

MIT © HCA Healthcare

Lovable Project Info

URL: https://lovable.dev/projects/bc588c41-84a8-44fd-9e23-397f7db9ed57

This project is built with Vite, TypeScript, React, shadcn-ui, and Tailwind CSS.