NEW
Your card becomes the receipt: it splits, unrolls into paper and gets stamped PAID.
Animated components for v0
v0 builds the app. These pieces add the moments people remember: a login that lights up, a checkout that turns into a receipt, a tab bar made of glass.
v0's docs say it uses Next.js, React, TypeScript, Tailwind CSS and shadcn/ui. qodesign pieces use the same stack, so they fit without a rewrite. Source: v0 FAQ, shadcn/ui: Open in v0.
NEW
A sign-in page in the dark: a desk lamp finds each field and floods the screen when you sign in.
NEW
A glass drop magnifies the tab under it, stretches between tabs and bursts into the player.
How to add one with v0
- 1For a free piece, use its Open in v0 link below. It hands v0 the shadcn registry file for that piece.
- 2For a paid piece, open the download and paste PROMPT.md into the v0 chat together with the component files.
- 3Ask v0 to wire the callbacks (onVerify, onCheckout and so on) to your own logic. The prompt already tells it to keep the timings.
Free pieces, one command each
npx shadcn@latest add https://teodoravadani.github.io/qodesign-free/r/toast-stack.jsonnpx shadcn@latest add https://teodoravadani.github.io/qodesign-free/r/pricing-switch.jsonnpx shadcn@latest add https://teodoravadani.github.io/qodesign-free/r/upload-dropzone.jsonnpx shadcn@latest add https://teodoravadani.github.io/qodesign-free/r/day-night-toggle.jsonnpx shadcn@latest add https://teodoravadani.github.io/qodesign-free/r/orbit-dashboard.jsonnpx shadcn@latest add https://teodoravadani.github.io/qodesign-free/r/ledger-dashboard.json
Guides with the code and props
- Checkout that turns into a receipt
- Animated login page for React
- Animated tab bar for React
- Animated OTP input for React
- SaaS dashboard with ⌘K
- Animated cart drawer for React
Paid pieces start at $3 each, or get every one with the Shelf for $29, once.
Questions
Does Open in v0 need an account?
Yes, v0 asks you to sign in. The link uses v0's public registry import, described in the shadcn/ui docs.
Will v0 change the animation?
Each PROMPT.md asks the AI to keep the timings and easing as they are. Check the result against the live preview on our site.
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.