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
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
