NEW
Collapse the sidebar to an icon rail and the whole app reflows with it on a spring.
Animated components for Augment Code
Unzip a piece into your repo, ask Auggie or the IDE agent to follow its PROMPT.md, and add one rule file so the motion stays the way it shipped.
Augment Code is a coding agent that runs as a VS Code or JetBrains extension and as Auggie, a terminal CLI you install with npm install -g @augmentcode/auggie (Node 20 or later). Its rules docs list what it loads, in order: a file passed with --rules, CLAUDE.md, AGENTS.md, a .augment-guidelines file in the workspace root, Markdown files under .augment/rules/ (searched recursively), then user-wide rules in ~/.augment/rules/. The CLI and the IDE extensions share the same rules system. Pricing on Oct 21 2026: Standard is $20 a month flat with $20 of usage included and up to 50 seats, Business is $100 a month with $100 of usage, Enterprise is custom; usage is pay-as-you-go above that. Source: Augment docs: rules and guidelines (Auggie CLI), Augment docs: install Auggie CLI, Augment Code pricing, augmentcode.com.
NEW
A whole SaaS app you drive from ⌘K: rows stretch into pages, coins fly into the total.
NEW
Arcs spin around six chunky cells, merge into one check, and the blurred dashboard behind them unlocks.
How to add one with Augment Code
- 1Unzip the download into your project, for example under components/qodesign, and commit so the agent's diff is easy to read.
- 2In the IDE agent or in auggie, ask it to follow components/qodesign/PROMPT.md and say which page should get the piece.
- 3Review the edits and the npm install, run your dev server, and compare the motion with the live preview on our site.
- 4Add a Markdown file under .augment/rules/ with one line, such as "Don't change animation durations or easing in components/qodesign". If you already keep an AGENTS.md or CLAUDE.md, the same line there works, because Augment loads both.
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
- Collapsible sidebar for React
- Animated analytics dashboard
- Supabase email OTP login
- Cart drawer with Stripe Checkout
- Stacked toast notifications
- Day / night theme toggle
Paid pieces start at $3 each, or get every one with the Shelf for $29, once.
Comparing libraries for Augment Code
- qodesign vs MantineMantine is best for: a complete, accessible component library for a whole app, with first-class docs for Cursor, Claude Code and other AI tools.
- qodesign vs Origin UIOrigin UI is best for: everyday app parts: inputs, selects, tables, date pickers, file upload, steppers.
All comparisons, with prices read on each library's own site.
Questions
Does Augment read my AGENTS.md or CLAUDE.md?
Yes. Augment's rules docs list CLAUDE.md and AGENTS.md among the files Auggie loads, after a custom --rules file and before .augment-guidelines and the .augment/rules/ folder.
Do I need a paid plan?
The pieces don't care which plan you're on. Augment's pricing page on Oct 21 2026 shows Standard at $20 a month flat (with $20 of usage) as the entry plan; check their page for a trial, since that can change.
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.