Animated components for Gemini CLI

Drop a piece into your repo, point Gemini CLI at its PROMPT.md, and keep the timings safe with one line in GEMINI.md.

Gemini CLI is Google's open source coding agent for the terminal, Apache 2.0 licensed. You can run it with npx @google/gemini-cli or install it with npm or Homebrew. Its docs say it loads context files named GEMINI.md by default, and a setting (context.fileName) lets it read AGENTS.md too. It can also use MCP servers. Source: Gemini CLI on GitHub (README), Gemini CLI docs: GEMINI.md context files.

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

Liquid Glass Tab Bar

$3

A glass drop magnifies the tab under it, stretches between tabs and bursts into the player.

NEW

Receipt Morph Checkout

$3

Your card becomes the receipt: it splits, unrolls into paper and gets stamped PAID.

How to add one with Gemini CLI

  1. 1Unzip the download into your repo, for example under components/qodesign.
  2. 2Run gemini in the repo root and ask: "Follow components/qodesign/PROMPT.md and add the piece to app/login/page.tsx". Review each change before you approve it.
  3. 3Run npm run dev and compare the motion with the live preview on our site before you keep the change.
  4. 4Add one line to GEMINI.md, such as "Don't change animation durations or easing in components/qodesign". Gemini CLI loads that file as context, so later edits keep the timings.

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 Gemini CLI

  • qodesign vs Kibo UIKibo UI is best for: shadcn/ui projects that need larger app pieces, like a Gantt chart, and want them free in their own codebase.
  • 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 Gemini CLI read AGENTS.md?

By default it reads GEMINI.md. Its docs show a setting, context.fileName in settings.json, that takes a list of names such as AGENTS.md and GEMINI.md, so one rules file can serve several agents.

Is Gemini CLI open source?

Yes. The repo on GitHub is Apache 2.0 licensed. 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.