v0.3.9 — Open Source

@codefast/ui

A modern, accessible, and beautifully crafted React component library built with Radix UI and Tailwind CSS.

62 component modules. 6 custom hooks. 22 color themes. Dark mode. Full TypeScript support. Designed for the modern web.

Explore Components Browse Themes

Get Started in Seconds

Install the package and start building beautiful interfaces.

1. Install the package

pnpm add @codefast/ui

2. Import the styles

/* globals.css */

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

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

3. Use the components

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

<Button>Click me</Button>

Why @codefast/ui?

Everything you need to build polished, production-ready applications.

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.

Component Library

A rich set of components organized into intuitive categories.

Form Controls

Input, InputNumber, InputPassword, InputSearch, InputOTP, InputGroup, Textarea, Select, NativeSelect, Checkbox, CheckboxGroup, CheckboxCards, Radio, RadioGroup, RadioCards, Switch, Slider, Calendar, Label, Field, Form.

Layout

Sidebar, NavigationMenu, Breadcrumb, Separator, Resizable, ScrollArea, AspectRatio, Collapsible.

Actions

Button, ButtonGroup, Toggle, ToggleGroup with multiple variants and sizes.

Overlays

Dialog, AlertDialog, Drawer, Sheet, Popover, Tooltip, DropdownMenu, ContextMenu, HoverCard, Menubar, Command.

Data Display

Table, Card, Badge, Avatar, Tabs, Accordion, Chart, Carousel, Pagination, Item, Kbd.

Feedback

Alert, Progress, ProgressCircle, Spinner, Skeleton, Sonner (toast), Empty.

View All Components

Theming Made Simple

22 built-in color themes with light and dark mode. Switch themes with a single CSS import.

Neutral

Slate

Zinc

Stone

Gray

Red

Orange

Amber

Yellow

Lime

Green

Emerald

Teal

Cyan

Sky

Blue

Indigo

Violet

Purple

Fuchsia

Pink

Rose

Light

Dark

System

Explore Themes

Built On Modern Foundations

Standing on the shoulders of best-in-class libraries.

React 19UI Framework

Radix UIPrimitives

Tailwind v4Styling

TypeScriptType Safety

Ready to Build?

Explore the component library, pick a theme, and start crafting your next project.

Component Showcase GitHub

Made with care by codefastlabs