Installation

UI components are installed directly into your project via the CLI — similar to how shadcn/ui works. You own the source, so you can customize freely.

Requirements

Make sure your project meets the following requirements before running the CLI.

check_circle

Node.js 18+

check_circle

React 19+

check_circle

react-dom 19+

check_circle

TypeScript 5+ for the best typing experience

check_circle

Tailwind CSS v4

UI Components

v0.1.1

Components are copied directly into your codebase with all dependencies resolved automatically.

1. Initialize your project

Creates components.json and installs the cn() utility. Auto-detects your framework and tsconfig path aliases.

terminal
# auto-detect framework
npx react-principles@latest init

# or specify explicitly
npx react-principles@latest init -t next
npx react-principles@latest init -t vite
npx react-principles@latest init -t remix

2. Add components

Components are written to src/components/ui/ by default, configurable via components.json.

terminal
# see all available components
npx react-principles@latest list

# add a single component
npx react-principles@latest add button

# add multiple at once
npx react-principles@latest add button badge card input dialog
React Principles