# Velora UI

> Free, MIT-licensed animated React components and complete multi-page landing
> templates. Built with Next.js, Tailwind CSS 4, shadcn/ui and Motion.
> Components are primitive-agnostic: they work in Base UI (shadcn default) and
> Radix projects alike. Every component respects prefers-reduced-motion and
> publishes its gzipped size and dependency count.

Install any component with the shadcn CLI:

    npx shadcn@latest add https://velora.colorlib.com/r/<name>.json

## Components

- [Aurora Background](https://velora.colorlib.com/components/aurora-background): Velora's signature drifting aurora gradient backdrop. (0.6 KB gzipped, zero deps) Install: `npx shadcn@latest add https://velora.colorlib.com/r/aurora-background.json`
- [Grid & Dot Pattern](https://velora.colorlib.com/components/grid-pattern): SVG grid and dot backdrops with maskable depth. (0.8 KB gzipped, zero deps) Install: `npx shadcn@latest add https://velora.colorlib.com/r/grid-pattern.json`
- [Retro Grid](https://velora.colorlib.com/components/retro-grid): Perspective grid scrolling forever toward the horizon. (0.7 KB gzipped, zero deps) Install: `npx shadcn@latest add https://velora.colorlib.com/r/retro-grid.json`
- [Particles](https://velora.colorlib.com/components/particles): Drifting, twinkling particle field on a lightweight canvas. (1.4 KB gzipped, zero deps) Install: `npx shadcn@latest add https://velora.colorlib.com/r/particles.json`
- [Meteors](https://velora.colorlib.com/components/meteors): Falling meteor streaks for dark hero and CTA sections. (0.6 KB gzipped, zero deps) Install: `npx shadcn@latest add https://velora.colorlib.com/r/meteors.json`
- [Background Beams](https://velora.colorlib.com/components/background-beams): Light beams flowing along curved paths behind content. (1.0 KB gzipped, deps: motion/react) Install: `npx shadcn@latest add https://velora.colorlib.com/r/background-beams.json`
- [Lamp](https://velora.colorlib.com/components/lamp): A glowing lamp-line header that expands into view. (0.9 KB gzipped, deps: motion/react) Install: `npx shadcn@latest add https://velora.colorlib.com/r/lamp.json`
- [Animated Gradient Text](https://velora.colorlib.com/components/animated-gradient-text): Brand gradient sweeping continuously through text. (0.3 KB gzipped, zero deps) Install: `npx shadcn@latest add https://velora.colorlib.com/r/animated-gradient-text.json`
- [Text Reveal](https://velora.colorlib.com/components/text-reveal): Word-by-word blur reveal on scroll. (0.7 KB gzipped, deps: motion/react) Install: `npx shadcn@latest add https://velora.colorlib.com/r/text-reveal.json`
- [Typewriter](https://velora.colorlib.com/components/typewriter): Types, holds and deletes through a list of words. (1.0 KB gzipped, deps: motion/react) Install: `npx shadcn@latest add https://velora.colorlib.com/r/typewriter.json`
- [Flip Words](https://velora.colorlib.com/components/flip-words): Cycles words with a springy blur-flip transition. (0.8 KB gzipped, deps: motion/react) Install: `npx shadcn@latest add https://velora.colorlib.com/r/flip-words.json`
- [Sparkles Text](https://velora.colorlib.com/components/sparkles-text): Twinkling stars orbiting your headline. (0.9 KB gzipped, deps: motion/react) Install: `npx shadcn@latest add https://velora.colorlib.com/r/sparkles-text.json`
- [Text Shimmer](https://velora.colorlib.com/components/text-shimmer): A soft light sweep — great for AI loading states. (0.4 KB gzipped, zero deps) Install: `npx shadcn@latest add https://velora.colorlib.com/r/text-shimmer.json`
- [Number Ticker](https://velora.colorlib.com/components/number-ticker): Springs a number up when it enters the viewport. (0.8 KB gzipped, deps: motion/react) Install: `npx shadcn@latest add https://velora.colorlib.com/r/number-ticker.json`
- [Shimmer Button](https://velora.colorlib.com/components/shimmer-button): CTA button with a continuous light sweep. (0.6 KB gzipped, zero deps) Install: `npx shadcn@latest add https://velora.colorlib.com/r/shimmer-button.json`
- [Confetti](https://velora.colorlib.com/components/confetti): Dependency-free confetti burst, fired from anywhere. (1.4 KB gzipped, zero deps) Install: `npx shadcn@latest add https://velora.colorlib.com/r/confetti.json`
- [Bento Grid](https://velora.colorlib.com/components/bento-grid): Feature bento with hover-reveal CTAs and rich backgrounds. (1.0 KB gzipped, deps: lucide-react) Install: `npx shadcn@latest add https://velora.colorlib.com/r/bento-grid.json`
- [Spotlight Card](https://velora.colorlib.com/components/spotlight-card): A radial glow that follows the cursor across the card. (0.8 KB gzipped, zero deps) Install: `npx shadcn@latest add https://velora.colorlib.com/r/spotlight-card.json`
- [Tilt Card](https://velora.colorlib.com/components/tilt-card): 3D perspective tilt that tracks the cursor. (0.7 KB gzipped, deps: motion/react) Install: `npx shadcn@latest add https://velora.colorlib.com/r/tilt-card.json`
- [Marquee](https://velora.colorlib.com/components/marquee): Seamless scrolling loop — horizontal, vertical, hover-pause. (0.7 KB gzipped, zero deps) Install: `npx shadcn@latest add https://velora.colorlib.com/r/marquee.json`
- [Animated List](https://velora.colorlib.com/components/animated-list): Looping feed that springs each item in, newest on top. (0.7 KB gzipped, deps: motion/react) Install: `npx shadcn@latest add https://velora.colorlib.com/r/animated-list.json`
- [Orbiting Circles](https://velora.colorlib.com/components/orbiting-circles): Items evenly distributed on rotating orbital rings. (0.9 KB gzipped, zero deps) Install: `npx shadcn@latest add https://velora.colorlib.com/r/orbiting-circles.json`
- [Avatar Circles](https://velora.colorlib.com/components/avatar-circles): Stacked initials avatars with a +N badge — zero images. (0.6 KB gzipped, zero deps) Install: `npx shadcn@latest add https://velora.colorlib.com/r/avatar-circles.json`
- [Animated Tooltip](https://velora.colorlib.com/components/animated-tooltip): Avatar row with springy name tooltips on hover. (1.0 KB gzipped, deps: motion/react) Install: `npx shadcn@latest add https://velora.colorlib.com/r/animated-tooltip.json`
- [Dock](https://velora.colorlib.com/components/dock): macOS-style dock with cursor magnification. (1.0 KB gzipped, deps: motion/react) Install: `npx shadcn@latest add https://velora.colorlib.com/r/dock.json`
- [Border Beam](https://velora.colorlib.com/components/border-beam): A beam of light traveling around any border. (0.9 KB gzipped, deps: motion/react) Install: `npx shadcn@latest add https://velora.colorlib.com/r/border-beam.json`
- [Animated Beam](https://velora.colorlib.com/components/animated-beam): Draws an animated connection between any two elements. (1.4 KB gzipped, deps: motion/react) Install: `npx shadcn@latest add https://velora.colorlib.com/r/animated-beam.json`
- [Blur Fade](https://velora.colorlib.com/components/blur-fade): The workhorse entrance — blur, fade and drift into view. (0.8 KB gzipped, deps: motion/react) Install: `npx shadcn@latest add https://velora.colorlib.com/r/blur-fade.json`
- [Scroll Progress](https://velora.colorlib.com/components/scroll-progress): Gradient page-progress bar pinned to the top. (0.4 KB gzipped, deps: motion/react) Install: `npx shadcn@latest add https://velora.colorlib.com/r/scroll-progress.json`
- [Browser Mockup](https://velora.colorlib.com/components/browser-mockup): Browser window frame for product screenshots. (0.5 KB gzipped, zero deps) Install: `npx shadcn@latest add https://velora.colorlib.com/r/browser-mockup.json`
- [iPhone Mockup](https://velora.colorlib.com/components/iphone-mockup): iPhone frame with dynamic island — pure CSS. (0.6 KB gzipped, zero deps) Install: `npx shadcn@latest add https://velora.colorlib.com/r/iphone-mockup.json`
- [Terminal](https://velora.colorlib.com/components/terminal): A terminal window that types its lines in view. (1.2 KB gzipped, deps: motion/react) Install: `npx shadcn@latest add https://velora.colorlib.com/r/terminal.json`

## Pages

- [Components](https://velora.colorlib.com/components): All components with live previews, install commands and source.
- [Themes](https://velora.colorlib.com/themes): Brand ramp presets — rebrand every effect by copying seven CSS variables.
- [Pricing](https://velora.colorlib.com/pricing): Free forever (MIT); Pro adds niche templates and variants.
- [Blog](https://velora.colorlib.com/blog): Engineering notes and announcements (MDX pipeline is part of the free template).
- [Changelog](https://velora.colorlib.com/changelog): Every release, documented.
- Template pages included free: about, contact, login, signup, blog, changelog, 404.