Plex UI
Figma Kit

Plex UI for Figma & React

The design system that works in Figma and in your AI editor

Professional Figma library with Variables, 9-size scale, and dark mode. Production-grade React components that Claude, Cursor, and Codex actually follow.

Set up for AI codingGet the Figma Kit

New

Figma Bridge for ANY AI model

Any model can now draw your idea directly in Figma, read components/tokens/layout, and continue design ↔ code in one loop. Different principle from official Claude-only flow: more freedom, faster iteration.

Open BridgeInstall in 2 min

Free React library on npm. Paid Figma kit with lifetime updates.

22,000+Figma variants
35Components
6,600+Icons
9Sizes per control

Built on

Radix UITailwind CSS 4React 19TypeScriptFigma Variables

Why Plex UI

Designers get a professional Figma library. Developers and AI editors get production-grade React components.

Your Figma file is the source of truth

Variables, auto-layout, 9 sizes per component, and a three-layer token system. Every design decision is encoded, not eyeballed. Change one variable, update everything.

Not locked into one aesthetic

Most kits hardcode their look. Plex UI's semantic token layers let you re-theme without detaching components. Switch brands, go dark mode, or build a white-label product.

Ship without translating designs

Every Figma component has an identical React counterpart. Same sizes, same tokens, same dark mode. Import the component, pass your props, deploy.

Set up for AI codingGet the Figma Kit
ClaudeCursorCodexAntigravity

AI without a design system is just fancy copy‑paste

You describe a page, the model writes the code, you deploy. Sounds great until you look at what it actually produced.

A button is 36px tall on one page and 42px on the next. The spacing is different in every section. Colors are hardcoded hex values that nobody chose on purpose. Every prompt generates a fresh set of magic numbers, because the model has nothing to anchor to.

You wouldn't let an intern commit raw SQL strings into every endpoint. You'd give them guardrails. The same logic applies to AI-generated UI. Without a shared foundation, every output is a one-off.

Plex UI is that foundation. Design tokens, semantic layers, accessible components. One source of truth the model follows on every prompt, so every page it generates looks like it belongs to the same product.

Set up for AI coding

See the difference

Same prompt, two outputs. One relies on magic numbers. The other uses a real design system.

Without a design system
// AI-generated — no design systemexport function SettingsPage() {  return (    <div style={{ padding: "24px" }}>      <h1 style={{ fontSize: "20px", fontWeight: 600 }}>        Settings      </h1>      <label style={{ display: "block", marginTop: "16px" }}>        <span style={{ fontSize: "14px", color: "#6b7280" }}>          Name        </span>        <input          style={{            width: "100%",            padding: "8px 12px",            border: "1px solid #d1d5db",            borderRadius: "6px",            marginTop: "4px",          }}        />      </label>      <button        style={{          marginTop: "20px",          padding: "10px 20px",          background: "#2563eb",          color: "#fff",          borderRadius: "8px",        }}      >        Save changes      </button>    </div>  );}
With Plex UI
// AI-generated — with Plex UIimport { Button } from "@plexui/ui/components/Button";import { Input } from "@plexui/ui/components/Input";import { Field } from "@plexui/ui/components/Field";export function SettingsPage() {  return (    <div className="p-6">      <h1 className="text-xl font-semibold">Settings</h1>      <Field label="Name" className="mt-4">        <Input size="md" />      </Field>      <Button color="primary" size="md" className="mt-5">        Save changes      </Button>    </div>  );}

Four sizes is not enough

Most kits ship 3 to 5 sizes per control. That's fine for a landing page, but admin panels, dense dashboards, and compact toolbars need more. Plex UI gives every control 9 sizes on one shared scale. One prop, zero overrides.

size
Browse Components

How Plex UI compares

See how Plex UI compares to other popular design systems.

Figma variants

Plex UI

22,000+

shadcn

~200

Untitled UI

8,000+

Size scale per component

Plex UI

9 sizes

shadcn

3 to 4 sizes

Untitled UI

4 to 5 sizes

Three-layer token system

Plex UI

shadcn

Untitled UI

All tokens as Figma Variables

Plex UI

shadcn

Untitled UI

React component library

Plex UI

shadcn

Untitled UI

Figma ↔ code parity

Plex UI

shadcn

Untitled UI

