Prerequisites

Before installing FivFold, ensure your project meets these requirements:

Node.js 20 or later

FivFold requires a modern Node.js runtime. Check with node -v.

React 18+ or Next.js project

FivFold UI targets React 18 and above. Next.js 14+ with App Router is fully supported.

Tailwind CSS v4

Add @import "tailwindcss" to your global CSS. No config file needed for FivFold themes.

shadcn/ui

Initialize shadcn/ui first with npx shadcn@latest init. FivFold Kits are built on shadcn primitives.

UI package

The FivFold UI CLI adds frontend Kits to your project. Run init first to configure FivFold and set up themes.

Initialize FivFold

npx @fivfold/ui init

The init command detects existing shadcn/ui, prompts for theme preferences, creates fivfold.json, and configures your global CSS. Then add Kits with:

Add an Kit

npx @fivfold/ui add <kit-name>

What add does

The add command installs npm dependencies, runs npx shadcn@latest add for required primitives, copies the Kit template to your configured kits path, and applies theme variables if needed.

API package

For backend scaffolding, use the FivFold API CLI. Initialize with your preferred stack:

Configure backend stack

npx @fivfold/api init

You will be prompted for framework, ORM, database, and output directory. Configuration is saved to fivfold.json. Use flags to skip prompts:

--yes / -y — Use smart defaults, bypass all prompts
--dry-run — Show intended changes without writing files
--framework=... — Framework choice
--orm=... — ORM choice
--provider=... — Auth provider (when applicable)

Add an API module

npx @fivfold/api add <module-name>

Shared config

Both UI and API CLIs read from the same fivfold.json. Run @fivfold/ui init first if you use both; the API init will merge its config into the existing file in a monorepo setup.

Verification

Run the setup command to verify your environment:

Check requirements

npx @fivfold/ui setup

This reports whether shadcn/ui and fivfold.json are present, and prints quick-start commands.