# Creator Plugins UI
> Use when building or modifying plugin UI with @lottiefiles/creator-plugins-ui. Applies when adding React components in src/, using Button/Select/Slider/Dialog/Toast/NumberInput or other library components, setting up Tailwind CSS theming or dark mode, using the cn() utility, troubleshooting Base UI data attributes or missing styles, or updating the plugin UI theme to match Creator's interface theme.
- Skill: `lottiefiles/creator-plugins-ui` (Agent Skill, multi-file: 3 files)
- Install (CLI): `npx skillmds@latest add lottiefiles/creator-plugins-ui`
- Raw SKILL.md: https://api.skillmd.com/api/skills/lottiefiles/creator-plugins-ui/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: lottiefiles (https://skillmd.com/u/lottiefiles)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/lottiefiles/creator-plugins-ui
---
# Creator Plugins UI Library
`@lottiefiles/creator-plugins-ui` — 25 accessible components built on Base UI + Tailwind CSS + CVA. Used in plugin UI code (`src/`) only, not the plugin sandbox.
## Quick Setup
Full guide: `references/setup-guide.md`
```bash
pnpm add @lottiefiles/creator-plugins-ui
```
```typescript
// src/main.tsx — import before local styles
import "@lottiefiles/creator-plugins-ui/styles.css";
```
Components and theme color utility classes (`bg-primary`, `text-foreground`, `border-border`, etc.) work with just `styles.css` — no Tailwind configuration needed.
If you need **additional** custom Tailwind classes beyond what the library provides, set up Tailwind v4:
```bash
pnpm add -D tailwindcss @tailwindcss/vite
```
Add `tailwindcss()` to `vite.config.ts` plugins, create `src/styles.css` with `@import "tailwindcss"`, and use `@theme {}` for custom colors. Do **not** create `tailwind.config.js` or `postcss.config.js` (v3 patterns). See `references/setup-guide.md` for full instructions.
## Import Pattern
```typescript
import { Button, Input, Select, Slider, cn } from "@lottiefiles/creator-plugins-ui";
```
## Available Components
For props, variants, and API details, read the TypeScript types from the installed package — they include JSDoc comments, explicit union types, and default values:
```
node_modules/@lottiefiles/creator-plugins-ui/dist/components/*/
```
**Components:** Button, Input, Label, Select, Slider, NumberInput, DualNumberInput, Checkbox, Toggle, RadioGroup, Tabs, Dialog, Dropdown, Tooltip, SegmentedControl, SearchBar, Toast, Spinner, Separator, Card, Grid, EmptyState, Badge, AIPromptInput, ThemeProvider
**Compound components** (use sub-component composition): Dialog, Select, Dropdown, Tabs, Card, Tooltip, Toast, RadioGroup
## Compound Component Pattern
Compound components (Dialog, Select, Dropdown, Tabs) use sub-component composition. Use `render` prop for polymorphic rendering (**not** `asChild` — this library uses Base UI, not Radix):
```tsx
}>Delete
Delete Layer?This cannot be undone.}>Cancel
```
## Theming
Full guide: `references/theming-guide.md`
Dark mode: add `class="dark"` to `` — `document.documentElement.classList.add("dark")`.
Runtime overrides with ThemeProvider:
```tsx
```
Key CSS variables: `--background`, `--foreground`, `--primary`, `--secondary`, `--destructive`, `--muted-foreground`, `--border`, `--ring`.
## cn() Utility
Use `cn()` from the library (not a local `clsx`) — it includes custom Tailwind merge config for theme colors and font sizes:
```tsx
import { cn } from "@lottiefiles/creator-plugins-ui";
```
## Common Pitfalls
1. **Missing `styles.css` import** — Components render unstyled. Import `@lottiefiles/creator-plugins-ui/styles.css` once in entry file.
2. **Using Tailwind v3 config with v4** — Do not create `tailwind.config.js` or `postcss.config.js`. Tailwind v4 uses `@import "tailwindcss"` + `@theme {}` in CSS and `@tailwindcss/vite` for Vite integration.
3. **Using `asChild` instead of `render`** — Base UI uses `render={}`, not Radix's `asChild` + `Slot`.
4. **Select empty string values** — `""` is reserved for "no selection". Use `"none"` or similar.
5. **NumberInput is controlled only** — Requires `value` + `onChange`. No uncontrolled mode.
6. **Slider value is always an array** — Pass `[50]` not `50`. Callback returns array too.
7. **Toast requires provider** — `useToast()` throws outside ``. Wrap app root.
8. **Dark mode class placement** — `dark` class goes on `` or parent, not on the component.
9. **Wrong `cn` import** — Use `cn` from `@lottiefiles/creator-plugins-ui`, not a local `clsx`.
## Migration from Custom Components
Full before/after examples: `references/setup-guide.md`
1. Replace `@stitches/react` styled components with library components + Tailwind classes
2. Replace `@radix-ui/*` imports with library components
3. Replace `asChild` with `render` prop
4. Replace `data-[state=checked]` → `data-[checked]`, `data-[state=open]` → `data-[open]`, etc.
5. Replace inline colors with CSS variable classes (`text-foreground`, `bg-primary`)
6. Replace custom `cn()`/`clsx()` with library's `cn()`
## Reference Guide
| Reference | Contents |
|---|---|
| `references/setup-guide.md` | Installation, Tailwind config, migration from Stitches/Radix, troubleshooting |
| `references/theming-guide.md` | CSS variables, dark mode, ThemeProvider, custom colors |