Built for AI code editors

Plex UI

shadcn

Untitled UI

Dark mode via variables

Plex UI

shadcn

Untitled UI

Custom icon library

Plex UI

6,600+

shadcn

Untitled UI

2,000+

Pricing

Plex UI

From $49

shadcn

Free

Untitled UI

From $79

shadcn/ui is great if you want free, unstyled primitives and will build your own system. Untitled UI has a strong Figma library and a React library, but the two aren't built as a single system. Plex UI is for teams that need both: a professional Figma system and production-grade React components that stay in sync.

Get the Figma Kit

Get the Figma Design System

22,000+ production-ready variants, a three-layer token system, and full Figma Variables from day one. Pay once, get lifetime updates.

The React library is free and open-source. These plans are for the Figma design system. A free starter is also available.

Community

Free
$0

Explore Plex UI in Figma

Get Free Kit
  • Core Figma components
  • Figma Variables
  • Dark & light themes
  • Auto-layout

Personal

Launch price
$49$79one-time

1 designer, 1 project

Get Personal
  • 22,000+ Figma variants
  • 15,700+ component variants
  • 6,600+ icons (custom + Tabler)
  • Three-layer token system (primitive → semantic → component)
  • All tokens as Figma Variables
  • Dark & light themes via variables
  • Auto-layout & responsive constraints
  • Lifetime updates
Most popular

Team

Launch price
$149$249one-time

Up to 5 designers, unlimited projects

Get Team
  • 22,000+ Figma variants
  • 15,700+ component variants
  • 6,600+ icons (custom + Tabler)
  • Three-layer token system (primitive → semantic → component)
  • All tokens as Figma Variables
  • Dark & light themes via variables
  • Auto-layout & responsive constraints
  • Lifetime updates
  • Priority support

Unlimited

Launch price
$299$499one-time

Unlimited designers & projects

Get Unlimited
  • 22,000+ Figma variants
  • 15,700+ component variants
  • 6,600+ icons (custom + Tabler)
  • Three-layer token system (primitive → semantic → component)
  • All tokens as Figma Variables
  • Dark & light themes via variables
  • Auto-layout & responsive constraints
  • Lifetime updates
  • Priority support
  • White-label OK

Delivered as a Figma file. Duplicate to your workspace and start designing. The React library (@plexui/ui) is always free on npm. Compare Plex UI vs shadcn/ui and Plex UI vs Untitled UI.

Frequently asked questions

It's a native Figma file. After purchase you'll receive a link. Click "Duplicate to your drafts" and the full file with all pages, components, variables, and tokens will be copied to your Figma workspace.

All plans include lifetime updates. When we release a new version we'll notify you by email. Open the same link again and duplicate the updated file. Your existing local copy stays untouched.

Yes. All plans allow you to use the design system in commercial products. The Unlimited plan also permits white-labeling, so you can remove Plex UI branding and redistribute the system as part of your own product or agency deliverables.

Personal is for solo designers working on a single project. Team supports up to 5 designers on unlimited projects with priority support. Unlimited removes all seat and project restrictions and includes white-label rights.

The React library (@plexui/ui) is open-source and free on npm. The Figma Kit is the paid product. It gives you the full design system with all 22,000+ variants, variables, and tokens that match the React components pixel-for-pixel.

No. The React library (@plexui/ui) is free and open-source. Install it from npm and start building. The Figma kit is a separate paid product for designers who want the full visual system with all 22,000+ variants, variables, and token layers.

Install @plexui/ui from npm and add the CSS import to your global stylesheet. The AI will recognize component names and props automatically. See the installation guide for the full setup.

Every value in the kit flows through three layers: primitive tokens (raw colors, spacing, radii), semantic tokens (purpose-based aliases like "text-primary" or "bg-surface"), and component tokens (scoped to each component like "button-bg-solid"). Change one variable and the entire system updates.

AI code editors can write code, but they need proper building blocks to produce professional interfaces. Plex UI provides production-grade, well-structured components with consistent naming, a clear token system, and comprehensive props. Unlike unstyled primitives or limited kits like shadcn, Plex UI gives AI the full vocabulary to design real products.

Start building with Plex UI

Install @plexui/ui in 30 seconds. Professional Figma kit from $49.

Set up for AI codingGet the Figma Kit