Animated components for shadcn/ui projects

Free pieces install with the shadcn CLI. Paid pieces are plain React + Tailwind files that sit next to your shadcn components.

The six free pieces are published as a shadcn registry. One `npx shadcn@latest add <url>` puts the files in your components folder and installs framer-motion. Source: qodesign-free registry.

NEW

Step-Up OTP Gate

$3

Arcs spin around six chunky cells, merge into one check, and the blurred dashboard behind them unlocks.

NEW

Stack Cart Drawer

$3

Products fly into the cart as discs; open it and they unfold into line items.

NEW

Command-K Dashboard

$3

A whole SaaS app you drive from ⌘K: rows stretch into pages, coins fly into the total.

How to add one with shadcn/ui

  1. 1Copy the command for a free piece below and run it in your project.
  2. 2Import the component like any other shadcn component and pass your props.
  3. 3For a paid piece, copy the folder from the download into your components folder; the guide for each piece lists the file and the props.

Free pieces, one command each

  • Toast stack
    npx shadcn@latest add https://teodoravadani.github.io/qodesign-free/r/toast-stack.json
  • Monthly/yearly pricing toggle
    npx shadcn@latest add https://teodoravadani.github.io/qodesign-free/r/pricing-switch.json
  • File upload dropzone
    npx shadcn@latest add https://teodoravadani.github.io/qodesign-free/r/upload-dropzone.json
  • Day / night theme toggle
    npx shadcn@latest add https://teodoravadani.github.io/qodesign-free/r/day-night-toggle.json
  • Observability dashboard
    npx shadcn@latest add https://teodoravadani.github.io/qodesign-free/r/orbit-dashboard.json
  • Trading dashboard
    npx shadcn@latest add https://teodoravadani.github.io/qodesign-free/r/ledger-dashboard.json

Guides with the code and props

Paid pieces start at $3 each, or get every one with the Shelf for $29, once.

Questions

Will it overwrite my theme?

No. The pieces bring their own small CSS file with variables you can map to your shadcn tokens.

Are the paid pieces in the registry?

Not yet. Paid pieces come as a download with the React files, an HTML version and a PROMPT.md.

Is anything free?

Yes. Six pieces are free under the MIT licence and install with one shadcn command. The Day / Night toggle is also on the free code page.

Can I use them in a client project?

Yes. The licence covers personal, commercial and client projects. You can't resell the source code itself.