Animated components for Kiro

Install a free piece with one shadcn command, or drop a paid piece in your repo, then add a steering file so Kiro keeps the motion as it is.

Kiro reads steering files: Markdown in .kiro/steering/ in your project, or in ~/.kiro/steering/ for every project. Workspace files win when the two disagree. Front matter decides when a file loads: always (the default), only when you work on files that match a pattern, or only when you type #file-name in chat. Kiro also reads AGENTS.md at the root and in subfolders. Its pricing page lists a free plan with 50 credits a month. Source: Kiro docs: steering, Kiro pricing.

NEW

Spotlight Lamp Login

$3

A sign-in page in the dark: a desk lamp finds each field and floods the screen when you sign in.

NEW

Step-Up OTP Gate

$3

Arcs spin around six chunky cells, merge into one check, and the blurred dashboard behind them unlocks.

NEW

Command-K Dashboard

$3

A whole SaaS app you drive from ⌘K: rows stretch into pages, coins fly into the total.

How to add one with Kiro

  1. 1For a free piece, run one of the shadcn commands below in Kiro's terminal. For a paid piece, unzip the download into your project, for example under components/qodesign.
  2. 2Ask Kiro in chat to read components/qodesign/PROMPT.md and follow it for the page that should get the piece.
  3. 3Add .kiro/steering/qodesign-motion.md with front matter inclusion: fileMatch and fileMatchPattern: "components/qodesign/**/*.tsx", and one line: "Don't change animation durations or easing in components/qodesign." Kiro then loads the rule only when it touches those files.
  4. 4Run your dev server and compare the motion with the live preview on our site before you ask for style changes.

Free pieces, one command each

  • Toast stack
    npx shadcn@latest add https://teodoravadani.github.io/qodesign-free/r/toast-stack.json
  • Monthly/yearly pricing toggle
    npx shadcn@latest add https://teodoravadani.github.io/qodesign-free/r/pricing-switch.json
  • File upload dropzone
    npx shadcn@latest add https://teodoravadani.github.io/qodesign-free/r/upload-dropzone.json
  • Day / night theme toggle
    npx shadcn@latest add https://teodoravadani.github.io/qodesign-free/r/day-night-toggle.json
  • Observability dashboard
    npx shadcn@latest add https://teodoravadani.github.io/qodesign-free/r/orbit-dashboard.json
  • Trading dashboard
    npx shadcn@latest add https://teodoravadani.github.io/qodesign-free/r/ledger-dashboard.json

Guides with the code and props

Paid pieces start at $3 each, or get every one with the Shelf for $29, once.

Comparing libraries for Kiro

  • qodesign vs Motion PrimitivesMotion Primitives is best for: small motion building blocks you compose yourself: text effects, number tickers, dialogs, toolbars.
  • qodesign vs TremorTremor is best for: dashboards and charts: area, bar, line and donut charts, trackers, KPI cards, tables.

All comparisons, with prices read on each library's own site.

From the blog: Cursor Rules for Consistent UI Animations: Tokens, a Rule File and a Check

Questions

Do I need a spec before adding a piece?

No. A piece is a component with its own PROMPT.md, so a normal chat request is enough. If you already keep tech.md or structure.md in .kiro/steering/, Kiro reads them as usual.

Why fileMatch and not always?

An always-on steering file loads into every request. The motion rule only matters when Kiro edits the qodesign files, so a fileMatch pattern keeps it out of the way the rest of the time.

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.