@starbemtech/react-starsystem

v1.1.0

Published

2 months ago

Starbem Star System — React component library

0High
0Medium
0Low

starbem.app

igorheije

react design-system component-library starbem tailwindcss typescript accessibility radix-ui

@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

| 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.

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.

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

@starbemtech/react-starsystem

Overview

Installation

Setup

Dark Mode

Components

Design Tokens

Figma Source

Development

Adding a component

Versioning & Publishing

License