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 Kilo Code
Drop a piece into your repo, point Kilo Code at its PROMPT.md, and keep the timings safe with one line in AGENTS.md.
Kilo Code is an open-source coding agent (MIT on GitHub) that runs as a VS Code extension, a JetBrains plugin and a CLI, and works with the model of your choice. It reads AGENTS.md from the project root (AGENT.md as a fallback; the name has to be in capitals), and an AGENTS.md inside a subfolder is loaded when the agent reads files in that folder. Both files are write-protected, so the agent asks before it changes them. Pricing on Oct 21 2026: the extension is free with usage billed separately (new accounts can start on free models), and Teams is $15 per user a month. Its docs say Kilo has been acquired by Anaconda. Source: Kilo Code docs: Agents.md, Kilo Code docs: installation, Kilo Code pricing, Kilo-Org/kilocode on GitHub.
NEW
Arcs spin around six chunky cells, merge into one check, and the blurred dashboard behind them unlocks.
NEW
A whole SaaS app you drive from ⌘K: rows stretch into pages, coins fly into the total.
How to add one with Kilo Code
- 1Unzip the download into your repo, for example under components/qodesign.
- 2Open the project in VS Code or a JetBrains IDE with Kilo Code and ask: "Follow components/qodesign/PROMPT.md and add the piece to app/login/page.tsx". Review each file change before you approve 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 in the repo root, such as "Don't change animation durations or easing in components/qodesign". Kilo Code reads that file, 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 Kilo Code
- qodesign vs Kokonut UIKokonut UI is best for: landing page sections and templates installed by an AI agent.
- qodesign vs Skiper UISkiper UI is best for: unusual interaction details for landing pages: image reveals, cursor trails, tooltips, drag-and-scroll galleries.
All comparisons, with prices read on each library's own site.
Questions
Does Kilo Code read AGENTS.md?
Yes. Kilo Code's docs say it reads AGENTS.md from the project root, falls back to AGENT.md, and loads an AGENTS.md in a subfolder when the agent reads files there. The name must be all capitals.
Do I need a paid plan?
No. The pieces don't care which plan you're on. Kilo Code's pricing page on Oct 21 2026 lists the extension as free with model usage billed separately, and Teams at $15 per user 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.