plex-ui

Plex UI

The most flexible UI kit for Figma & React. Production-grade components with pixel-perfect Figma parity.

Documentation • Components • Figma Kit • npm

---

Highlights

• 22,000+ Figma variants across 14 components and 6,600+ icons
• Three-layer token system — primitive, semantic, component — all as Figma Variables
• 9-step unified size scale — 3xs (22px) to 3xl (48px)
• 35 React components — accessible Radix primitives + Tailwind CSS 4
• 14 hooks — useBreakpoints, useScrollable, and more
• Full dark mode — via CSS light-dark() and Figma variable modes
• Built for AI code editors — production-grade building blocks for Claude, Cursor, Codex & AI-driven workflows
• Installable AI skill — one-line setup for Claude Code and Codex, auto-invokes on @plexui/ui

Quick Start

npm install @plexui/ui

/* app/globals.css */
@import "tailwindcss";
@import "@plexui/ui/css";

import { Button } from "@plexui/ui/components/Button";

export function Example() {
  return <Button color="primary" size="md">Get started</Button>;
}

AI coding agents

# Claude Code
/plugin marketplace add plex-ui/docs
/plugin install plex-ui@plex-ui

# Codex
npx degit plex-ui/docs/skills/plexui/skills/plex-ui .agents/skills/plex-ui

See Skills for Cursor, Windsurf, Copilot, and other editors.

Figma Design System PRO

22,000+ meticulously crafted variants built entirely on Figma Variables.

Get the Figma Kit →

Personal	Team	Unlimited
$49	$149	$299
1 designer, 1 project	Up to 5 designers	Unlimited
Lifetime updates	Lifetime updates	Lifetime updates

Development

npm install
npm run dev

Open http://localhost:3000.

License

React library: MIT Figma Kit: Commercial license via plexui.com