Installation
Three ways to add Kaeyros UI to your project: scaffold a new app via CLI, copy individual components, or download the entire library.
CLI scaffold
Spin up a complete Next.js project from a template.
Read howDownload zip
Grab the entire `components/kaeyros/` folder as a single zip.
Read howCopy a component
Click the Copy button on any code block in the library.
Read howPrerequisites
Kaeyros UI components are built on a Next.js + Tailwind + shadcn-style stack. Your project should have:
- Next.js 14+ (App Router) or any React 18/19 framework
- Tailwind CSS 3.4+ with the standard
--primary,--card,--mutedCSS variables exposed - A
cn()helper at@/lib/utils(usesclsx+tailwind-merge)
Required peer dependencies
bashnpm install class-variance-authority clsx tailwind-merge lucide-reactFor specific components you may also need:
bash# Radix primitives (when using Radix-based components)
npm install @radix-ui/react-slot @radix-ui/react-dialog
# Form state
npm install react-hook-form @hookform/resolvers zod
# Charts (only if you import the recharts wrapper from chart.tsx)
npm install recharts
# Toasts
npm install sonner1. CLI — Scaffold a complete project
Best for new projects. The CLI creates a Next.js app with all dependencies, Kaeyros components installed, a chosen template wired up.
bashnpx kaeyros-ui@latest initOr pick a template directly:
bashnpx kaeyros-ui@latest init --template oim-platform --name my-app
cd my-app
npm run dev2. ZIP — Drop the folder into your project
Use this when you have an existing project and want every component available immediately. The zip includes the components/kaeyros/ folder and a README.
After downloading, unzip into your project root:
bashunzip kaeyros-ui-components.zip -d ./
# Creates:
# components/kaeyros/ — all Kaeyros components
# lib/utils.ts — cn() helper
# README.md — quick reference3. Copy — One component at a time
Best when you want only a couple of components. Open any component page in the library, click the Copy button on a code block, paste into your project.
bash# Or download a single file directly:
curl https://kaeyros-ui.app/api/component/button > components/kaeyros/button.tsxReplace the URL with your deployment domain.
Project structure
After installation, your project should look like this:
textmy-app/
├── app/
│ └── (your routes)
├── components/
│ └── kaeyros/ # ← All UI components live here
│ ├── button.tsx # KaeyrosButton + shadcn Button
│ ├── input.tsx
│ ├── data-table.tsx # KaeyrosDataTable + DataTable
│ ├── chart.tsx # KaeyrosChart + recharts wrapper
│ ├── confirm-dialog.tsx
│ └── ... (190+ files)
├── lib/
│ └── utils.ts # cn() helper
├── tailwind.config.ts
└── package.jsonTailwind configuration
Make sure tailwind.config.ts includes components/**/*.{ts,tsx}:
tsimport type { Config } from 'tailwindcss'
const config: Config = {
darkMode: ['class'],
content: [
'./app/**/*.{ts,tsx}',
'./components/**/*.{ts,tsx}', // ← include kaeyros folder
],
theme: {
extend: {
colors: {
border: 'hsl(var(--border))',
input: 'hsl(var(--input))',
ring: 'hsl(var(--ring))',
background: 'hsl(var(--background))',
foreground: 'hsl(var(--foreground))',
primary: {
DEFAULT: 'hsl(var(--primary))',
foreground: 'hsl(var(--primary-foreground))',
},
// ... see /library/theming for the full list
},
},
},
}
export default configVerify it works
Drop this into any page to confirm the install:
tsximport { KaeyrosButton } from '@/components/kaeyros/button'
export default function HelloWorld() {
return (
<div className="p-8 space-y-3">
<h1 className="text-2xl font-bold">Kaeyros UI works!</h1>
<div className="flex flex-wrap gap-2">
<KaeyrosButton severity="primary" label="Primary" />
<KaeyrosButton severity="success" raised label="Success" />
<KaeyrosButton severity="danger" rounded variant="outlined" label="Danger" />
</div>
</div>
)
}