Install Wensity in under a minute.

Wensity ships as a CLI and an MCP server for AI coding agents. You don't install a runtime package. The CLI copies real source files into your project, so the code is yours to read, edit, and refactor.

Most component libraries hide behind a versioned npm package. That works until the day you need to bend a component to fit your product, and you're fighting prop APIs, theme contexts and breaking changes shipped on a Tuesday afternoon. Wensity inverts the model: the CLI lands the actual .tsx files in your repo, your linter sees them, your designer can tweak them, and there's no upstream to fight when a redesign happens.

You should be done with the four steps below in well under a minute. After that, every component and primitive is a single command away.

Requirements

Wensity is built for modern React. We test against Next.js 14+ (App Router or Pages), Vite 5+, Remix and Astro, anywhere React + Tailwind v4 are wired up.

1. Initialise Wensity in your project

Run the init command in the root of any Next.js or Vite project. It writes a wensity.json registry and a small utils file (cn helper). For primitive icons, radius, fonts, and control-solid colors, generate a preset in the Create Preset tool and run npx wensity@latest init --preset <code> instead. Use npx wensity@latest apply --preset <code> when wensity.json already exists and you only need to update style + CSS.

pnpm dlx wensity init

npx wensity init

yarn dlx wensity init

bunx wensity init

Plain init refuses to overwrite an existing wensity.json unless you pass --force. Prefer apply --preset for style-only updates on existing projects; init --preset also merges style without rewriting installed component source. The goal of step one is to give the CLI a map of where to write files (and optional primitive style). Nothing more.

2. Install the runtime peers

Wensity components are source-owned after install. They only rely on normal npm packages in your app, never a hidden Wensity runtime.

pnpm add framer-motion clsx tailwind-merge @radix-ui/react-slot

npm install framer-motion clsx tailwind-merge @radix-ui/react-slot

yarn add framer-motion clsx tailwind-merge @radix-ui/react-slot

bun add framer-motion clsx tailwind-merge @radix-ui/react-slot

These four packages cover most components in the library. Motion-heavy components usually use framer-motion; specialized animation or WebGL components may need packages such as gsap, ogl, three, or React Three Fiber. The CLI will tell you exactly which peers a given component needs at install time.

3. Add your first component

The CLI fetches the source for the component you name and drops it into src/components. You own the code from that moment forward.

pnpm dlx wensity add liquid-multimodal-input

npx wensity add liquid-multimodal-input

yarn dlx wensity add liquid-multimodal-input

bunx wensity add liquid-multimodal-input

Every add command is idempotent and safe to re-run. If a component file already exists, wensity add stops instead of overwriting it. Use wensity update <slug> when you intentionally want to replace the local copy, then review the git diff.

Use the same command for primitives, for example wensity add button.

Prefer to let your AI agent do it? With the Wensity MCP server connected, ask Claude Code, Cursor, VS Code, or Codex to "add the liquid multimodal input from Wensity". It shows you every file and dependency first, then installs the same files this command would.

4. Use it anywhere

Import like any local component. No providers, no context, no global config. Just JSX.

Components are typed, side-effect free, and never reach for global state. Drop them in a server component, a client island, a modal, anywhere.

Usage example

import { LiquidMultimodalInput } from "@/components/wensity/liquid-multimodal-input";

export default function Page() {
return (
  <main className="grid place-items-center min-h-screen">
    <LiquidMultimodalInput placeholder="Ask anything…" />
  </main>
);
}

The default install path follows your @/* alias: src/components/wensity for "@/*": ["./src/*"], or components/wensity for "@/*": ["./*"] in a project without src/. You can change it in wensity.json and re-run any add command. The CLI follows the config.

Troubleshooting

Three things go wrong more often than the rest. If something isn't rendering correctly, work through this list before anything else.

What's next

With the CLI wired up, the rest of the library is one command away. Most teams start by browsing the gallery, picking a single hero or input component, and shipping within an hour.

Working with an AI coding agent? Connect the Wensity MCP server and Claude Code, Cursor, VS Code, or Codex can search the library and install components into this project for you, using the same install engine as the CLI.