@starbemtech/react-starsystem
React component library for Starbem's Star System Design System — accessible, type-safe components built with TypeScript, Tailwind CSS v4, and Vite.
📖 Interactive docs & component browser
Overview
- Figma-first — every token and component maps 1:1 to the Star System DS file
- Fully typed — strict TypeScript, exported prop types for every component
- Accessible — WCAG 2.1 AA, semantic HTML, ARIA attributes throughout
- ESM only — tree-shakeable, no CommonJS bundle
- Tailwind CSS v4 — tokens in
@theme {}, no tailwind.config.js required
Installation
pnpm add @starbemtech/react-starsystem
# or
npm install @starbemtech/react-starsystem
# or
yarn add @starbemtech/react-starsystem
Peer dependencies:
pnpm add react react-dom
Setup
Import the stylesheet once in your app entry point:
// main.tsx / _app.tsx / layout.tsx
import '@starbemtech/react-starsystem/style.css'
The library uses Funnel Display as its brand font. Add it to your HTML or CSS:
<link
href="https://fonts.googleapis.com/css2?family=Funnel+Display:[email protected]&display=swap"
rel="stylesheet"
/>
Dark Mode
All components ship with first-class dark mode support via Tailwind's dark: variant. It's opt-in and class-based — not tied to OS/browser prefers-color-scheme — so it composes with your own theme switcher instead of silently following system preference.
Enable it by adding the dark class to <html> (or any ancestor element):
document.documentElement.classList.toggle('dark')
<html class="dark">
<!-- every component under here renders in dark mode -->
</html>
Brand colors (primary orange) and semantic status colors (Alert, Badge, Toast variants like success/warning/error/info) are intentionally theme-invariant — they stay the same in both themes.
Components
Quick example:
import { Button, Input } from '@starbemtech/react-starsystem'
<Input id="email" label="Email" placeholder="[email protected]" hint="We'll never share your email." />
<Button variant="primary" size="md">Get started</Button>
Every component is fully typed — import its prop type alongside the component (import type { ButtonProps } from '@starbemtech/react-starsystem') for the full API, or open its source folder below. Full interactive docs (all variants, live prop controls) are at starbem.github.io/react-starsystem, or run locally via pnpm docs:dev.
Form
Feedback
Overlay
Navigation
Data display
Scheduling
Telehealth
Accessibility: every component ships a vitest-axe test asserting zero WCAG 2.1 AA violations — see each component's .test.tsx.
Design Tokens
Tokens are exported as typed constants and CSS custom properties:
import { colors, spacing, borderRadius, fontFamily, fontSize, fontWeight, lineHeight, shadows } from '@starbemtech/react-starsystem'
colors.primary.base // '#FF5100'
colors.secondary.base // '#7F56D9'
borderRadius.md // '12px'
fontFamily.display // '"Funnel Display", sans-serif'
fontSize.h1 // '2.25rem'
shadows.elevation02 // '0 2px 4px rgba(0,0,0,0.12)'
All tokens are also available as CSS variables (set by the imported stylesheet):
color: var(--color-primary-base); /* #FF5100 */
border-radius: var(--radius-md); /* 16px */
Figma Source
All components and tokens are derived from the Star System DS Figma library.
- File key:
6wfkhBhONJ7r4A0PZWIsIs
- Library key:
lk-9c495c686dadb150500e7aa13dd795390c752ea1e44d631d6092ab520cd70f99ff656dff3415e0ac9fac977eab654a4a167c927b572b82bc85e8b51a457cb019
Development
# Install dependencies
pnpm install
# Start the component docs site (localhost:5173)
pnpm docs:dev
# Build the static docs site → docs-site/dist/
pnpm docs:build
# Build library → dist/
pnpm build
# Run tests
pnpm test
pnpm test:watch
# Type check
pnpm typecheck
# Lint
pnpm lint
pnpm lint:fix
Adding a component
- Create
src/components/<ComponentName>/
- Add
<ComponentName>.tsx, <ComponentName>.stories.tsx, <ComponentName>.test.tsx, index.ts
- Re-export from
src/index.ts
See CONTRIBUTING.md for the full contribution guide, and CODE_OF_CONDUCT.md for community expectations. For security issues, see SECURITY.md instead of opening a public issue.
Versioning & Publishing
This library uses Changesets for versioning:
# After making changes, add a changeset
pnpm changeset
# Choose: patch / minor / major
# Write a summary of the change
# Commit the generated .changeset/ file
Publishing happens automatically when a tag matching v* is pushed to main — a GitHub Release is created and the package is published to npm.
License
MIT © Starbem
