Does Wensity UI work with shadcn/ui?

Yes. Free Wensity components are published to a public shadcn registry under the @wensity namespace, so npx shadcn@latest add @wensity/ works in an existing shadcn project. Pro components install through the Wensity CLI or MCP server instead.

Why teams choose Wensity UI

104 components57 primitives77 blocks92 free

A React component library for teams shipping real products in Next.js and Tailwind CSS. Typed source you own, built for production rather than a demo reel, and written so the next developer, or the next AI coding agent, can change it with confidence.

Browse components See pricing

Works with

React
Next.js
TypeScript
Tailwind CSS

What is Wensity UI?

Wensity UI is a React and Tailwind CSS component library that installs production ready, fully typed source into Next.js, Vite, Remix or Astro apps. It covers animated components, the everyday UI primitives an app needs, and full page blocks, in one consistent design language.

There is no runtime package to keep updated. The CLI, the shadcn CLI or the MCP server copies a real .tsx file into your components folder, and from then on it is your code. It is used by developers at large companies and at web development agencies who want the polish of a premium library without handing their front end to someone else's abstraction.

Built with: React 19, TypeScript, Tailwind CSS v4, Framer Motion
Works in: Next.js (App and Pages Router), Vite, Remix, Astro
Library: 104 components, 57 primitives, 77 blocks, 3 templates, across 9 categories
Install: Wensity CLI, shadcn CLI registry, or the Wensity MCP server
You get: Source files in your repo, no runtime dependency on Wensity
Price: 92 free items. Pro is $169 a year or $199 once

A React UI library built for production apps, not demos

A component is production ready when it survives real data, real users and real devices, not just a screenshot.

Plenty of animated components look perfect in a preview with three hand-picked items and fall apart with forty, a long name, a slow phone or a keyboard. Wensity components are built for the screens behind a login as much as for the landing page in front of it: task boards, dashboards, AI chat inputs, pricing and settings.

The Fluid Kanban Board in use. Cards reorder and move between columns with layout animation while the board keeps its state.

Typed end to end

Props, variants and callbacks are TypeScript types you can read, extend and autocomplete.

Controlled or not

Pass a value and onChange to own the state, or let the component manage it.

Responsive

Designed at phone width first, adapts to the space it gets, keeps touch targets usable.

Composable

className and native attributes pass through, so it fits your layout and tokens.

How Wensity keeps components fast and the client bundle small

Motion should cost nothing until someone sees it. Wensity keeps JavaScript to the part of a component that has to move or respond, and stops work the moment it is not visible.

Server rendered

Rendered on the server where they can. The client boundary covers only the piece that animates or handles input.

Paused unseen

WebGL and canvas effects stop off screen or in a hidden tab, cap pixel ratio, and free the GPU on unmount.

Nothing global

No provider, no runtime package, no shared state. Each component is one file you can delete cleanly.

CSS first

Hover and simple transitions are CSS. Framer Motion for springs, GSAP or three.js only when nothing lighter works.

The Siri Orb, a WebGL component, with its props changed live in the playground. When its tab is hidden, the orb stops drawing frames.

Because the client boundary is small, a page built with Wensity stays a server page. Here is the pattern in a Next.js App Router route:

app/page.tsx

// app/page.tsx stays a Server Component. Only the animated
// headline ships JavaScript; the copy around it is plain HTML.
import { UnderlineAnimation } from "@/components/wensity/underline-animation";

export default async function Page() {
  const posts = await getPosts(); // runs on the server

  return (
    <main>
      <h1>Changelog</h1>
      {posts.map((post) => (
        <UnderlineAnimation key={post.slug} href={post.url}>
          {post.title}
        </UnderlineAnimation>
      ))}
    </main>
  );
}

Accessible animated components that respect reduced motion

Every animated Wensity component checks prefers-reduced-motion and, when it is set, shows a calm finished state instead of the movement, while staying fully usable.

Reduced motion

Framer Motion reads useReducedMotion, CSS animation sits behind the media query, WebGL renders a still frame.

Keyboard and focus

Primitives are built on Base UI for focus management, keyboard navigation and correct ARIA roles.

Screen readers

Decorative layers are hidden from assistive technology, so a reader hears the content, not the effect.

That is the difference between motion as decoration and motion that respects the person using the page. Turning off animation in the operating system should never break a layout, hide content or leave a component stuck halfway through a transition.

Source code written for developers and AI coding agents

Every Wensity file opens with a comment that explains how the component works, and every prop carries a line saying what it does and its default.

