Introduction

Plex UI

A production-grade design system with Tailwind 4 styling, CSS variable design tokens, accessible components, and pixel-perfect Figma parity.

Why Plex UI

Production-grade. These components are designed and tested for real products used at scale. Not theoretical, not designed in a vacuum.

9 sizes, not 4. Most libraries give you 3 or 4 size options. Plex UI has a unified 9-step scale (22px to 48px) across Button, Input, Select, SelectControl, and SegmentedControl. One size prop handles everything from dense dashboards to spacious landing pages.

Figma-to-code parity. Every size, color, and token exists identically in Figma and in React. No translation layer, no manual tweaks.

What's included

• Design tokens. Three-layer architecture (primitive, semantic, component) via CSS variables. Light and dark themes out of the box.
• Tailwind 4. Pre-configured with Plex UI tokens so utility classes stay consistent with the component library.
• Components. Buttons, inputs, menus, selects, sidebars, date pickers, segmented controls, and more. Built on Radix primitives for accessibility and keyboard support.
• Icons. A comprehensive icon set included out of the box.
• Transitions. Five motion primitives for enter/exit animations and layout transitions.
• Hooks. Dark mode, responsive breakpoints, media queries, and other utilities.

Quick start

Install the package and add the foundation styles to your app:

npm install @plexui/ui

In your global stylesheet (e.g. main.css):

@import "tailwindcss";
@import "@plexui/ui/css";
@source "../node_modules/@plexui/ui";

Import your stylesheet before rendering, then use any component:

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

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

For full setup (including optional router integration and provider), see Installation.

Get started