Dinachi

Next.js Installation

Set up DinachiUI in a Next.js project with App Router and Tailwind CSS.

Create Next.js Project

Create a new project:

npx create-next-app@latest my-app

Select the recommended defaults (TypeScript, Tailwind CSS, App Router).

Initialize DinachiUI

npx @dinachi/cli@latest init

This creates components.json, injects the color theme into your CSS, sets up path aliases, and installs base dependencies.

Add Components

npx @dinachi/cli@latest add button input card

Or install every core component:

npx @dinachi/cli@latest add --all

The 19 animated components form a separate tier, since they depend on motion. Add them with --motion, or name one directly:

npx @dinachi/cli@latest add --motion

Use Components

tsx
import { Button } from '@/components/ui/button';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 
export default function HomePage() {
  return (
    <Card>
      <CardHeader>
        <CardTitle>Welcome</CardTitle>
      </CardHeader>
      <CardContent>
        <Button>Get Started</Button>
      </CardContent>
    </Card>
  );
}

Components work in both Server and Client Components. Add 'use client' at the top of files that use hooks or event handlers.