Beautifully Crafted React Components, Built for Developers.
Animated, accessible components you install as plain .tsx files. Free for React and Tailwind CSS.
npx devignerui initnpx devignerui add menu-dockBuilt for React 19 and Tailwind CSS v4. It drops into the stack you already have.
- React
- Next.js
- Tailwind CSS
- TypeScript
- Vite
- shadcn/ui
Every state, already handled.
Focus, loading, confirmation, reduced motion and both themes are part of each component, so the part you paste in is the finished part.
Works from the keyboard
Click into the dock and put the mouse away. Every key you press lights up below.
Right in both themes
Drag across it. Colors come from CSS variables, with no dark: classes in the file.
Still when you ask
Turn on reduced motion and the springs stop. Everything still works.
Loading and confirm
Delete Button asks first, waits for your request, then shows a tick.
One file you own
A plain .tsx file in your repo. The CLI prints the few packages it needs, and every class name is there for you to change.
Loading the source...
Two commands, then it's your code
npx devignerui initnpx devignerui add menu-dock~/your-app $ npx devignerui add menu-dock. Adding components.... 📦 menu-dock. ✓ components/ui/menu-dock.tsx. Install dependencies:. npm i cn motion react @devigner-ui/icons devignerui. Done!
- app/
- components/
- ui/
- button.tsx
- menu-dock.tsxnew+652
- components.json
- package.json
Free today, and it stays free.
Every component on the site is MIT licensed. Pro will be a separate paid set, and nothing free moves behind it.
Free
Available nowMIT licensed
FREEforever
Everything on the site, with no account and no seat limits.
Browse components- Every component in the library
- MIT license, commercial use included
- Install with the CLI or copy the file
- Light and dark themes out of the box
Pro
Not on sale yet$14.99a month
Cancel whenever. Lifetime is one payment of $149.99.
Get notified on X- Everything in Free
- Every Pro component while you're subscribed
- New Pro components as they ship
- Priority support
Questions, before you install
Short answers to what people ask before they run the first command.
Yes. Every component on the site is free and MIT licensed, including for commercial work. Pro will be a separate paid set, and nothing that's free now moves behind it.
Run npx devignerui init once per project, then npx devignerui add with the component's name. The CLI writes the file into components/ui and prints the npm packages it needs.
Yes. Both use a components/ui folder and many of the same CSS variable names, like --primary and --ring. Devigner components also read a few tokens of their own, such as --surface and --brand.
Most components use Motion, the library that used to be called Framer Motion, and a few use GSAP. Each component's page and the CLI list exactly which packages it needs.
Yes. Every component starts with "use client", so you can render it from a server component.
Every color is a CSS variable. Put the dark class on your html element and the components switch, and override any variable in your own CSS to change the look.
Still wondering about something? Ask @devignerui on X
Start with one component.
Pick any of them, run one command, and edit it like the rest of your code.
npx devignerui init