A dark analytics dashboard where every number counts up live.
Animated components for Claude Code
Point Claude Code at the folder, paste the prompt, and it adds the piece to your app and checks the build.
Claude Code works in your terminal and reads the files in your repo, so the steps in PROMPT.md (copy, install, wire, build) map straight onto what it does.
NEW
Your card becomes the receipt: it splits, unrolls into paper and gets stamped PAID.
A login mascot that watches you type and covers his eyes for the password.
How to add one with Claude Code
- 1Put the unzipped download inside your project so Claude Code can read it.
- 2Start Claude Code in the project and paste Prompt 1 from PROMPT.md. Tell it which page to use.
- 3Review the diff it shows you, then run your dev server and compare with the live preview on qodesign.dev.
Guides with the code and props
- Animated analytics dashboard
- Checkout that turns into a receipt
- Login form with a shy mascot
- Pull-cord login form
- Particle text animation for React
- Observability dashboard for React
Paid pieces start at $3 each, or get every one with the Shelf for $29, once.
Questions
Does it need a particular model or plan?
No. The prompt is plain text. Any coding agent that can read files and run commands can follow it.
What if my project isn't React?
Each paid download also has a single HTML file with the CSS and JavaScript inside. The prompt tells the agent to use it when the project isn't React.
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.