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
- 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 {}, notailwind.config.jsrequired
pnpm add @starbemtech/react-starsystem
# or
npm install @starbemtech/react-starsystem
# or
yarn add @starbemtech/react-starsystemPeer dependencies:
pnpm add react react-domImport the stylesheet once in your app entry point:
// main.tsx / _app.tsx / layout.tsximport'@starbemtech/react-starsystem/style.css'The library uses Funnel Display as its brand font. Add it to your HTML or CSS:
<linkhref="https://fonts.googleapis.com/css2?family=Funnel+Display:wght@300..800&display=swap"
rel="stylesheet"
/>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')<htmlclass="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.
Quick example:
import{Button,Input}from'@starbemtech/react-starsystem'<Inputid="email"label="Email"placeholder="olivia@starbem.app"hint="We'll never share your email."/><Buttonvariant="primary"size="md">Getstarted</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
| Component | Source |
|---|---|
Button | src/components/Button |
IconButton | src/components/IconButton |
Input | src/components/Input |
Textarea | src/components/Textarea |
Select | src/components/Select |
Checkbox, CheckboxGroup | src/components/Checkbox |
Radio, RadioGroup | src/components/Radio |
Toggle | src/components/Toggle |
FormField | src/components/FormField |
FilterBar, FilterChip | src/components/FilterBar |
FileUploader, FileItem | src/components/FileUploader |
Feedback
| Component | Source |
|---|---|
Badge | src/components/Badge |
Tag | src/components/Tag |
Alert | src/components/Alert |
ToastProvider, toast | src/components/Toast |
Skeleton | src/components/Skeleton |
Spinner, Dots | src/components/Spinner |
Progress, ProgressCircle | src/components/Progress |
EmptyState | src/components/EmptyState |
Overlay
| Component | Source |
|---|---|
Modal | src/components/Modal |
Drawer | src/components/Drawer |
Tooltip | src/components/Tooltip |
Popover | src/components/Popover |
DropdownMenu | src/components/DropdownMenu |
Navigation
| Component | Source |
|---|---|
TopBar | src/components/TopBar |
Sidebar, NavItem | src/components/Sidebar |
Menu | src/components/Menu |
Tabs | src/components/Tabs |
Breadcrumb | src/components/Breadcrumb |
Pagination | src/components/Pagination |
Data display
| Component | Source |
|---|---|
Table | src/components/Table |
Card | src/components/Card |
ListItem | src/components/ListItem |
Avatar, AvatarGroup | src/components/Avatar |
Accordion | src/components/Accordion |
Divider | src/components/Divider |
Scheduling
| Component | Source |
|---|---|
Calendar | src/components/Calendar |
DateInput | src/components/DateInput |
Schedule | src/components/Schedule |
Telehealth
| Component | Source |
|---|---|
Message, TypingMessage, MessageDay, SystemMessage, MessageList | src/components/Message |
VideoCall | src/components/VideoCall |
Accessibility: every component ships a vitest-axe test asserting zero WCAG 2.1 AA violations — see each component's .test.tsx.
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 */All components and tokens are derived from the Star System DS Figma library.
- File key:
6wfkhBhONJ7r4A0PZWIsIs - Library key:
lk-9c495c686dadb150500e7aa13dd795390c752ea1e44d631d6092ab520cd70f99ff656dff3415e0ac9fac977eab654a4a167c927b572b82bc85e8b51a457cb019
# 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- 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.
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/ filePublishing happens automatically when a tag matching v* is pushed to main — a GitHub Release is created and the package is published to npm.
MIT © Starbem