SteezUI — themed UI components

A small, themeable React UI kit (shadcn-like) with pre-styled components and CSS tokens. Extracted from the Chronicle monorepo.

Features

• Lightweight: React-only, no Tailwind dependency
• Theme tokens via CSS variables (common, pixel, cyberpunk)
• Prebuilt components: Button, Input, Card, Modal, Select, Tabs, Switch, Table, etc.
• ESM + types

Install

Workspace/root:

pnpm add @steez/ui

Peer deps:

• react >= 18
• react-dom >= 18

Usage

Inject tokens (example using inline style):

import { themeCss } from '@steez/ui'

export function AppRoot() {
  return (
    <>
      <style>{themeCss('common')}</style>
      {/* your app */}
    </>
  )
}

Use components:

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

export function Example() {
  return (
    <Card>
      <Button onClick={() => alert('hi')}>Click me</Button>
    </Card>
  )
}

Switch themes at runtime by re-injecting themeCss('<key>') or toggling a scoped container.

Build

pnpm run build

Outputs ESM and types to dist/.

Contributing

See CONTRIBUTING.md for details on development, coding standards, and how to propose changes. Please note we follow a Code of Conduct (see CODE_OF_CONDUCT.md).

Docs & Storybook

• Docs (Starlight): pnpm run docs:dev → http://localhost:4322
  • Accessibility: see A11y notes and ARIA cheatsheet
• Storybook: pnpm run storybook → http://localhost:6007 (a11y addon enabled)
• Run both: pnpm run dev:all; open both: pnpm run open:all; stop: pnpm run dev:stop; stop-all: pnpm run dev:stop:all

Publishing

This repo is initialized but private. To publish:

1. Remove "private": true in package.json
2. Choose a version (semver)
3. Login: pnpm npm login
4. Publish: pnpm publish --access public

Optionally adopt Changesets or semantic-release for automated versioning.

License

MIT © contributors