Velora UI

Free, MIT-licensed animated components and complete landing templates for React.

32 animated shadcn/ui components and a full multi-page SaaS template — home, pricing, blog (MDX), auth, changelog, contact and 404 — built with Next.js 16, Tailwind CSS 4 and Motion. The free tier isn't a teaser: everything on the site ships under MIT, commercial use included.

   

Screenshots

Component catalog — 32 components, grouped by category, one CLI command to install.	Themes — swap the whole identity by editing seven CSS variables.
Every component ships its receipts — gzip size, dependency count and reduced-motion status, plus live demo, install command and source.	The whole product is free — every component and the complete template under MIT.

Why Velora

• The free tier is the whole product. Complete assembled pages, not just isolated components. The kind of template that costs $149–$299 elsewhere is the baseline here.
• Animations with receipts. Every component's docs page shows its gzipped size (0.3–1.5 KB — no Three.js payloads) and dependency count. 15 of 32 components have zero runtime dependencies; the rest use Motion and nothing else.
• Tokens, not hardcoded hues. Components read your shadcn CSS variables. Rebrand every gradient, beam and glow by editing seven variables — ready-made presets on the themes page.
• Motion that asks permission. A global prefers-reduced-motion kill switch covers every animation. Keyboard focus stays visible, markup stays semantic.
• Primitive-agnostic. Velora components import neither Radix nor Base UI — they work in any shadcn project, whichever primitive layer you use.

What's inside

32 animated components

Category	Components
Backgrounds	Aurora Background · Grid & Dot Pattern · Retro Grid · Particles · Meteors · Background Beams · Lamp
Text	Animated Gradient Text · Text Reveal · Typewriter · Flip Words · Sparkles Text · Text Shimmer · Number Ticker
Buttons	Shimmer Button · Confetti
Cards & Layout	Bento Grid · Spotlight Card · Tilt Card · Marquee · Animated List · Orbiting Circles · Avatar Circles · Animated Tooltip · Dock
Effects	Border Beam · Animated Beam · Blur Fade · Scroll Progress
Mockups	Browser Mockup · iPhone Mockup · Terminal

Browse them all — with live demos, props, install commands and source — at velora.colorlib.com/components.

The complete template

A production landing site, not a component sandbox. Every page is real, static-rendered and yours to keep:

Page	What you get
Home	Animated hero, feature bento, social proof, marquee and CTA sections
Components	Browsable gallery + a docs page per component (demo · props · install · source)
Themes	Six brand presets with live token switching
Pricing	Free vs. Pro tiers with feature comparison
Blog	MDX-powered blog with three starter posts
Changelog	Release timeline
About · Contact	Company page + frontend-only contact form
Login · Signup	Auth screens (frontend-only)
404	Styled not-found page

Install components

Every component is a standard shadcn registry item:

npx shadcn@latest add https://velora.colorlib.com/r/aurora-background.json

Components carry their own keyframes and brand tokens, so they work standalone in existing projects. Browse the full catalog at velora.colorlib.com/components.

Use with AI agents

Velora is a standard shadcn registry, so it plugs into the shadcn MCP server with zero extra setup — an agent in Cursor, Claude Code or VS Code can browse and install Velora components by name:

pnpm dlx shadcn@latest mcp init --client claude

For discovery, llms.txt lists every component with its install command, gzipped size and dependency count — so an agent can pick components by cost, not just by looks.

Use the template

git clone https://github.com/ColorlibHQ/velora-ui.git my-landing
cd my-landing
pnpm install
pnpm dev

Then make it yours:

1. Content — pages live in src/app/, section data is inline per page.
2. Brand — swap the token block in src/app/globals.css (or copy a preset from /themes).
3. Blog — add MDX files under src/app/blog/(posts)/<slug>/page.mdx and register them in src/lib/blog-posts.ts.
4. Forms — contact and auth forms are frontend-only demos; wire them to your backend or auth provider.

Scripts

pnpm dev              # dev server (Turbopack)
pnpm build            # production build (all pages static)
pnpm lint             # eslint
pnpm registry:build   # component stats + registry.json + public/r/*.json + llms.txt

Stack

Next.js 16 · React 19 · Tailwind CSS 4 · shadcn/ui · Motion · TypeScript

License

MIT — free for personal and commercial use, no attribution required.