Wensity UI is a React and Next.js component library of animated components, UI primitives, blocks and templates for Tailwind CSS, plus an animated background studio and free design tools. Ship anything from a premium landing page to a production web app.
A pill or icon button ringed in flowing liquid metal, for light and dark pages.
The island becomes Siri.
A React iPhone mockup whose Dynamic Island swells into the Siri orb. Tap it and the pill rounds out into a smoked glass sphere with three strands of colored light folding through it, each carrying its own spectrum, drawn live by a single WebGL shader.
Ask your AI coding agent for a component and it installs the real thing. The Wensity MCP server lets it search every component, primitive and block, check your project, show you a plan, and write the source straight into your codebase, the same way the CLI does.
Free items install with no account. For Pro, run npx wensity login once and the server uses that login, so your token never passes through the model. Pro source goes straight into your files, never the chat, and the project check stays on your machine.
Our Claude design skills teach Claude Code, Codex and Cursor frontend design: exact rules for type, spacing, color, motion and copy. 3 are free, the rest come with Pro, and one command will add skills to Claude Code or any other agent.
The skill that runs the others, and the fix for AI slop websites. Your agent reads the project, writes a short design plan, checks it for generic choices, builds it, then critiques its own work.
Typography
Free
A free typography skill for Claude Code, Cursor and Codex. Your agent sets named text roles, clear size steps, line height, line length and fonts that load without a jump.
UX writing
Free
A free UX writing skill, the copywriting skill your agent is missing. Headings, buttons, error messages and empty states come out plain and specific, so nothing sounds generated.
Landing page
Pro
The landing page skill for Claude Code, Codex and Cursor. Your agent starts with the message, puts the real product in the hero, shows real proof and demonstrates features instead of listing them.
Full sites, ready to own.
Production-ready templates with real source, clean structure, and enough room to make the product feel fully yours.
Fintech Template
RSC-first fintech template with pricing, FAQ, trust sections, and conversion-focused product storytelling. Built on Next 16 + Tailwind v4.
A calm, single-page personal portfolio with a banner quote, story, projects, blog, sponsors, GitHub contributions, tech stack and contact. Customize every field live with the in-page editor pill.
File-based MD/MDX documentation site with generated routes, per-page metadata, sitemap output, sticky navigation, copyable code blocks, and a switchable color palette.
Pick a gradient, shader or texture look from the library, recolour it, stack grain, halftone or glass layers on top, and export it at any aspect ratio for a website hero, a launch video or a social post.
What developers ask about Wensity UI before they install a component or buy Pro.
Wensity UI is a React component library built with Tailwind CSS, for Next.js and any React app. It has 115 React components, 57 UI primitives such as forms, dialogs, menus and date pickers, 87 full page blocks for landing pages and SaaS apps, and 3 Next.js templates. Every install copies typed .tsx source into your project, so you own the code and there is no runtime package to keep updated.
The core is. 38 free React components and all 57 UI primitives are MIT licensed and install with no account or card. Wensity Pro unlocks the other 77 premium components and all 87 blocks for $169 a year, or $199 once as a lifetime license with every future update. Components you have already installed keep working if a yearly plan ends.
Choose Wensity UI when you want one library for both your marketing pages and your product UI, with source code you own. Its 115 components, 57 primitives and 87 blocks all install the same way, as typed .tsx files in your repo with no runtime package and no license check, so nothing breaks if a yearly plan ends. Components never import each other, and each one lists its own npm dependencies. Most animated components show a finished state when a visitor prefers reduced motion, and interactive primitives such as dialogs, menus and selects are built on Base UI, which handles focus, keyboard navigation and ARIA roles. You can build with the free set before you pay anything. The full case is on why teams choose Wensity UI.
Yes. Free components and primitives are MIT licensed. Pro components and blocks come with the Wensity UI Commercial License, which covers unlimited personal, commercial, SaaS and client projects for one developer per license, and you can change the source however you like. What it does not allow is passing the source on as a component library, template, UI kit or public repository. Teams with more than one developer can ask for a seat based plan.
Yes. The components run in Next.js (App Router or Pages Router), Vite, Remix and Astro, and need React 18.2 or newer, TypeScript 5 or newer and Tailwind CSS v4. The free Tailwind CSS components and primitives install from the shadcn registry with npx shadcn@latest add @wensity/<slug>, so they sit next to the shadcn components you already have. Pro components and blocks install with the Wensity CLI: npx wensity@latest add <slug> after npx wensity login, with --type block for a block.
Yes. Wensity has its own MCP server, published on npm as @wensity/mcp, for Claude Code, Cursor, VS Code and Codex. Your agent can search the catalog, check your project, show an install plan and write the files once you approve it. Free items need no account. For Pro, run npx wensity login once in a terminal and the server reads that login, so no API token ever passes through the model.
Yes. Wensity's Claude design skills are 13 skill files that teach an AI coding agent frontend design: type, spacing, color, motion, interface copy, landing pages and app screens. They follow the open Agent Skills format, so the same files work in Claude Code, Codex, Cursor and other agents. Three are free with no account, the rest come with Pro, and one command will add skills to Claude Code or any other agent.
Yes. There are three standalone Next.js templates built with Tailwind CSS: Fintech Template ($99), Docs Site ($59) and Minimalistic Portfolio ($59). Every template is included with Pro, or you can buy one on its own. Each is a complete website you download and deploy, with lifetime updates, and you can open a live preview of every one before you buy. All purchases are final.
Yes. Alongside the component library there are four free design tools that run in your browser: the CSS Gradient Generator, Mesh Gradient Generator, Noise Texture Generator and Halftone Generator. Each one gives you clean code or an image to download, with no account, no watermark and no install. When a design needs motion, layers or video, it opens in Background Studio with one click.
Yes, with Background Studio, Wensity's animated background generator. Start from one of 224 gradient, shader and texture looks, change its colours, layer grain or halftone over it, and pick any aspect ratio. Designing and saving images at canvas size is free, while MP4 video, 2x images and the React component you drop into a Next.js page come with Wensity Pro.
Parth
Founder, Wensity
Still have a question?
Ask about plans, licensing, or templates and you will hear back from me directly.
