Getting Started with Quinkit UI
Install the component library, load global CSS tokens, pair base themes with palette presets, and build production web apps in minutes.
System Requirements
Supports React 18 & 19 Server/Client Components.
Compatible with App Router & Turbopack builds.
Requires Node.js 18.0.0 or higher.
Install Package
Add the core package. Most components (Button, Input, Dialog, Card, …) work with this alone:
pnpm add @quinkit/uinpm install @quinkit/uiOptional Feature Peers
A few specialized components keep heavy engines out of the default install. Add the matching peer only when you use that feature:
pnpm add @quinkit/ui react-day-pickerpnpm add @quinkit/ui @tanstack/react-tablepnpm add @quinkit/ui react-hook-formpnpm add @quinkit/ui cmdkpnpm add @quinkit/ui sonnerImport Styles & CSS Tokens
Import the main `@quinkit/ui/styles` sheet once at your application root (e.g. `app/layout.tsx` or `src/main.tsx`):
import "@quinkit/ui/styles";Render Components
Import primitives directly from `@quinkit/ui` with zero setup configuration needed:
import { Button } from "@quinkit/ui";Apply Themes & Palettes
Set `data-theme` and `data-palette` attributes on your root <html> or container element:
/* Next.js Root Layout */
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html lang="en" data-theme="dashboard" data-palette="default-blue" className="dark">
<body>{children}</body>
</html>
);
}Tailwind CSS v4 Integration
If using Tailwind CSS v4, import styles directly in your main CSS file:
@import "tailwindcss";
@import "@quinkit/ui/styles";Troubleshooting & FAQs
Calendar / DataTable / Form missing module?
Those components need optional peers (`react-day-picker`, `@tanstack/react-table`, `react-hook-form`, `cmdk`, or `sonner`). Install the peer listed on that component's docs page.
Components look unstyled?
Ensure `import "@quinkit/ui/styles"` is included at your app root before any component imports.
Dark mode not applying?
Add `className="dark"` to your <html> element alongside `data-theme` and `data-palette`.