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 Junie
Drop a piece into your repo, point Junie at its PROMPT.md, and keep the timings safe with one line in AGENTS.md.
Junie is JetBrains' coding agent. Junie CLI runs in your terminal (installed with a one-line script) and Junie Local runs inside JetBrains IDEs; it can also run from GitHub and GitLab. Its docs say it reads guidelines from AGENTS.md and adds them to every task, looking first for .junie/AGENTS.md and then AGENTS.md in the project root. You can bring your own model key, and JetBrains lists Junie Lite as a free layer with no card. Source: Junie home, Junie docs: guidelines and memory, Junie docs: Junie CLI.
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 Junie
- 1Unzip the download into your repo, for example under components/qodesign.
- 2Run junie in the repo root (or open Junie in your JetBrains IDE) and ask: "Follow components/qodesign/PROMPT.md and add the piece to app/login/page.tsx". Review the diff before you accept it.
- 3Run npm run dev and compare the motion with the live preview on our site before you keep the change.
- 4Add one line to AGENTS.md (or .junie/AGENTS.md), such as "Don't change animation durations or easing in components/qodesign". Junie adds that file to every task, 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 Junie
- qodesign vs Motion PrimitivesMotion Primitives is best for: small motion building blocks you compose yourself: text effects, number tickers, dialogs, toolbars.
- qodesign vs React BitsReact Bits is best for: text animations, animated backgrounds and creative effects.
All comparisons, with prices read on each library's own site.
Questions
Does Junie read AGENTS.md?
Yes. JetBrains' docs say Junie CLI reads guidelines from AGENTS.md and adds them to every task. It checks .junie/AGENTS.md first, then AGENTS.md in the project root, and offers to import instructions it finds from other agents.
Do I need a paid plan?
Not to try it: JetBrains lists Junie Lite as a free layer with no trial and no card, and you can use your own model key. 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.