Installation

Add Venti UI to your Next.js project with the CLI scaffold or manually copy the components you need.

Quick scaffold

Recommended

The fastest way to start is with the create-venti-app CLI. It scaffolds a full Next.js project with all components, the theme engine, and Tailwind CSS v4 pre-configured.

Terminal

bash <(curl -s https://raw.githubusercontent.com/duckeydev/VentiUI/main/install.sh) my-app

Or run interactively to choose options:

Terminal

bash <(curl -s https://raw.githubusercontent.com/duckeydev/VentiUI/main/install.sh)

What you get

✓Next.js + TypeScript + Tailwind CSS v4
✓65+ components in components/
✓Utility library (cn(), theme engine) in lib/
✓shadcn-style CSS variables with Coffee light/dark theme

Manual install

If you already have a project, install the required dependencies:

Terminal

npm install framer-motion class-variance-authority clsx tailwind-merge @tabler/icons-react
npm install -D tailwindcss @tailwindcss/postcss

Then copy the files you need from components/, lib/, and app/globals.css into your project.

Peer dependencies

These packages are required at runtime. The scaffold installs them automatically.

react^19.0.0

react-dom^19.0.0

framer-motion^12.0.0

tailwindcss^4.0.0

class-variance-authority^0.7.0

clsx^2.0.0

tailwind-merge^3.0.0

@tabler/icons-react^3.44.0

PostCSS & Tailwind

Venti UI uses Tailwind CSS v4 with the @tailwindcss/postcss plugin. Your postcss.config.mjs should look like this:

postcss.config.mjs

const config = {
  plugins: {
    "@tailwindcss/postcss": {},
  },
};

export default config;

The app/globals.css file imports Tailwind and defines CSS variable tokens for the Coffee theme. The scaffold creates this automatically.

app/globals.css

@import "tailwindcss";

@custom-variant dark (&:is(.dark *));

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-primary: var(--primary);
  /* ... all shadcn-style CSS variable tokens ... */
  --radius-sm: calc(var(--radius) * 0.6);
  --radius-md: calc(var(--radius) * 0.8);
  --radius-lg: var(--radius);
}

:root {
  /* Coffee light theme */
  --background: oklch(0.995 0.008 80);
  --primary: oklch(0.4 0.08 50);
  /* ... */
}

.dark {
  /* Coffee dark theme */
  --background: oklch(0.14 0.015 50);
  --primary: oklch(0.65 0.1 50);
  /* ... */
}

TypeScript setup

Components use the @/* import alias. Ensure yourtsconfig.json includes:

tsconfig.json

{
  "compilerOptions": {
    "paths": { "@/*": ["./*"] }
  }
}

Import components

All components are imported from @/components/<name>. Utility functions live in @/lib/.

Single import

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

Multiple imports

import { Card, CardContent, CardHeader } from "@/components/card";
import { cn } from "@/lib/utils";

With icons

import { IconArrowRight } from "@tabler/icons-react";
import { Button } from "@/components/button";

export default function CTA() {
  return (
    <Button rightIcon={<IconArrowRight className="h-4 w-4" />}>
      Continue
    </Button>
  );
}

Next steps

Browse components

Explore the full catalog of 65+ components with live examples and code snippets.

View components →

Customize themes

Use the Theme Studio to tweak colors, radius, and export your design tokens.

Open Theme Studio →

PreviousComponents Component