Free animated UI. Copy it, ship it.

Two full dashboards and four components. Each one is a single HTML file and a React component (React 18, TypeScript, Tailwind 3, Framer Motion). MIT licensed.

View on GitHub qodesign.dev
Orbit: Infrastructure observability dashboard

Orbit

Dashboard

Infrastructure observability dashboard.

HTML demo React demo Source
npx shadcn@latest add https://teodoravadani.github.io/qodesign-free/r/orbit-dashboard.json
Ledger: Trading desk dashboard

Ledger

Dashboard

Trading desk dashboard.

HTML demo React demo Source
npx shadcn@latest add https://teodoravadani.github.io/qodesign-free/r/ledger-dashboard.json
Toast Stack: Notifications that stack like a deck

Toast Stack

Component

Notifications that stack like a deck.

HTML demo React demo Source
npx shadcn@latest add https://teodoravadani.github.io/qodesign-free/r/toast-stack.json
Pricing Switch: Monthly / yearly with odometer prices

Pricing Switch

Component

Monthly / yearly with odometer prices.

HTML demo React demo Source
npx shadcn@latest add https://teodoravadani.github.io/qodesign-free/r/pricing-switch.json
Upload Dropzone: Drag and drop with progress rings

Upload Dropzone

Component

Drag and drop with progress rings.

HTML demo React demo Source
npx shadcn@latest add https://teodoravadani.github.io/qodesign-free/r/upload-dropzone.json
Day / Night Toggle: The sun rolls into a moon

Day / Night Toggle

Component

The sun rolls into a moon.

HTML demo React demo Source
npx shadcn@latest add https://teodoravadani.github.io/qodesign-free/r/day-night-toggle.json