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 Devin
Drop a piece into your repo, point Devin at its PROMPT.md, and keep the timings safe with one line in AGENTS.md.
Devin is Cognition's AI software engineer. It works in cloud sessions and through Devin CLI, a local coding agent you install with a script or Homebrew. Its docs say it reads AGENTS.md before it starts coding and puts up to the first 16 KiB of each AGENTS.md in its context automatically, so the rules that matter go near the top. Devin CLI also reads a global AGENTS.md from your user config folder. The pricing page lists a Free plan, Pro at $20 a month, Max at $200 a month and Teams at $80 a month plus $40 per full seat. Source: Devin docs: AGENTS.md files, Devin CLI docs: Rules and AGENTS.md, Devin CLI quickstart, Devin pricing.
NEW
A glass drop magnifies the tab under it, stretches between tabs and bursts into the player.
NEW
Your card becomes the receipt: it splits, unrolls into paper and gets stamped PAID.
How to add one with Devin
- 1Unzip the download into your repo, for example under components/qodesign, and commit it so a cloud session can see it.
- 2Ask Devin: "Follow components/qodesign/PROMPT.md and add the piece to app/login/page.tsx". Read the diff or the PR before you merge it.
- 3Run npm run dev and compare the motion with the live preview on our site before you keep the change.
- 4Add one line near the top of AGENTS.md, such as "Don't change animation durations or easing in components/qodesign". Devin loads the start of that file every time, so later edits 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 Devin
- qodesign vs shadcn/uishadcn/ui is best for: the base layer of a Next.js or React app: the plain, accessible building blocks you style yourself.
- 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 Devin read AGENTS.md?
Yes. Its docs say Devin looks for AGENTS.md before it starts coding and includes up to the first 16 KiB of each file automatically. Anything past that it can read on demand, so keep the rules you care about near the top.
Is there a free Devin plan?
Devin's pricing page lists a Free plan with a light quota, and Pro at $20 a month. The pieces are separate: six are free, and paid pieces are a one-time purchase.
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.