This matters twice over now that much of the editing is done by Cursor, Claude Code, Codex and Copilot. An agent works from the text in front of it. A component with one file, predictable prop names, written down intent and no hidden layers is one an agent can modify correctly on the first try, instead of guessing at what an undocumented abstraction was meant to do.

components/wensity/underline-animation.tsx

 1/**
 2 * Underline Animation
 3 *
 4 * Animated link underlines in pure CSS. The line is painted as a background
 5 * on the inline element, not a pseudo-element, so it follows the text across
 6 * line breaks: every wrapped line gets its own underline (box-decoration-break
 7 * clone).
 8 *
 9 * Variants:
10 * - slide: draws in from the left on hover and leaves to the right, so the
11 *   line always travels in reading direction.
12 * - center: grows out from the middle and shrinks back into it.
13 * - fill: a thin line at rest that floods up behind the words on hover.
14 * - wavy: a wave that draws in from the left and pulls back to it. The wave is
15 *   an SVG pattern sized in pixels, so it grows in length without stretching.
16 * - gradient: the slide motion with a two-color gradient line.
17 *
18 * Hover, keyboard focus and `active` all show the line, so the current page in
19 * a nav can keep its underline. `rest` keeps a faint line visible at rest, so
20 * links in body copy stay discoverable. Reduced motion shows the line at once.
21 *
22 * The stylesheet is injected once and needs no global CSS or Tailwind config.
23 * It sets no text color, so color classes passed in className always apply.
24 */
25
26export type UnderlineAnimationVariant = "slide" | "center" | "fill" | "wavy" | "gradient";
27
28type UnderlineOptions = {
29  /** Motion and shape of the line. Default slide. */
30  variant?: UnderlineAnimationVariant;
31  /** Line color, any CSS color. Default the text color. */
32  color?: string;
33  /** Gradient start and end colors for the gradient variant. */
34  from?: string;
35  to?: string;
36  /** Line thickness in pixels. Default 2. */
37  thickness?: number;
38  /** Gap between the text and the line in pixels. Default 2. */
39  offset?: number;
40  /** Animation length in milliseconds. Default 420. */
41  duration?: number;
42  /** Keeps a faint line visible at rest, for links in running text. Default false. */
43  rest?: boolean;
44  /** Shows the line permanently, such as the current page in a nav. Default false. */
45  active?: boolean;
46  /** Element to render. Default a link when `href` is set, else a span. */
47  as?: "a" | "span" | "button";
48  href?: string;
49  className?: string;
50  style?: React.CSSProperties;
51  children?: React.ReactNode;
52};

The opening of Underline Animation, exactly as it lands in your project. Read from the shipped file when this page builds.

How it works

The line is a background on the inline element, not a pseudo-element, so it follows text across line breaks.

Each variant

Five variants, each described in a sentence, so choosing one does not require reading the CSS.

The defaults

Thickness, offset and duration state their defaults next to the prop, the first thing anyone changes.

Accessibility

Keyboard focus shows the line and reduced motion shows it at once, written down rather than rediscovered.

Documented props are also live controls. The SVG Fire playground changes color, intensity, flame height and speed, the same props described in its source.

Install with the Wensity CLI, the shadcn registry or the MCP server

Three ways in, one result: a typed source file in your project that you own.

Wensity CLI

Resolves dependencies, writes files where your project keeps components, and applies a saved brand preset.

shadcn registry

Free components are in a public shadcn registry under @wensity, so an existing shadcn/ui project adds them with the CLI it already uses.

MCP server

Your coding agent searches, explains props, shows the files it would write, and installs after you approve. Separate from the shadcn MCP. MCP guide

A real recording of the Wensity CLI in a new Next.js app: whoami confirms the Pro token, then init, add, and the documented header of the file it just installed.

A real Claude Code session with the Wensity MCP server. Asked for an AI chat input, it searches the library, plans the install, waits for approval, then writes the file and its dependencies.

Terminal

# Wensity CLI. Once per project: writes wensity.json and the class helper
npx wensity@latest init
npx wensity@latest add underline-animation
npx wensity@latest add hero-section-with-radial-glow --type block

# shadcn CLI. Free components, through the CLI you already use
npx shadcn@latest add @wensity/underline-animation

# MCP server for Claude Code. Cursor, VS Code and Codex: see /docs/mcp
claude mcp add --transport stdio --scope project wensity \
  -- npx -y @wensity/mcp@0.1.1

Dependency policy: what a component adds to your package.json

56 of 161 components and primitives need no npm package beyond React and the shared class helper.

Declared, not hidden

Every package a component imports is listed in its registry entry, and the CLI installs exactly that list.

No chains

Components never import each other, so adding one never drags in another.

One small helper

A single class helper file, written once, built on clsx and tailwind-merge.

