| name | creator-plugins-ui |
| description | 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.
|
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
pnpm add @lottiefiles/creator-plugins-ui
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:
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 for full instructions.
