2026/ Case study · Live
Vinyaas
[TypeScript] — [Node.js] — [Next.js] — [Tailwind CSS v4] — [React] — [esbuild] — [Vitest] — [pnpm]
Overview
Components are copied in as code you own, in the shadcn/ui tradition, and cover forms, feedback, layout, navigation, data display, overlays, charts, typography and utilities. Each is independently installable. Works with React, Next.js and Vite projects on Tailwind v4. This portfolio is built with it.
01/ Architecture
A pnpm monorepo: packages/cli is the published CLI, and apps/docs is the Next.js registry + documentation site (the homepage is the component showcase, with an /llm.txt for tools). The registry is built to static JSON under /r, which the CLI fetches.
For each component the CLI fetches the registry item, resolves registry dependencies, installs only the npm packages the project doesn't already declare, writes components/ui/<name>/index.tsx, and applies CSS only when the item declares it.
02/ Implementation
Commands: init, doctor, add (by name or --category, with --dry-run and --force), list, search, info (all with --json), status, and update/upgrade. The package manager is detected from the lockfile — there is no silent npm fallback. CSS variables that already exist with a different value stop the install instead of being overwritten, and env vars are reported, never written.
Every component follows one convention set: native elements first, a shared height scale, semantic colour tokens, and a release-wide accessibility contract (keyboard behaviour, ARIA roles, visible focus rings, reduced-motion support).
03/ Testing
pnpm verify runs typecheck, lint and Vitest tests for both the docs app and the CLI. A release check fails the build if any localhost registry URLs leak into generated JSON before publishing.
04/ Trade-offs
Copy-in source means full ownership and no override API — but upgrades become an explicit vinyaas update that overwrites local edits after confirmation, rather than a version bump.