Components, primitives, blocks and templates

161 installable items in 9 categories, plus 77 full page sections, built to look like one product when you use them together.

Components cover agentic AI interfaces, SaaS dashboards, text animation, cinematic interactions and micro interactions. Primitives are the 57 everyday controls an app needs: buttons, inputs, dialogs, menus, tables and date pickers. Blocks are complete hero, pricing, FAQ, contact and footer sections you drop into a page. A small set of templates rounds it out, and the library grows every week.

Grid of Wensity hero section blocks for React and Tailwind CSS, including radial glow, eclipse glow, 3D monolith, animated clouds and black hole heroes — Hero section blocks, each a single section you install with one command and edit like your own code.

How Wensity compares with other React UI libraries

The best React component library is the one that matches what you are building. Each row links to a full, dated comparison checked against the other library's own site.

Library	Best for	Full comparison
Wensity UI	Production apps and landing pages in one design language, with source you own and agent friendly code	This page
shadcn/ui	Free, open code parts to build your own design system	shadcn/ui vs Wensity
React Bits	The largest free set of animated effects	React Bits vs Wensity
Aceternity UI	Bold, attention grabbing landing page effects	Aceternity UI vs Wensity
Magic UI	Free animated effects for launch pages	Magic UI vs Wensity
Motion Primitives	A small open source motion toolkit	Motion Primitives vs Wensity
Tailwind Plus	Static Tailwind blocks, now closed to new customers	Tailwind Plus vs Wensity

If you only need unstyled behaviour and want to design every pixel yourself, a headless library is the better fit. Wensity is for teams who want the finished, polished component and full control of its source.

Is Wensity UI worth paying for?

Start free: 92 items install with no account and no card. Pay when the premium components and blocks would save you more than a few days of building them yourself.

Free

92 components and primitives, with CLI, shadcn and MCP installs.

Pro Annual

$169a year

Every premium component and block, and new releases while active.

Pro Lifetime

$199once

Everything in Pro, forever, including all future updates.

Whichever plan you choose, installed code is yours. There is no licence check inside your app, so components keep working if a yearly plan ends. Private download, lifetime updates on the lifetime plan, and all purchases are final. Full details on the pricing page.

Who builds Wensity UI?

Wensity is a design engineering studio. The same team designs and builds websites and web apps for startups and brands at wensity.com, and the components come out of that client work.

That is why the library leans toward what ships: components get tested on real projects with real content before they are published, and the details that only show up in production, such as long text, slow devices and keyboard users, are already handled. Read more about the company.

Wensity studio website with the headline We craft websites and interfaces for startups and brands, above a row of client work — wensity.com, the studio behind Wensity UI.

Common questions about Wensity UI

Wensity UI is a React and Tailwind CSS component library for Next.js and other React apps. It has 104 components, 57 UI primitives and 77 page blocks, and 92 items are free. Every install copies a typed .tsx file into your project through the Wensity CLI, the shadcn CLI or the Wensity MCP server, so you own and can change the source.

It depends on what you are building. For a full product that needs forms, dialogs and tables alongside polished motion, Wensity UI is built for that case: components are typed, accessible, respect prefers-reduced-motion, keep client JavaScript to the parts that animate, and ship as source you own. If you only need unstyled behaviour, a headless library fits better. If you only need landing page effects, an effects library may be enough.

Yes. Animated Wensity components check prefers-reduced-motion and show a calm, finished state instead of the motion. Interactive primitives are built on Base UI for focus management, keyboard navigation and ARIA roles, and decorative layers are hidden from screen readers.

Yes. Components render on the server where they can, and the client boundary is kept to the part that animates or handles input. You import them into a Server Component page like any other component, and the rest of the page stays server rendered.

Yes, in two ways. The Wensity MCP server lets an agent search the library, read props and dependencies, plan an install and write the files. And the installed source is written to be read: one file per component, a header comment that explains how it works, and a documented line for every prop, so an agent can change it without guessing.

Yes. Free Wensity components are published to a public shadcn registry under the @wensity namespace, so npx shadcn@latest add @wensity/<component> works in an existing shadcn project. Pro components install through the Wensity CLI or MCP server instead.

92 items are free with no account. Wensity Pro unlocks every premium component and block for $169 a year, or $199 once for lifetime access with all future updates. Teams pricing is custom.

Yes. Installed components are plain source files in your repository with no licence check at runtime, so they keep working. An ended yearly plan only stops new premium installs, and the lifetime plan never ends.

Wensity UI is made by Wensity, a design engineering studio that also designs and builds websites and web apps for startups and brands at wensity.com. The components come out of that client work.