Introduction
Plum UI is a set of animated, accessible React components you copy into your app. Built on Radix, Tailwind CSS v4 and Motion, installed with its own CLI.
This is not a component library you depend on. It's a collection of well-made pieces you take ownership of. Run npx @plumsydev/plum-ui add, and the component lands in your repo as a readable file. Every piece is animated by design, keyboard accessible, themed by a single CSS file — and yours to change.
Principles
You own the code
Components are copied into your project, not installed from a package. Read them, fork them, delete what you don't need.
Motion with intent
Every animation communicates state — where something came from, what changed, what's next. Nothing moves just to move.
Accessible by default
Built on Radix primitives: focus management, keyboard navigation and ARIA come for free, and reduced motion is respected.
Tokens, not magic
A single CSS file of OKLCH tokens drives every color, radius, shadow and easing. Change the brand in one line.
72 components
Inputs
Overlays
Data Display
FAQ
Why copy-paste instead of an npm package?
Because the moment you need to tweak a component, a package becomes a fight. Here the code is yours from day one.
Do I need another UI kit?
No. Plum UI is complete on its own: its CLI, registry, theme and components have no dependency on any other kit. If your project already uses shadcn/ui, the token names match and its CLI can install Plum components too.
Which frameworks are supported?
Anything that runs React 19 and Tailwind CSS v4: Next.js, Vite, Remix, Astro islands, TanStack Start.
What about bundle size?
You only ship what you copy. Motion is tree-shaken, and many animations are pure CSS driven by Radix data attributes.