Installation
Scaffold Plannar in your project with a single command.
plannar init scaffolds everything you need to start writing plans.
Prerequisites
- Node.js 18 or later
- A project directory (any project)
Quick install
npx plannar@latest initThis creates .plannar/ in your current directory:
| File | Purpose |
|---|---|
components.json | shadcn/ui configuration (Tailwind v4) |
package.json | npm package (enables npx shadcn add) |
tsconfig.json | TypeScript config with @/* alias |
lib/utils.ts | cn utility (clsx + tailwind-merge) |
node_modules/.plannar-junk.css | Dummy CSS target so shadcn's CLI is satisfied |
plans/hello-world.mdx | Sample plan with state binding |
components/ui/button.tsx | Pre-installed Button component |
Init runs npx shadcn@latest add button and then npm install so the sample plan works immediately. The node_modules/.plannar-junk.css file is why components.json points tailwind.css into node_modules/ — Plannar manages styling itself, but shadcn's CLI requires a CSS target to exist. Config is not scaffolded — create a plannar.config.{js,ts,json} at your project root to customize.
Adding components
npx shadcn@latest add card tabs accordion sliderComponents are imported with @/components/ui/... alias and work inside Playground blocks.