Give AI code editors full context about Plex UI components, props, and design tokens

AGENT.md: full component reference

Download a comprehensive reference file that gives your AI editor complete knowledge of all 50 components, 14 hooks, design tokens, and usage patterns.

Claude Code

curl -o CLAUDE.md https://raw.githubusercontent.com/plex-ui/ui/master/packages/ui/AGENT.md

Place CLAUDE.md in your project root. Claude Code reads it automatically on every session.

Cursor

mkdir -p .cursor/rules
curl -o .cursor/rules/plexui.mdc https://raw.githubusercontent.com/plex-ui/ui/master/packages/ui/AGENT.md

Cursor loads rule files from .cursor/rules/ automatically.

Gemini CLI

curl -o GEMINI.md https://raw.githubusercontent.com/plex-ui/ui/master/packages/ui/AGENT.md

Place GEMINI.md in your project root. Gemini CLI reads it automatically.

OpenCode

curl -o AGENTS.md https://raw.githubusercontent.com/plex-ui/ui/master/packages/ui/AGENT.md

Place AGENTS.md in your project root. OpenCode reads it automatically.

Codex

curl -o AGENTS.md https://raw.githubusercontent.com/plex-ui/ui/master/packages/ui/AGENT.md

Codex auto-loads AGENTS.md from the git repo root on every session (up to 32 KiB). For a user-level install that applies to every project, write to ~/.codex/AGENTS.md instead. See the Codex AGENTS.md docs.

For a deeper integration (slash-command skill, auto-invocation, UI metadata), use the Plex UI skill instead.

Manual download

Download AGENT.md and rename it for your editor.

What your AI editor gets

50 components: import paths, props, types, defaults, sub-components
653 icons: import examples and naming conventions
14 hooks: signatures, params, return types
Design tokens: colors, typography, spacing, radius, shadows, motion
9-step control size scale: 3xs through 3xl with pixel values
8 semantic colors: primary, secondary, danger, success, warning, info, discovery, caution
Dark mode: CSS, HTML, and JS setup
Usage patterns: controlled/uncontrolled, composition, forms, sidebar layouts

Quick setup prompt

For a faster setup without downloading a file, copy this prompt into any AI editor:

Install and configure @plexui/ui in this project.

**Step 1: Install**
```bash
npm install @plexui/ui
```

**Step 2: Global stylesheet** (e.g. `main.css` or `globals.css`):
```css
@layer theme, base, components, utilities;
@import "tailwindcss";
@import "@plexui/ui/css";
@source "../node_modules/@plexui/ui";
```

**Step 3: Import the stylesheet before rendering** (e.g. `main.tsx` or `layout.tsx`):
```tsx
import "./main.css";
```

After installation, use Plex UI components like this:
```tsx
import { Button } from "@plexui/ui/components/Button";
import { Input } from "@plexui/ui/components/Input";

<Button color="primary" size="md">Submit</Button>
<Input placeholder="Email" size="md" />
```

**Component reference:**

Available components (import from `@plexui/ui/components/[Name]`):
Accordion, Alert, Avatar, Badge, Button, ButtonGroup, Card, Checkbox, CodeBlock,
DataTable, DateInput, DatePicker, DateRangePicker, Dialog, EmptyMessage, Field,
FieldError, FileUpload, FloatingLabelInput, FloatingLabelSelect, Icon, Image,
Input, InputGroup, Label, Markdown, MarkdownEditor, Menu, OTPInput,
PlexUIProvider, Popover, Progress, ProgressSteps, RadioGroup, SegmentedControl,
Select, SelectControl, Separator, ShimmerText, Sidebar, Skeleton, Slider,
StatCard, Switch, Table, Tabs, TagInput, TextLink, Textarea, Tooltip.
Some modules export differently named components:
- `ButtonLink` and `CopyButton` from `@plexui/ui/components/Button`
- `CircularProgress`, `LoadingDots` and `LoadingIndicator` from `@plexui/ui/components/Indicator`
- `Toaster` and `toast` from `@plexui/ui/components/Toast`
- `Animate`, `AnimateLayout`, `AnimateLayoutGroup`, `TransitionGroup` and `SlotTransitionGroup` from `@plexui/ui/components/Transition`

**Key conventions:**
- `size` prop uses a 9-step scale: `3xs`, `2xs`, `xs`, `sm`, `md` (default), `lg`, `xl`, `2xl`, `3xl`
- `color` prop: `primary`, `secondary`, `danger`, `success`, `warning`, `caution`, `discovery`, `info`
- `variant` prop: `solid`, `soft`, `outline`, `ghost` (each component accepts a subset; check its props)
- Use Tailwind classes alongside components. Plex UI provides semantic color utilities like `text-primary`, `bg-surface`, `border-default`, `text-secondary`
- Icons: `import { IconName } from "@plexui/ui/components/Icon"`, {ICONS_COUNT} icons available
- Dark mode: set `data-theme="dark"` on `<html>` (or call `applyDocumentTheme("dark")` from `@plexui/ui/theme`). Without it the light theme applies; `color-scheme` and `prefers-color-scheme` alone do not switch Plex tokens. Components need no `dark:` classes

Full docs: https://plexui.com/docs

For comprehensive component reference with all props and types, download AGENT.md:
curl -o CLAUDE.md https://raw.githubusercontent.com/plex-ui/ui/master/packages/ui/AGENT.md

Tips

Cursor / Windsurf: Paste the prompt into chat, or save it as a rule file (.cursor/rules/plexui.mdc)
Claude Code: Paste into chat or add to your CLAUDE.md project file
Codex / ChatGPT: Paste into the system prompt or chat

Prefer to install manually? Follow the Installation guide.

Want richer AI integration? Set up the MCP Server for interactive component discovery.

AI Setup