v0.3.9 — Open source

@codefast/ui

Production-ready React components with Radix primitives, Tailwind CSS v4, and tree-shakeable imports—explore a live bento below, then dive into every module.

Tweak light, dark, or system mode on the theme page, copy install snippets, and ship accessible UI without reinventing patterns.

Explore components Appearance

Component modules: 62
Components
Color themes: 22
Themes
Custom hooks: 6
Hooks

Interactive

A bento built from the library

Every control in this grid is a real import from @codefast/ui—the same paths you use in your app. Try tabs, fields, and actions; tokens follow your active appearance.

Live playground

Tabs, inputs, switches, and actions from @codefast/ui.

Interactive

Display name

Role

Button variants

DefaultSecondaryOutlineDestructive

Ship consistent UI faster

Compound components and typed variants reduce one-off styles. Reach for the same primitives for dashboards and marketing pages.

Browse all modules

Theme-ready tokens

Switch appearance modes on the theme page. Swap accent palettes by importing a different CSS file—no component rewrites.

Open appearance

Feedback states

Progress and loading patterns use shared tokens so they match light and dark surfaces.

Accessible by default

Built on Radix primitives with keyboard support and sensible ARIA—less rework before you ship.

Tree-shakeable imports

Import only what you render. Each module is a separate entry point.

import { Button } from
'@codefast/ui/button'

TypeScriptTailwind v4

Quick start

Use the package in your project

Three steps: add the dependency, import the CSS preset and a palette, then import components by path.

Install the package

Works with pnpm, npm, or yarn.

pnpm add @codefast/ui

Import the styles

Add preset and a color theme in your global CSS.

/* globals.css */

@import '@codefast/ui/css/preset.css';

@import '@codefast/ui/css/neutral.css';

Use the components

Tree-shakeable entry points per component.

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

<Button>Click me</Button>

Library

What @codefast/ui includes

Opinionated defaults on top of open primitives—suitable for internal tools and customer-facing products alike.

62 Components

A comprehensive set of accessible, composable UI component modules — plus 6 hooks and 4 primitives.

Themeable

22 color themes with light & dark mode support. CSS custom properties make customization effortless.

Performant

Tree-shakeable exports, optimized bundle size, and zero unnecessary re-renders.

Accessible

Built on Radix UI primitives with full WAI-ARIA compliance and keyboard navigation.

Tailwind CSS v4

First-class Tailwind CSS v4 integration with tailwind-variants for type-safe styling.

Composable

Flexible compound component patterns that let you build exactly what you need.

Components

Browse by category

Demos are grouped by role on the Components page. Start from a category or jump straight in—every module has a live example.

Form controls

21 modules

Inputs, selects, validation, calendars, and form composition helpers.

Layout

8 modules

Sidebars, navigation, scroll areas, split panes, and structure primitives.

Actions

4 modules

Buttons, groups, and toggles with multiple variants and sizes.

Overlays

11 modules

Dialogs, sheets, menus, popovers, tooltips, and command palettes.

Data display

11 modules

Tables, cards, charts, tabs, lists, and media-oriented components.

Feedback

7 modules

Alerts, progress, loading states, toasts, and empty states.

Open components

Appearance

Light, dark, and accent palettes

Use this site’s theme page to switch color mode. For brand colors, import one of 22 palette CSS files from the package—the components section includes a theme picker wired to those imports.

Theme & appearance

Stack

Built on familiar tools

React, Radix, Tailwind, and TypeScript—no bespoke runtime beyond what you already adopt.

React 19UI framework

Radix UIPrimitives

Tailwind v4Styling

TypeScriptType safety

Next step

Browse components for interactive examples, or adjust appearance on the theme page before you wire palettes into your codebase.

All components GitHub

Made with care by codefastlabs