Installation

Add the design system to a Next.js project.

Requirements

Next.js 15 or 16 with the App Router
React 19
Tailwind CSS v4
TypeScript (the components ship typed)

1. Initialise

One command sets up everything components need: components.json, the token layer CSS, the cn() helper, and the Providers wrapper.

$ npx @oratiq-js/ui init

No questions asked — the CLI detects your layout (src/ or root) and prints what it chose; override with --ui, --lib, --css. If your Tailwind CSS file already exists, the token layer is written next to it as oratiq-theme.css for you to merge — nothing of yours is overwritten.

2. Add components

Components are copied into your repo, along with everything they depend on. The code is yours after this — edit any line.

$ npx @oratiq-js/ui add button dialog field

The CLI finishes by listing the npm packages to install — typically:

$ npm install radix-ui class-variance-authority clsx tailwind-merge lucide-react

Re-running is safe

add skips files that already exist, so your edits are never clobbered. Pass --overwriteto pull a component's latest version, then review the change with git diff.

3. Wrap your app in the providers

One wrapper supplies theme, writing direction, tooltips, and toasts. Skipping it breaks dark mode and RTL keyboard navigation.

// app/layout.tsx
import { Providers } from "@/components/providers";

export default function RootLayout({ children }) {
  return (
    <html lang="en" dir="ltr" suppressHydrationWarning>
      <body>
        <Providers>{children}</Providers>
      </body>
    </html>
  );
}

suppressHydrationWarning is required

The theme and direction providers both write to <html> before React hydrates. Without the attribute, React logs a mismatch on every load.

4. Use a component

import { Button } from "@/components/ui/button";

export default function Page() {
  return <Button>Get started</Button>;
}

Every component page shows its install command, import line, and full source. For theming, see Theming; for RTL, set dir="rtl" on <html> — everything mirrors from there.

Without the CLI

Every component page has a Source section — copy the file, plus lib/utils.ts and the token layer from the theme registry item, and you're set.

$ curl -s https://ui.oratiq.com/r/theme.json

For AI coding agents

The whole system — conventions, tokens, component index — is published in machine-readable form. Point your agent at it.

$ https://ui.oratiq.com/llms.txt