CodeFast

Beautiful, accessible React components — and the type-safe tooling around them.
70+ primitives built on Radix UI and Tailwind CSS 4, designed for React 19.

codefastlabs.com — documentation, live previews, and copy-ready source

---

The flagship package is @codefast/ui: 70+ accessible React components built on Radix UI primitives, styled with Tailwind CSS 4, and fully typed. Around it, this monorepo publishes the supporting @codefast/* packages — variant styling, theming, event tracking, dependency injection, and shared TypeScript configuration.

Browse every component with live previews and copy-ready source at codefastlabs.com.

Quick Start

Install the component library:

pnpm add @codefast/ui

Wire it into your Tailwind CSS 4 stylesheet:

@import "tailwindcss";
@import "@codefast/ui/css/themes/neutral.css";
@import "@codefast/ui/css/preset.css";

Every component ships as its own sub-path import — pull in only what you use:

import { Button } from "@codefast/ui/button";

export function MyPage() {
  return <Button variant="outline">Click me</Button>;
}

Requires React 19 and Tailwind CSS 4. See codefastlabs.com for per-component documentation.

Status: Heading to 1.0

CodeFast is in canary pre-release on the road to 1.0. The canary channel carries the upcoming 1.0 API — the one the documentation site tracks:

pnpm add @codefast/ui@canary

Until 1.0 lands, breaking changes can still ship between canaries. That makes this the best window for API feedback — if a name is confusing, a prop feels awkward, or a component is missing, open an issue or start a discussion before the API locks.

Packages

Package	Description
@codefast/ui	70+ accessible React components built on Radix UI primitives and Tailwind CSS 4
@codefast/tailwind-variants	Type-safe variant styling API — a faster drop-in replacement for tailwind-variants
@codefast/theme	Appearance management for React 19 — optimistic updates, cross-tab sync, FOUC-free SSR
@codefast/tracking	Consent-gated, type-safe event tracking for TanStack Start over a Standard Schema event catalog
@codefast/di	Lightweight dependency-injection primitives for TypeScript (requires Node ≥ 26)
@codefast/cli	Developer CLI for the monorepo (arrange, mirror, tag)
@codefast/typescript-config	Shared TypeScript configuration presets

Repository Layout

Path	Role
apps/ui	Docs and showcase site behind codefastlabs.com (TanStack Start), consuming local package source
examples/tanstack-start	Consumer smoke test — installs the published @codefast/* packages from npm
benchmarks/	Benchmark suites comparing @codefast/* against upstream libraries (pnpm bench)

Development

Prerequisites

• Node.js ≥ 24 (≥ 26 to work on @codefast/di)
• pnpm 11 (pinned via packageManager)

Setup

git clone https://github.com/codefastlabs/codefast.git
cd codefast
pnpm install
pnpm build:packages   # required once before running apps or type-aware lint
pnpm dev              # start all apps and packages in watch mode

Scripts

Command	Description
pnpm dev	Start all apps and packages in development mode
pnpm build:packages	Build only packages/* (run after editing any package source)
pnpm check	Lint + format check + type check (static gate, no fixes)
pnpm check:fix	Lint with --fix + format write
pnpm test	Run tests across the monorepo
pnpm test:coverage	Run tests with coverage reports
pnpm verify	Full gate: build, lint, format, type check, and tests with coverage
pnpm bench	Run the benchmark suites

Linting and formatting run on Oxc (Oxlint + Oxfmt); native TypeScript 7 (tsc) handles both type checking and library builds (emitting .js + .d.ts per file, no bundler), while Vite (Rolldown) bundles the browser apps. Tests follow a strict category taxonomy — see TESTING.md.

Contributing

1. Fork the repository and clone your fork.
2. pnpm install && pnpm build:packages
3. Create a feature branch and make your changes, adding tests where applicable (see TESTING.md).
4. Run pnpm verify from the repo root.
5. Add a changeset (pnpm exec changeset) when a published package changes.
6. Commit following Conventional Commits and open a Pull Request.

Versioning and releases are managed with Changesets.

Security

Please report vulnerabilities privately — see SECURITY.md. Do not open a public issue.

License

MIT