Getting Started

Overview

The Retents Design System is a collection of reusable React components built on top of Radix UI primitives and styled with Tailwind CSS. It provides a consistent, accessible, and themeable foundation for building Retents applications.

Features

• 52+ components — From buttons and inputs to complex data tables and sidebars
• Tailwind CSS v4 — CSS-first theming with design tokens
• Dark mode — Built-in light/dark theme support via CSS variables
• Accessible — Built on Radix UI primitives with WAI-ARIA compliance
• TypeScript — Full type safety with React 19
• Tree-shakeable — Import only what you need via subpath exports

Quick Start

pnpm add @retents/ui

@import "tailwindcss";
@import "tw-animate-css";
@import "@retents/ui/tokens.css";
@import "@retents/ui/theme.css";

import { Button } from "@retents/ui/button"

export default function Page() {
  return <Button>Click me</Button>
}