Crestline

A small, modern React component library — published as @crestline/ui. Accessible, themeable components styled with CSS Modules and design tokens, shipped as ESM + CJS with full TypeScript types.

Built for React 19 (works with React 18+), zero runtime styling dependencies.

Features

• 🎨 Design tokens — semantic CSS custom properties (--color-primary, --space-4, --radius-md, …) you can override to theme every component at once.
• 🧩 CSS Modules — no Tailwind, no CSS-in-JS, no runtime style engine.
• 📦 Dual package — ships ESM (.js), CommonJS (.cjs), and .d.ts types.
• ⚛️ React 19 native — ref as a plain prop, no forwardRef.
• ♿ Accessible — built and linted against @storybook/addon-a11y.

Components

Component	Description
Button	Solid / outline / ghost variants across sizes.
TextField	Text input with variants, sizes, and validation states.
Badge	Compact status/label with color and size axes.
Indicator	Positioned dot/count overlay for wrapping elements.
Spinner	Loading spinner with variants and sizes.
Card	Container with Card.Header, Card.Body, Card.Footer.

Installation

npm install @crestline/ui

react and react-dom (>=18) are peer dependencies.

Usage

import { Button, Card } from '@crestline/ui'

// Import styles once, near your app root:
import '@crestline/ui/styles.css'
// Optional — import tokens directly if you want to override them:
import '@crestline/ui/styles/tokens.css'

export function Example() {
  return (
    <Card variant="elevated">
      <Card.Header>Welcome to Crestline</Card.Header>
      <Card.Body>A small, themeable React component library.</Card.Body>
      <Card.Footer>
        <Button variant="solid" color="primary">
          Get started
        </Button>
      </Card.Footer>
    </Card>
  )
}

Theming

Every component reads from semantic token aliases defined in tokens.css. Override them in your own stylesheet to re-theme the whole library:

:root {
  --color-primary: #4f46e5;
  --radius-md: 10px;
}

Repository layout

This is an npm-workspaces monorepo:

packages/ui         → the publishable package (@crestline/ui)
  src/components/   → one folder per component (.tsx, .module.css, .stories.tsx)
  src/styles/       → design tokens (tokens.css)
  src/index.ts      → public API barrel
apps/storybook      → Storybook 10 dev environment

Development

All commands run from the repo root.

npm install              # install workspaces
npm run build            # build the library (tsup → ESM + CJS + .d.ts)
npm run storybook        # run Storybook at http://localhost:6006
npm run build-storybook  # build the static Storybook site

Typecheck (covers stories, which the build does not):

npx tsc -p packages/ui/tsconfig.json --noEmit

Publishing

The package is built with tsup and published from packages/ui (publishConfig.access: public):

npm run build
npm publish -w @crestline/ui

License

MIT