Installation

DaFink UI ships as source, not a package. There is no runtime dependency to install: the CLI copies source files directly into your project so you own the code entirely.

Requirements

  • React: 18 or later
  • TypeScript: 5 or later (recommended)
  • Tailwind CSS: v4
  • Node.js: 18 or later (for the CLI)

Steps

Choose your package manager

Create a Next.js project (skip if you have one)

npx create-next-app@latest my-app --typescript --tailwind --eslint

DaFink UI requires React 18+ and Tailwind CSS v4. Any React framework works; Next.js is not required.

Install Tailwind CSS (if not already installed)

npm install tailwindcss @tailwindcss/postcss postcss

Run the DaFink UI initialiser

npx dafink-ui init

This writes dafink.config.json and generates dafink-ui.css with your chosen design tokens, then imports it into your CSS file. It also adds a @components/* path alias to your tsconfig.json (or jsconfig.json), pointing at wherever your components directory is configured, so example imports work the same regardless of that setting.

Add components

npx dafink-ui add button

Each add command copies the component source into src/components/ui/ and installs any required npm dependencies automatically. You can add multiple at once:

npx dafink-ui add button input card form

Import and use

import { Button } from '@components';

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

Every component example in these docs imports from @components, the barrel file dafink-ui add regenerates on every run, pointing at the alias dafink-ui init configured in the previous step.

Upgrading

DaFink UI has no runtime dependency to bump, since the CLI copies source straight into your project. Upgrading means pulling fresh copies of the files you want updated, not running an install command.

Check the changelog

Components aren't individually versioned, so the changelog is the only source of truth for what changed and whether it's breaking.

Re-add a component to update it

npx dafink-ui add button

Running add again copies the latest source over the existing file at that path.

Refresh tokens and config

npx dafink-ui init

Re-running init regenerates dafink-ui.css and dafink.config.json from whatever style and palette you choose, picking up any new design tokens.