Components that move with intent.
Accessible React components with motion designed into every interaction. Copy them into your app, then own every line. Built on Radix, Tailwind CSS and Motion.
New project
mainOne URL per pull request
Cookie-free, privacy friendly
Requests
Livethis billing period
Team
Two-factor
Enter the code from your authenticator app.
Overview
- RY
Ryan promoted 4f2c91a to production
Ready2m - LÉ
Léa opened feat: billing page
Preview18m - AL
Alex rolled back api to 9c1e0d4
Rollback1h
Appearance
Everything above is live. Change the accent, the radius or the mode — then click around.
Why Plum
The polish you'd add yourself, if you had the time.
Every component is designed, animated and tested so you can focus on your product.
You own the code
No package to fight. Every component lands in your repo as a readable file you can bend to your needs.
Motion with intent
Springs for things you touch, expo curves for things that appear. Interruptible, fast, never in the way.
Accessible to the core
Radix handles focus, keyboard and ARIA. Reduced motion is respected everywhere, CSS and JS alike.
--brand: 330°Themed in one line
One CSS file of OKLCH tokens. Swap the brand hue and every component follows, in light and dark.
Gallery
Every piece, alive.
Hover a row to slow it down, then play with anything you see.
Details
Go on, touch something.
Small interactions are where interfaces earn trust. Each one here is tuned by hand.
Install
One command.
Zero lock-in.
The plum-ui CLI drops the source into your project, rewrites imports to your aliases, installs what's missing with your package manager and pulls in the components it builds on.
- Works with Next.js, Vite, React Router and Astro
- Zero-dependency CLI, works with npm, pnpm, yarn and bun
- TypeScript, React 19, Tailwind v4
Build something that feels good to use.
Free and open source. Copy what you need, leave the rest.