qodesign-free

Free kit: qodesign.dev/free

Animated React + Tailwind components for AI-first builders who ship with Cursor, Lovable, v0 or Claude Code. Every folder has a PROMPT.md, so your agent can install a piece, wire it to your data and restyle it.

Four components and two full dashboards, written in TypeScript with Tailwind CSS and Framer Motion. They install with the shadcn CLI and work in Next.js, Vite and Lovable apps. MIT licensed.

Tested in a clean Next.js 15 app (React 19, Tailwind v4, App Router, next build) and in the Vite + React 18 + Tailwind v3 demo project inside each folder. Peer dependencies are React 18 or 19 and framer-motion 11 or newer.

Live demos · qodesign.dev

The shadcn CLI needs a components.json in your project. In a fresh Next.js app, run this once first:

npx shadcn@latest init

Then add any piece:

npx shadcn@latest add https://teodoravadani.github.io/qodesign-free/r/toast-stack.json

That copies the source into components/<name>/ and installs framer-motion 11.18.2, the version we test with. The code is yours to edit from there.

This route needs Tailwind CSS in your project for the Day / Night Toggle, because its source uses Tailwind classes. The other five bring their own CSS file and work without Tailwind. The npm route below needs no Tailwind at all.

The registry index is at r/registry.json and every item lives at https://teodoravadani.github.io/qodesign-free/r/<name>.json.

Or install from npm

npm i qodesign-free [email protected]

Import each component from its own path. You only ship the CSS for what you use (about 10 KB of CSS for the toast stack and the toggle, against about 90 KB from the package root, which pulls in both dashboards):

import { Toaster, toast } from 'qodesign-free/toast-stack';
import { DayNightToggle } from 'qodesign-free/day-night-toggle';
// also: 'qodesign-free/pricing-switch', 'qodesign-free/upload-dropzone',
//       'qodesign-free/orbit-dashboard', 'qodesign-free/ledger-dashboard'

import { ... } from 'qodesign-free' still works if you want everything in one line.

Each component brings its own stylesheet and starts with 'use client', so you can drop it into a Next.js server page. No Tailwind needed, the Day / Night Toggle included (since 0.1.1 it ships its own compiled CSS, scoped to the component). The shadcn route above is better when you want to edit the source.

| | | |---|---| | Orbit: infrastructure observability dashboard. Demo | Ledger: trading desk dashboard. Demo | | Toast Stack: notifications that stack like a deck and fan out. Demo | Pricing Switch: monthly / yearly switch with odometer prices. Demo | | Upload Dropzone: drag and drop with progress rings. Demo | Day / Night Toggle: the sun rolls into a moon. Demo |

Install

| Item | shadcn CLI | Single HTML file | |---|---|---| | Orbit dashboard | npx shadcn@latest add https://teodoravadani.github.io/qodesign-free/r/orbit-dashboard.json | orbit.html | | Ledger dashboard | npx shadcn@latest add https://teodoravadani.github.io/qodesign-free/r/ledger-dashboard.json | ledger.html | | Toast Stack | npx shadcn@latest add https://teodoravadani.github.io/qodesign-free/r/toast-stack.json | toast-stack.html | | Pricing Switch | npx shadcn@latest add https://teodoravadani.github.io/qodesign-free/r/pricing-switch.json | pricing-switch.html | | Upload Dropzone | npx shadcn@latest add https://teodoravadani.github.io/qodesign-free/r/upload-dropzone.json | upload-dropzone.html | | Day / Night Toggle | npx shadcn@latest add https://teodoravadani.github.io/qodesign-free/r/day-night-toggle.json | day-night-toggle.html |

No shadcn setup? Copy the folder under react/src/components/ into your project and run npm i [email protected].

Next.js App Router: every component file already starts with 'use client', so it works in a server page as is.

With an AI agent: every folder has a PROMPT.md with prompts for Cursor, Claude Code, v0 or Lovable: add it to my project, wire it to my data, restyle it, port it to Vue or Svelte.

No React? Every item also comes as one HTML file (CSS and JS inline), linked in the table above.

Using with Cursor

The repo ships two Cursor rules files: .cursor/rules/qodesign.mdc (installing and using these components in Next.js) and .cursor/rules/qodesign-motion.mdc (motion rules for any animated component: one rAF loop that pauses off-screen, reduced motion, transform/opacity only, passive listeners, no scroll traps, StrictMode-safe cleanup). Other agents can read AGENTS.md.

What you get in each folder

<item>/
  react/               the component, plus a Vite + React + TS + Tailwind + Framer Motion demo app
  html/<item>.html     the same thing as one HTML file
  README.md            usage, props, accessibility
  PROMPT.md            prompts for AI coding agents
  preview.gif          the loop you see above
  proof/               screenshots at 1280 / 1440 px and 390 px

Run any React demo:

cd dashboards/orbit-observability/react   # or any other item
npm install
npm run dev

Notes

• Every demo plays by itself until you touch it. Add ?demo=0 to turn that off.
• Everything respects Reduce Motion and has visible focus states and 44 px touch targets on phones.
• The page keeps scrolling when your cursor or finger is over a component.
• Data in the dashboards is simulated. Each README says which file to swap for your API.
• Browser support: current Chrome, Edge, Firefox and Safari, Safari on iOS included. Some pieces use CSS color-mix(), so older browsers than Chrome and Edge 111, Safari 16.2 and Firefox 113 won't style them correctly.

More pieces

More animated pieces live at qodesign.dev.

Contributing

PRs welcome: bug fixes, new examples, a11y improvements. Open an issue first for big changes. CONTRIBUTING.md has the details.

Licence

MIT. Use anything here in personal and commercial projects. Credit is welcome, not required.

Made by Teodor at qodesign.dev.