v0.3.9 — Open source

@codefast/ui

This site is the living playground for @codefast/ui—browse interactive components, preview light and dark mode, and copy install snippets for your own app.

Radix primitives, Tailwind CSS v4, tree-shakeable exports, and full TypeScript. Package docs focus on what you can ship, not noise.

Explore components Appearance

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

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