How do I add a component to my project?

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.

Does it work with shadcn/ui?

Yes. Components install into the same components/ui folder and use the standard shadcn/ui color tokens (primary, secondary, muted, accent, border, ring and the rest), so they pick up your existing theme and dark mode with nothing to add.

Do I need Framer Motion?

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.

Will it work with the Next.js App Router?

Yes. Every component starts with "use client", so you can render it from a server component.

How do dark mode and theming work?

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.

NewFlick Cards Slider

Beautifully Crafted Animated React Components for Developers

Hand-tuned motion, accessible by default, and installed as a .tsx file you own.

Browse components

npx devignerui init

ComponentsFlick Cards Slider

Docs

All components

npx devignerui add flick-cards-slider

Works with React 18 and 19 on 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.

Wires into your state

Every change comes out through a typed callback, ready for your store or your server. Use them and read the log.

Notifications

npx devignerui init

Drag, flip or copy. The calls land here.

Right in both themes

Drag across it. Colors come from CSS variables, with no dark: classes in the file.

.light

.dark

Still when you ask

Turn on reduced motion and the springs stop. Everything still works.

Reduce motion

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. It follows the window above, and every class name is there to change.

flick-cards-slider.tsx347 lines

componentsuiflick-cards-slider.tsx

Two commands, then it's your code

No package to keep in sync. The CLI copies the source into your project, and from then on it's a normal file in your repo.

Once per project

npx devignerui init

Then, per component

npx devignerui add flick-cards-slider

Lands in components/uiflick-cards-slider.tsx+347

Try it with

your-appno changes

app/
components/
ui/
flick-cards-slider.tsxnew+347
components.json
package.json

Waiting for the add command

28 components · $0 · forever

Free.

Every component on the site is yours, commercial work included. It stays that way.

Every component in the library
Commercial use included
Install with the CLI or copy the file
No account, no seat limits

Take one Or request one

Pro

Not on sale yet

A separate paid set, with new Pro components as they ship. Nothing free moves behind it.

Cancel whenever.

40% off

Get notified on X

Launch price for both plans.

Questions, before you install

6 answers. Up and down arrows move through them.

01 / 06

Is Devigner UI free?

Yes. Every component on the site is free, including for commercial work. Pro will be a separate paid set, and nothing that's free now moves behind it.

Ask on X@devignerui answers in public.Ask in the DiscordRelease notes, requests and help.

Beautifully Crafted Animated React Components for Developers

Component preview

Every state, already handled.

Wires into your state

Right in both themes

Still when you ask

Loading and confirm

One file you own

Two commands, then it's your code

Free.

Pro

Questions, before you install