Strongreed UI

The Strongreed design system — accessible React components, design tokens, and fonts built on Radix UI, shadcn patterns, and Tailwind v4. One component set, themeable per product: pharmacy, clinic, and patient.

Exported components:

• Avatar (with AvatarImage, AvatarFallback)
• Badge
• Button
• Input
• RadioGroup (with RadioGroupItem)
• Select (with SelectTrigger, SelectContent, SelectItem, SelectValue, SelectGroup, SelectLabel, SelectSeparator, SelectScrollUpButton, SelectScrollDownButton)
• Switch
• Separator
• Skeleton
• Table (with TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell, TableCaption)
• Pagination
• ThemeProvider

Installation

npm install @strongreed/strongreed-ui
# or: bun add @strongreed/strongreed-ui

React 19 is a required peer dependency:

npm install react@^19 react-dom@^19

Setup

Import the base stylesheet once at your app root. It defines the design tokens, fonts and the --theme-primary-* variables the components consume:

import "@strongreed/strongreed-ui/styles/base.css";

Without this stylesheet the components render unstyled. It is fully precompiled and standalone — you do not need Tailwind in your app to use this library.

Custom body font

The base stylesheet ships with Raleway as the default body/sans typeface. To use your own font, override the --sr-font-sans variable from your own CSS (load the font yourself, then point the variable at it):

:root {
  --sr-font-sans: "Inter", sans-serif;
}

This flows through the body text and the whole type scale. Headings use DM Sans and remain unchanged.

Choosing the primary color

There are three ways to set the active primary color, from simplest to most flexible.

1. Themed entrypoint (whole app, one theme)

Each themed entrypoint re-exports every component and token, but points the primary semantic colors at a different palette. Importing it also injects the matching theme stylesheet at runtime.

import { Button } from "@strongreed/strongreed-ui/pharmacy"; // or /clinic, /patient

2. ThemeProvider (pass the theme as a prop — recommended)

Wrap any subtree and pass the theme you want. Everything inside picks up that primary color. You can scope different themes to different parts of the page, or override individual shades — or define the primary scale from scratch.

import { ThemeProvider, Button } from "@strongreed/strongreed-ui";

// Built-in palette
<ThemeProvider theme="clinic">
  <Button>Clinic primary</Button>
</ThemeProvider>

// Override individual shades on top of a base theme
<ThemeProvider theme="pharmacy" primary={{ 800: "#0f766e" }}>
  <Button>Custom pharmacy</Button>
</ThemeProvider>

// Fully custom primary scale (no base theme needed)
<ThemeProvider primary={{ 500: "#7c3aed", 800: "#5b21b6" }}>
  <Button>Brand primary</Button>
</ThemeProvider>

ThemeProvider only needs @strongreed/strongreed-ui/styles/base.css to be loaded — it does not require the per-theme CSS files.

3. CSS import (global theme)

Import a theme stylesheet alongside base.css to make it the global theme:

import "@strongreed/strongreed-ui/styles/base.css";
import "@strongreed/strongreed-ui/styles/clinic.css"; // or pharmacy / patient

The same file also exposes [data-strongreed-theme="clinic"] and .sr-theme-clinic selectors, so you can instead activate it on a specific element:

<div data-strongreed-theme="clinic">...</div>
<!-- or -->
<div class="sr-theme-clinic">...</div>

To mix multiple themes on one page, use ThemeProvider (approach 2) — it scopes cleanly to each subtree.

Components

All components are named exports from the package root:

import { Button, Input, Badge, Select, Switch } from "@strongreed/strongreed-ui";

The full, interactive API for every component (props, variants, states) lives in Storybook — run bun run storybook or browse the published build. A few notable props that aren't obvious:

// Button — variants and sizes (it is also a Motion component, so it
// accepts Framer Motion props like `whileHover`, `animate`, etc.)
<Button variant="outline" size="lg">Save</Button>
<Button variant="destructive" size="icon"><TrashIcon /></Button>

// Input — label, leading icon, error text, sizes, password + textarea presets
<Input label="Email" icon={<MailIcon />} size="lg" />
<Input label="Password" preset="password" error="Required" />
<Input label="Notes" textArea />

// Select — composed from parts
<Select>
  <SelectTrigger><SelectValue placeholder="Pick one" /></SelectTrigger>
  <SelectContent>
    <SelectItem value="a">Option A</SelectItem>
  </SelectContent>
</Select>

// Switch — sizes
<Switch size="sm" defaultChecked />

// Table — composed from semantic parts
<Table>
  <TableHeader>
    <TableRow><TableHead>Order</TableHead><TableHead>Total</TableHead></TableRow>
  </TableHeader>
  <TableBody>
    <TableRow><TableCell>ORD-1001</TableCell><TableCell>₦4,500</TableCell></TableRow>
  </TableBody>
</Table>

// Pagination — controlled, zero-based pageIndex (pairs with TanStack Table)
<Pagination
  pageIndex={pageIndex}
  pageSize={pageSize}
  totalCount={totalCount}
  onPageIndexChange={setPageIndex}
  onPageSizeChange={setPageSize}   // omit to hide the rows-per-page control
/>

Table is unstyled structure only — bring your own column definitions and data. Pagination is presentational and fully controlled; it doesn't fetch or slice data, it just reports the next pageIndex / pageSize so it drops straight onto a TanStack Table (table.setPageIndex, table.setPageSize) or any manual pagination state.

Token exports

import {
  colors,                     // raw palettes: brand, success, neutral, clinic, pharmacy, error, information
  themePalettes,              // theme name -> palette name
  getThemeColors,             // (theme) -> that theme's color scale
  createThemeOverrideVariables, // (theme) -> { "--theme-primary-*": value }
  createPrimaryVariables,     // (scale) -> { "--theme-primary-*": value }
  primarySemanticVariables,   // semantic token re-map used by ThemeProvider
} from "@strongreed/strongreed-ui/tokens";

import type {
  StrongreedThemeName,        // "pharmacy" | "clinic" | "patient"
  PrimaryScale,               // Partial<Record<50..900, string>>
  PrimaryShade,               // 50 | 100 | ... | 900
  ColorScaleName,
} from "@strongreed/strongreed-ui/tokens";

Local development

For contributing to the library itself (not consuming it):

bun install
bun run storybook        # dev Storybook on :6006
bun run build            # build the publishable package into dist/
bun run build-storybook  # static Storybook
bun run typecheck        # type-check without emitting
bun run lint

Structure

• src/components/ui: primitives and shared building blocks
• src/tokens: raw palette and theme metadata exports
• src/styles/base.css: shared design-system foundation
• src/styles/themes/*.css: product theme entrypoints
• src/stories: Storybook stories