@tc96/ui-react

A modern, accessible React component library for product teams

✨ Overview

• Themeable: Consistent UI powered by Tailwind v4 tokens (OKLCH color space)
• Accessible: Built on Radix UI primitives with WCAG AA compliance and a11y testing
• Type-safe: Typed variants with CVA for predictable APIs and excellent DX
• Tree-shakeable: Dual ESM/CJS builds via Vite, optimized bundle size
• Tested: Comprehensive Storybook stories with Vitest interaction tests

Installation

pnpm add @tc96/ui-react

Quick Start:

// 1. Import styles (once in your app entry)
import '@tc96/ui-react/dist/styles.css'

// 2. Use components
import { Button, Badge, Avatar } from '@tc96/ui-react'

export default function App() {
  return (
    <div>
      <Avatar src="/user.jpg" fallback="JD" />
      <Badge variant="success">Active</Badge>
      <Button variant="primary">Get Started</Button>
    </div>
  )
}

Development

# Install dependencies
pnpm install

# Start Storybook dev server
pnpm dev

# Run tests
pnpm test
pnpm test-storybook

# Type checking
pnpm check:type

# Lint & format
pnpm lint:fix

# Build library
pnpm build

Project Structure:

src/
├── components/ui/     # UI components with CVA variants
├── stories/           # Storybook stories & interaction tests
├── styles/            # Tailwind v4 design tokens
└── index.ts           # Public exports

dist/                  # Build output (ESM, CJS, types, CSS)

Contributing

Contributions are welcome! Please:

1. Check existing issues or create a new one
2. Fork the repository and create a feature branch
3. Run pnpm check:type and pnpm lint:fix before submitting
4. Submit a Pull Request with a clear description

License

MIT License - see LICENSE for details.