Dinachi

Installation

Get started with DinachiUI using your preferred React framework or setup.

#Quick Start (Any Framework)

If you are using a different framework or want to get started quickly, follow these three steps:

Initialize DinachiUI

Run the init command to set up your project configuration, color theme, and install base dependencies:

npx @dinachi/cli@latest init

Add Components

Install the components you need:

npx @dinachi/cli@latest add button

Or take a whole tier at once. --all is the core library; --motion is the 19 animated components, kept separate because they depend on motion:

npx @dinachi/cli@latest add --all
npx @dinachi/cli@latest add --motion

Naming a motion component installs it on its own, whichever tier flag you use or skip.

Import and Use

Import the installed component and start using it in your project:

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

#Choose Your Framework

Select your framework for a detailed, step-by-step installation guide tailored to your setup.

Next.js

App Router, Server Components, and full-stack React with Next.js.

Vite

Lightning-fast development with Vite, React, and TypeScript.

#What's Next?

Once you have DinachiUI installed, explore these resources to make the most of the library.

Explore Components

Browse the comprehensive component library with live previews and API documentation.

Theming & Colors

Learn about customization, theming, design tokens, and the color system.

AI Skills

Install the Dinachi assistant skill for Codex, Cursor, and Claude Code workflows.