Components you can actually own.
Every Wensity component is a typed React source file designed to be copied into your app. Use the preview to choose, the CLI to install, and your own git diff to review.
Looking for foundational controls such as Button, Input, Toggle, Dialog, or Breadcrumb? Use the UI Primitives guide and browse /primitives. The /components gallery lists composed product UI only; primitive detail URLs permanently redirect to /primitives/<slug>.
Free vs Pro
Guests, free accounts, and Pro customers can view and install source. These are ideal for testing the workflow in a real app.
Everyone can preview. Source unlocks only for signed-in users with an active component license.
The access flag is part of the registry metadata, so listings can show which items are Pro without exposing implementation details.
Component detail pages
Each detail page is split into Preview and Code.
- Preview is always available and can be opened in a chromeless live-preview route.
- Some composed components include a Playground rail to tune live props before you install. Components without knobs stay preview-only.
- Code defaults to the CLI tab because that is the safest install path for teams.
- Manual source remains available for free components and licensed Pro sessions.
- Locked Pro source is replaced by a paywall overlay and a decorative skeleton, not hidden client state.
Playground is evaluation chrome on the detail page, not something the CLI copies into your repo. Collapse it when you want more preview width; it stays available only on components that ship live controls.
CLI install
Use wensity add <slug> from your project root. Free components fall back to the public registry when you have no token. Pro components require wensity login first.
$pnpm dlx wensity add liquid-multimodal-input
The CLI writes to src/components/wensity by default, rewrites Wensity internal imports to your configured aliases, and installs declared dependencies with your detected package manager.
shadcn install
Free components also ship through shadcn's public registry namespace:
$pnpm dlx shadcn@latest add @wensity/liquid-multimodal-input
The @wensity/<slug> namespace resolves through shadcn's public registry index to the free-only Wensity registry artifacts. Pro components intentionally do not expose source through shadcn; use wensity login and wensity add for licensed installs.
Manual copy
Manual copy is best for teams that want to inspect a component before adding it. The page shows the package install command, the full source file, and the usage snippet.
Manual copy is useful once. The CLI is better for repeatable team workflows because it follows wensity.json, handles helper files, and keeps install paths consistent.
Pro source access
Pro source is served only when the request has a signed-in BetterAuth session with an active component license. Browser source uses /api/registry/<slug>/source; CLI source uses /api/cli/<slug> with a dashboard API token.
$# Browser sessions use cookies.$# CLI sessions use a dashboard token.$pnpm dlx wensity login$pnpm dlx wensity add premium-component-slug
Update workflow
wensity add is conservative: it writes missing files and refuses to replace an existing component copy. Use wensity update <slug> when you explicitly want the latest upstream source.
$pnpm dlx wensity update liquid-multimodal-input
Review the resulting git diff before committing, especially if your team edits installed components directly.
Pick, install, ship
Open the live preview on the detail page and judge motion, layout, and props in context. Screenshots alone are not enough for components with interaction or state.
Run wensity init before your first add in a repo. Use the CLI when you want helpers, dependencies, and paths kept in sync. Use the shadcn tab when you only need a quick free add in an existing shadcn project.
Pro installs need a signed-in license in the browser or an authenticated CLI token. Commit installed files as application code and review the git diff after wensity update before you merge.