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 35+ components, 14 hooks, design tokens, and usage patterns.

Claude Code

curl -o CLAUDE.md https://raw.githubusercontent.com/plex-ui/docs/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/docs/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/docs/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/docs/master/packages/ui/AGENT.md

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

Manual download

Download AGENT.md and rename it for your editor.

What your AI editor gets

35+ components — import paths, props, types, defaults, sub-components
619 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
@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]`):
Alert, Avatar, Badge, Button, ButtonLink, Checkbox, CodeBlock, DatePicker,
DateRangePicker, EmptyMessage, FieldError, FloatingLabelInput, Icon, Image,
Indicator, Input, Markdown, Menu, Popover, ProgressSteps, RadioGroup,
SegmentedControl, Select, SelectControl, ShimmerText, Sidebar, Skeleton,
Slider, Switch, Tabs, TagInput, TextLink, Textarea, Tooltip.

**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`, `surface`
- 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"` — 619 icons available
- Dark mode works automatically via CSS `light-dark()` — no extra config needed

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