Phase UI

A modern, accessible, composable React component library built with TypeScript, Tailwind CSS 4, Radix UI, and Effect.js.

Features

• Accessibility first — WCAG 2.1 AA compliant via Radix UI primitives
• Composable — Compound component patterns, not monoliths
• Themeable — CSS custom properties + Tailwind theme for full control
• Type-safe — Strict TypeScript with Effect.js for typed error handling
• Tiny footprint — Tree-shakeable ESM/CJS, zero runtime CSS-in-JS

Tech Stack

• React 19+
• TypeScript 5.x (strict)
• Tailwind CSS 4.x
• Radix UI primitives
• Effect.js
• class-variance-authority (cva)
• tailwind-merge

Getting Started

Install

pnpm add phase-ui

Import styles

import 'phase-ui/styles'

Use components

import { Button, Input, Card } from 'phase-ui'

const App = () => (
  <Card>
    <CardHeader>
      <CardTitle>Sign In</CardTitle>
    </CardHeader>
    <CardContent>
      <Input label="Email" type="email" />
      <Input label="Password" type="password" />
      <Button>Sign In</Button>
    </CardContent>
  </Card>
)

Development

# Install dependencies
pnpm install

# Start Storybook dev server
pnpm dev

# Run unit tests
pnpm test

# Run tests in watch mode
pnpm test:watch

# Run e2e tests (requires Storybook running)
pnpm test:e2e

# Build the library
pnpm build

# Build Storybook
pnpm build:storybook

# Type check
pnpm typecheck

# Lint + format
pnpm lint

Components

Foundation (Tier 1)

• Button, Input, Textarea, Label, Select
• Checkbox, Radio Group, Switch
• Dialog, Popover, Tooltip
• Badge, Avatar, Card, Separator, Skeleton

Essential Patterns (Tier 2 — planned)

• Dropdown Menu, Tabs, Accordion, Toast, Sheet
• Command Palette, Alert Dialog, Table, Form, Progress, Slider

License

MIT