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.
React 18+ or React 19
react-dom 18+
TypeScript 5+ for the best typing experience
Tailwind CSS v4
UI Components
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.
# auto-detect framework npx react-principles-cli@latest init # or specify explicitly npx react-principles-cli@latest init -t next npx react-principles-cli@latest init -t vite npx react-principles-cli@latest init -t remix
2. Add components
Components are written to src/components/ui/ by default, configurable via components.json.
# see all available components npx react-principles-cli@latest list # add a single component npx react-principles-cli@latest add button # add multiple at once npx react-principles-cli@latest add button badge card input dialog
UI components require Tailwind CSS v4. Make sure your project has Tailwind configured before running the CLI.