NEW
A sign-in page in the dark: a desk lamp finds each field and floods the screen when you sign in.
Animated components for Amp
Put a piece in your repo, let Amp read its PROMPT.md, and keep the timings safe with one line in AGENTS.md.
Amp is a coding agent you can run on the web, in macOS and iOS apps, or from the terminal with the amp CLI (macOS, Linux, and Windows through WSL). On the web each thread runs in an orb, a cloud machine Amp sets up with your code and tools, so it keeps working after you close your laptop. Amp reads AGENTS.md from your working directory, its parent folders and any subfolder it opens, plus personal guidance in ~/.config/amp/AGENTS.md; if a folder has no AGENTS.md, it falls back to AGENT.md or CLAUDE.md. Its docs also cover designing UI from screenshots before writing code. Pricing on Oct 21 2026: the Hobby tier is free (pay as you go for orbs, or bring your own keys or ChatGPT and Claude subscriptions), and the individual paid tier starts at $20 a month. Source: Amp docs: introduction, Amp docs: AGENTS.md, Amp docs: CLI getting started, Amp docs: designing UI, Amp pricing.
NEW
Products fly into the cart as discs; open it and they unfold into line items.
A delete button you press and hold, then the file crumples into the bin.
How to add one with Amp
- 1Unzip the download into your repo, for example under components/qodesign. If you work in orbs, commit and push it so the orb's copy of the repo has it.
- 2Ask Amp: "Follow components/qodesign/PROMPT.md and add the piece to app/login/page.tsx". It can run your app and take a screenshot, so ask it to check the result.
- 3Compare the motion with the live preview on our site before you accept the change.
- 4Add one line to AGENTS.md in the repo root, such as "Don't change animation durations or easing in components/qodesign". Amp includes that file in every thread, so later tasks 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
- Supabase login page for Next.js
- Cart drawer with Stripe Checkout
- Delete with undo, no confirm dialog
- Animated tab bar for React
- Stacked toast notifications
- Monthly / yearly pricing toggle
Paid pieces start at $3 each, or get every one with the Shelf for $29, once.
Comparing libraries for Amp
- qodesign vs 21st.dev21st.dev is best for: browsing a huge marketplace and copying many components a month.
- qodesign vs Motion PrimitivesMotion Primitives is best for: small motion building blocks you compose yourself: text effects, number tickers, dialogs, toolbars.
All comparisons, with prices read on each library's own site.
Questions
Does Amp read AGENTS.md?
Yes. Amp's docs say it always includes AGENTS.md from the current folder and its parents, includes subfolder AGENTS.md files when it reads a file there, and falls back to AGENT.md or CLAUDE.md when there is no AGENTS.md.
Do I need a paid plan?
No. The pieces don't care which plan you're on. Amp's pricing page on Oct 21 2026 lists a free Hobby tier where you bring your own keys or subscriptions and pay as you go for orbs; paid individual tiers start at $20 a month.
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.