Plex UI

Design system for React and Vue, built for AI agents.

Docs · Components · Vue guide · Changelog

Why Plex UI

• 50 accessible components with one 9-size scale (3xs to 3xl) across every control
• React and Vue render the same markup from the same CSS, checked by parity tests
• Design tokens in three layers (primitive, semantic, component) with dark mode
• Built for Claude and Codex: MCP server, agent skill, llms.txt and a shadcn registry

Packages

Package
@plexui/ui	React 19 components on Radix
@plexui/vue	Vue 3 components on Reka UI, same API
@plexui/styles	Shared tokens and component CSS
@plexui/mcp	MCP server with the component API for AI agents

Quick start

React

npm install @plexui/ui

@layer theme, base, components, utilities;
@import "tailwindcss";
@import "@plexui/ui/css";
@source "../node_modules/@plexui/ui";

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

<Button color="primary">Ship it</Button>

Vue

npm install @plexui/vue @plexui/styles

@layer theme, base, components, utilities;
@import "tailwindcss";
@import "@plexui/styles/css";
@source "../node_modules/@plexui/vue";

<script setup lang="ts">
import { Button } from "@plexui/vue/components/Button"
</script>

<template>
  <Button color="primary">Ship it</Button>
</template>

Requires Tailwind CSS 4. Full setup, including the Vite plugin and SSR: Installation, Vue guide.

AI agents

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

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

Also: MCP server, llms.txt, and the shadcn registry (npx shadcn@latest add https://plexui.com/r/button.json, Vue: https://plexui.com/r/vue/button.json).

Contributing

npm install
npm run dev          # docs site
npm run test:parity  # React vs Vue parity tests

Contributing guide · Issues · Discussions · Security

License

MIT