# Nvmora 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): Nvmora'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`
- [Background Beams](https://velora.colorlib.com/components/background-beams): Light beams flowing along curved paths behind content. (1.1 KB gzipped, deps: motion/react) Install: `npx shadcn@latest add https://velora.colorlib.com/r/background-beams.json`
- [Background Boxes](https://velora.colorlib.com/components/background-boxes): An isometric grid whose cells light up in brand tints under the pointer. (1.2 KB gzipped, zero deps) Install: `npx shadcn@latest add https://velora.colorlib.com/r/background-boxes.json`
- [Dotted Glow Background](https://velora.colorlib.com/components/dotted-glow-background): Canvas dot grid where drifting glows brighten dots and tint them toward the brand. (2.4 KB gzipped, zero deps) Install: `npx shadcn@latest add https://velora.colorlib.com/r/dotted-glow-background.json`
- [Flickering Grid](https://velora.colorlib.com/components/flickering-grid): Grid of squares fading in and out on staggered timers. (0.8 KB gzipped, zero deps) Install: `npx shadcn@latest add https://velora.colorlib.com/r/flickering-grid.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`
- [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`
- [Light Rays](https://velora.colorlib.com/components/light-rays): God rays fanning down from the top of a section. (0.7 KB gzipped, zero deps) Install: `npx shadcn@latest add https://velora.colorlib.com/r/light-rays.json`
- [Meteors](https://velora.colorlib.com/components/meteors): Falling meteor streaks for dark hero and CTA sections. (0.7 KB gzipped, zero deps) Install: `npx shadcn@latest add https://velora.colorlib.com/r/meteors.json`
- [Noise Background](https://velora.colorlib.com/components/noise-background): Drifting brand-gradient blobs under a static film-grain overlay; wraps its content. (1.8 KB gzipped, zero deps) Install: `npx shadcn@latest add https://velora.colorlib.com/r/noise-background.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`
- [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`
- [Ripple](https://velora.colorlib.com/components/ripple): Concentric rings pulsing outward — calm 'listening' backdrop. (0.6 KB gzipped, zero deps) Install: `npx shadcn@latest add https://velora.colorlib.com/r/ripple.json`
- [Shooting Stars](https://velora.colorlib.com/components/shooting-stars): A twinkling star field with brand-tinted streaks shooting across at random. (3.0 KB gzipped, zero deps) Install: `npx shadcn@latest add https://velora.colorlib.com/r/shooting-stars.json`
- [Vortex](https://velora.colorlib.com/components/vortex): Brand-tinted particles spiralling into the centre, leaving soft fading trails. (2.8 KB gzipped, zero deps) Install: `npx shadcn@latest add https://velora.colorlib.com/r/vortex.json`
- [Wavy Background](https://velora.colorlib.com/components/wavy-background): Blurred, translucent ribbons of brand colour flowing sideways on a canvas. (2.8 KB gzipped, zero deps) Install: `npx shadcn@latest add https://velora.colorlib.com/r/wavy-background.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`
- [Flip Words](https://velora.colorlib.com/components/flip-words): Cycles words with a springy blur-flip transition. (0.9 KB gzipped, deps: motion/react) Install: `npx shadcn@latest add https://velora.colorlib.com/r/flip-words.json`
- [Hyper Text](https://velora.colorlib.com/components/hyper-text): Scrambles through letters and resolves into the real text. (1.0 KB gzipped, zero deps) Install: `npx shadcn@latest add https://velora.colorlib.com/r/hyper-text.json`
- [Morphing Text](https://velora.colorlib.com/components/morphing-text): Blurs one phrase out as the next resolves in. (0.9 KB gzipped, zero deps) Install: `npx shadcn@latest add https://velora.colorlib.com/r/morphing-text.json`
- [Number Ticker](https://velora.colorlib.com/components/number-ticker): Springs a number up when it enters the viewport. (0.9 KB gzipped, deps: motion/react) Install: `npx shadcn@latest add https://velora.colorlib.com/r/number-ticker.json`
- [Sparkles Text](https://velora.colorlib.com/components/sparkles-text): Twinkling stars orbiting your headline. (1.0 KB gzipped, deps: motion/react) Install: `npx shadcn@latest add https://velora.colorlib.com/r/sparkles-text.json`
- [Text Highlighter](https://velora.colorlib.com/components/text-highlighter): Marker-pen sweep that draws in when the phrase scrolls into view. (0.8 KB gzipped, deps: motion/react) Install: `npx shadcn@latest add https://velora.colorlib.com/r/text-highlighter.json`
- [Text Hover Effect](https://velora.colorlib.com/components/text-hover-effect): Giant outlined word that draws in, then glows in brand colours under the pointer. (2.3 KB gzipped, deps: motion/react) Install: `npx shadcn@latest add https://velora.colorlib.com/r/text-hover-effect.json`
- [Text Reveal](https://velora.colorlib.com/components/text-reveal): Word-by-word blur reveal on scroll. (0.8 KB gzipped, deps: motion/react) Install: `npx shadcn@latest add https://velora.colorlib.com/r/text-reveal.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`
- [Typewriter](https://velora.colorlib.com/components/typewriter): Types, holds and deletes through a list of words. (1.3 KB gzipped, deps: motion/react) Install: `npx shadcn@latest add https://velora.colorlib.com/r/typewriter.json`
- [Word Rotate](https://velora.colorlib.com/components/word-rotate): Swaps a single word on a quiet vertical roll. (0.9 KB gzipped, deps: motion/react) Install: `npx shadcn@latest add https://velora.colorlib.com/r/word-rotate.json`
- [Confetti](https://velora.colorlib.com/components/confetti): Dependency-free confetti burst, fired from anywhere. (1.6 KB gzipped, zero deps) Install: `npx shadcn@latest add https://velora.colorlib.com/r/confetti.json`
- [Magnetic Button](https://velora.colorlib.com/components/magnetic-button): Leans toward the cursor and springs back on leave. (1.0 KB gzipped, deps: motion/react) Install: `npx shadcn@latest add https://velora.colorlib.com/r/magnetic-button.json`
- [Moving Border](https://velora.colorlib.com/components/moving-border): A light laps the button's border via offset-path. (1.0 KB gzipped, zero deps) Install: `npx shadcn@latest add https://velora.colorlib.com/r/moving-border.json`
- [Rainbow Button](https://velora.colorlib.com/components/rainbow-button): CTA cycling the brand ramp, with a matching glow beneath. (0.8 KB gzipped, zero deps) Install: `npx shadcn@latest add https://velora.colorlib.com/r/rainbow-button.json`
- [Ripple Button](https://velora.colorlib.com/components/ripple-button): Expands a ripple from the exact point you pressed. (1.2 KB gzipped, zero deps) Install: `npx shadcn@latest add https://velora.colorlib.com/r/ripple-button.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`
- [Stateful Button](https://velora.colorlib.com/components/stateful-button): Button that morphs through loading, success and error states while a Promise settles. (2.0 KB gzipped, zero deps) Install: `npx shadcn@latest add https://velora.colorlib.com/r/stateful-button.json`
- [Theme Toggler](https://velora.colorlib.com/components/theme-toggler): Wipes the new theme in as a circle using View Transitions. (1.2 KB gzipped, zero deps) Install: `npx shadcn@latest add https://velora.colorlib.com/r/theme-toggler.json`
- [Animated List](https://velora.colorlib.com/components/animated-list): Looping feed that springs each item in, newest on top. (1.1 KB gzipped, deps: motion/react) Install: `npx shadcn@latest add https://velora.colorlib.com/r/animated-list.json`
- [Animated Tooltip](https://velora.colorlib.com/components/animated-tooltip): Avatar row with springy name tooltips on hover. (1.2 KB gzipped, deps: motion/react) Install: `npx shadcn@latest add https://velora.colorlib.com/r/animated-tooltip.json`
- [Avatar Circles](https://velora.colorlib.com/components/avatar-circles): Stacked initials avatars with a +N badge — zero images. (0.7 KB gzipped, zero deps) Install: `npx shadcn@latest add https://velora.colorlib.com/r/avatar-circles.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`
- [Card Hover Effect](https://velora.colorlib.com/components/card-hover-effect): Link-card grid with a highlight that glides to whichever card you hover or focus. (1.7 KB gzipped, deps: motion/react) Install: `npx shadcn@latest add https://velora.colorlib.com/r/card-hover-effect.json`
- [Card Stack](https://velora.colorlib.com/components/card-stack): Deck that shuffles the top card to the back on a timer. (1.2 KB gzipped, deps: motion/react) Install: `npx shadcn@latest add https://velora.colorlib.com/r/card-stack.json`
- [Compare Slider](https://velora.colorlib.com/components/compare-slider): Before/after wipe with a keyboard-accessible divider. (1.2 KB gzipped, zero deps) Install: `npx shadcn@latest add https://velora.colorlib.com/r/compare-slider.json`
- [Direction Aware Hover](https://velora.colorlib.com/components/direction-aware-hover): Overlay enters from the edge the cursor actually crossed. (1.3 KB gzipped, zero deps) Install: `npx shadcn@latest add https://velora.colorlib.com/r/direction-aware-hover.json`
- [Dock](https://velora.colorlib.com/components/dock): macOS-style dock with cursor magnification. (1.4 KB gzipped, deps: motion/react) Install: `npx shadcn@latest add https://velora.colorlib.com/r/dock.json`
- [Draggable Card](https://velora.colorlib.com/components/draggable-card): Scattered photo cards you can fling around with inertia, tilt and bounds. (2.4 KB gzipped, deps: motion/react) Install: `npx shadcn@latest add https://velora.colorlib.com/r/draggable-card.json`
- [Evervault Card](https://velora.colorlib.com/components/evervault-card): Card that reveals shuffling brand-tinted characters through a mask following the pointer. (1.7 KB gzipped, zero deps) Install: `npx shadcn@latest add https://velora.colorlib.com/r/evervault-card.json`
- [Expandable Card](https://velora.colorlib.com/components/expandable-card): Expands into a centred panel with shared-layout transitions. (1.9 KB gzipped, deps: motion/react) Install: `npx shadcn@latest add https://velora.colorlib.com/r/expandable-card.json`
- [File Tree](https://velora.colorlib.com/components/file-tree): Collapsible tree for documenting project structure. (1.1 KB gzipped, zero deps) Install: `npx shadcn@latest add https://velora.colorlib.com/r/file-tree.json`
- [Focus Cards](https://velora.colorlib.com/components/focus-cards): Image grid where the hovered card stays sharp while the others blur and step back. (1.5 KB gzipped, zero deps) Install: `npx shadcn@latest add https://velora.colorlib.com/r/focus-cards.json`
- [Glare Card](https://velora.colorlib.com/components/glare-card): Sheet of light tracking the cursor, like a foil trading card. (0.8 KB gzipped, zero deps) Install: `npx shadcn@latest add https://velora.colorlib.com/r/glare-card.json`
- [Layout Grid](https://velora.colorlib.com/components/layout-grid): Bento grid of image tiles that expand in place to reveal rich content. (2.3 KB gzipped, deps: motion/react) Install: `npx shadcn@latest add https://velora.colorlib.com/r/layout-grid.json`
- [Marquee](https://velora.colorlib.com/components/marquee): Seamless scrolling loop — horizontal, vertical, hover-pause. (0.9 KB gzipped, zero deps) Install: `npx shadcn@latest add https://velora.colorlib.com/r/marquee.json`
- [Orbiting Circles](https://velora.colorlib.com/components/orbiting-circles): Items evenly distributed on rotating orbital rings. (1.0 KB gzipped, zero deps) Install: `npx shadcn@latest add https://velora.colorlib.com/r/orbiting-circles.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`
- [Wobble Card](https://velora.colorlib.com/components/wobble-card): Colored card that drifts toward the pointer, with parallax content and grain. (1.4 KB gzipped, deps: motion/react) Install: `npx shadcn@latest add https://velora.colorlib.com/r/wobble-card.json`
- [Animated Sidebar](https://velora.colorlib.com/components/animated-sidebar): Icon rail that expands on hover or focus and turns into a drawer on narrow screens. (2.9 KB gzipped, zero deps) Install: `npx shadcn@latest add https://velora.colorlib.com/r/animated-sidebar.json`
- [Animated Tabs](https://velora.colorlib.com/components/animated-tabs): Tabs with a gliding pill and panels stacked like cards that peek behind. (1.9 KB gzipped, deps: motion/react) Install: `npx shadcn@latest add https://velora.colorlib.com/r/animated-tabs.json`
- [Floating Navbar](https://velora.colorlib.com/components/floating-navbar): Hides on scroll down, returns the moment you scroll up. (1.2 KB gzipped, zero deps) Install: `npx shadcn@latest add https://velora.colorlib.com/r/floating-navbar.json`
- [Navbar Menu](https://velora.colorlib.com/components/navbar-menu): Hover-driven menu whose pill and panel morph between items. (1.6 KB gzipped, deps: motion/react) Install: `npx shadcn@latest add https://velora.colorlib.com/r/navbar-menu.json`
- [Resizable Navbar](https://velora.colorlib.com/components/resizable-navbar): Full-width navbar that shrinks into a floating, blurred pill once you scroll. (2.6 KB gzipped, deps: motion/react) Install: `npx shadcn@latest add https://velora.colorlib.com/r/resizable-navbar.json`
- [Sticky Banner](https://velora.colorlib.com/components/sticky-banner): Dismissible announcement bar pinned above the header. (1.2 KB gzipped, zero deps) Install: `npx shadcn@latest add https://velora.colorlib.com/r/sticky-banner.json`
- [File Drop](https://velora.colorlib.com/components/file-drop): Upload zone that lifts and glows while a file is over it. (1.4 KB gzipped, zero deps) Install: `npx shadcn@latest add https://velora.colorlib.com/r/file-drop.json`
- [Stepper](https://velora.colorlib.com/components/stepper): Progress indicator for multi-step forms and checkouts. (1.4 KB gzipped, deps: motion/react) Install: `npx shadcn@latest add https://velora.colorlib.com/r/stepper.json`
- [Vanish Input](https://velora.colorlib.com/components/vanish-input): Search field whose placeholder cycles while empty. (1.6 KB gzipped, deps: motion/react) Install: `npx shadcn@latest add https://velora.colorlib.com/r/vanish-input.json`
- [Animated Modal](https://velora.colorlib.com/components/animated-modal): Native dialog whose panel springs in with a tilt over a blurred backdrop. (3.0 KB gzipped, deps: motion/react) Install: `npx shadcn@latest add https://velora.colorlib.com/r/animated-modal.json`
- [Loaders](https://velora.colorlib.com/components/loaders): Five tiny CSS loading indicators — dots, pulse, orbit, bars and spinner. (1.6 KB gzipped, zero deps) Install: `npx shadcn@latest add https://velora.colorlib.com/r/loaders.json`
- [Multi Step Loader](https://velora.colorlib.com/components/multi-step-loader): Full-screen overlay that ticks through a list of steps, keeping the active one centred. (3.0 KB gzipped, zero deps) Install: `npx shadcn@latest add https://velora.colorlib.com/r/multi-step-loader.json`
- [Animated Testimonials](https://velora.colorlib.com/components/animated-testimonials): Crossfades portraits behind a rotating quote. (2.1 KB gzipped, deps: motion/react) Install: `npx shadcn@latest add https://velora.colorlib.com/r/animated-testimonials.json`
- [Logo Cloud](https://velora.colorlib.com/components/logo-cloud): Customer logos muted until hovered, so they read as texture. (0.8 KB gzipped, zero deps) Install: `npx shadcn@latest add https://velora.colorlib.com/r/logo-cloud.json`
- [Tweet Card](https://velora.colorlib.com/components/tweet-card): Static social-proof card — props, not an API call. (1.2 KB gzipped, zero deps) Install: `npx shadcn@latest add https://velora.colorlib.com/r/tweet-card.json`
- [Container Scroll](https://velora.colorlib.com/components/container-scroll): Screenshot panel that rotates flat as it scrolls into view. (0.8 KB gzipped, deps: motion/react) Install: `npx shadcn@latest add https://velora.colorlib.com/r/container-scroll.json`
- [Hero Parallax](https://velora.colorlib.com/components/hero-parallax): Hero copy over three card rows that slide apart as a tilted block flattens. (2.1 KB gzipped, deps: motion/react) Install: `npx shadcn@latest add https://velora.colorlib.com/r/hero-parallax.json`
- [Macbook Scroll](https://velora.colorlib.com/components/macbook-scroll): A CSS-drawn laptop pins in place and opens its lid as the screenshot scales up. (2.0 KB gzipped, deps: motion/react) Install: `npx shadcn@latest add https://velora.colorlib.com/r/macbook-scroll.json`
- [Parallax Grid](https://velora.colorlib.com/components/parallax-grid): Gallery columns drifting at different rates for depth. (0.8 KB gzipped, deps: motion/react) Install: `npx shadcn@latest add https://velora.colorlib.com/r/parallax-grid.json`
- [Scroll Progress](https://velora.colorlib.com/components/scroll-progress): Gradient page-progress bar pinned to the top. (0.5 KB gzipped, deps: motion/react) Install: `npx shadcn@latest add https://velora.colorlib.com/r/scroll-progress.json`
- [Scroll Velocity](https://velora.colorlib.com/components/scroll-velocity): Marquee whose speed and direction follow your scrolling. (1.4 KB gzipped, deps: motion/react) Install: `npx shadcn@latest add https://velora.colorlib.com/r/scroll-velocity.json`
- [Sticky Scroll](https://velora.colorlib.com/components/sticky-scroll): Copy scrolls past a pinned panel that swaps per section. (1.3 KB gzipped, deps: motion/react) Install: `npx shadcn@latest add https://velora.colorlib.com/r/sticky-scroll.json`
- [Timeline](https://velora.colorlib.com/components/timeline): Vertical timeline with sticky labels and a gradient beam that fills as you scroll. (1.3 KB gzipped, deps: motion/react) Install: `npx shadcn@latest add https://velora.colorlib.com/r/timeline.json`
- [Tracing Beam](https://velora.colorlib.com/components/tracing-beam): Gradient line that draws itself down long-form content. (0.8 KB gzipped, deps: motion/react) Install: `npx shadcn@latest add https://velora.colorlib.com/r/tracing-beam.json`
- [Animated Beam](https://velora.colorlib.com/components/animated-beam): Draws an animated connection between any two elements. (1.5 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. (1.0 KB gzipped, deps: motion/react) Install: `npx shadcn@latest add https://velora.colorlib.com/r/blur-fade.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`
- [Glowing Effect](https://velora.colorlib.com/components/glowing-effect): Border glow that follows the pointer around a card's edge as it comes near. (1.8 KB gzipped, zero deps) Install: `npx shadcn@latest add https://velora.colorlib.com/r/glowing-effect.json`
- [3D Card](https://velora.colorlib.com/components/3d-card): Perspective card that turns toward the pointer while its layers lift to different depths. (1.6 KB gzipped, deps: motion/react) Install: `npx shadcn@latest add https://velora.colorlib.com/r/3d-card.json`
- [3D Pin](https://velora.colorlib.com/components/3d-pin): Card that tilts back as a glowing pin rises with a label chip and rippling rings. (1.9 KB gzipped, zero deps) Install: `npx shadcn@latest add https://velora.colorlib.com/r/3d-pin.json`
- [3D Marquee](https://velora.colorlib.com/components/3d-marquee): A tilted 3D grid of images whose columns scroll up and down in an endless loop. (1.8 KB gzipped, zero deps) Install: `npx shadcn@latest add https://velora.colorlib.com/r/3d-marquee.json`
- [Apple Cards Carousel](https://velora.colorlib.com/components/apple-cards-carousel): Snap-scrolling row of tall image cards that morph into a full modal story. (3.1 KB gzipped, deps: react-dom, motion/react) Install: `npx shadcn@latest add https://velora.colorlib.com/r/apple-cards-carousel.json`
- [Image Slider](https://velora.colorlib.com/components/image-slider): Full-bleed image slider with crossfade-zoom, autoplay, dots, arrows and swipe. (3.0 KB gzipped, deps: motion/react) Install: `npx shadcn@latest add https://velora.colorlib.com/r/image-slider.json`
- [Following Pointer](https://velora.colorlib.com/components/following-pointer): Swaps the cursor for an arrow and a name tag that trail the pointer inside a region. (1.7 KB gzipped, deps: motion/react) Install: `npx shadcn@latest add https://velora.colorlib.com/r/following-pointer.json`
- [Lens](https://velora.colorlib.com/components/lens): Circular magnifier that follows the pointer or arrow keys to zoom into an image. (1.7 KB gzipped, zero deps) Install: `npx shadcn@latest add https://velora.colorlib.com/r/lens.json`
- [Pointer Highlight](https://velora.colorlib.com/components/pointer-highlight): Draws an outline around a phrase on scroll, then glides a pointer icon to its corner. (1.2 KB gzipped, deps: motion/react) Install: `npx shadcn@latest add https://velora.colorlib.com/r/pointer-highlight.json`
- [Smooth Cursor](https://velora.colorlib.com/components/smooth-cursor): Dot-and-ring custom cursor; the ring trails on a spring and grows over links and buttons. (1.9 KB gzipped, deps: react-dom, motion/react) Install: `npx shadcn@latest add https://velora.colorlib.com/r/smooth-cursor.json`
- [Globe](https://velora.colorlib.com/components/globe): Dotted canvas globe with markers, great-circle arcs, drag and keyboard rotation. (5.2 KB gzipped, zero deps) Install: `npx shadcn@latest add https://velora.colorlib.com/r/globe.json`
- [World Map](https://velora.colorlib.com/components/world-map): Dotted SVG world map with markers, pulsing hubs and animated connection arcs. (3.8 KB gzipped, zero deps) Install: `npx shadcn@latest add https://velora.colorlib.com/r/world-map.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`
- [Code Block](https://velora.colorlib.com/components/code-block): Code panel with tabs, line numbers, highlighted lines and a copy button. (2.9 KB gzipped, deps: lucide-react) Install: `npx shadcn@latest add https://velora.colorlib.com/r/code-block.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.4 KB gzipped, deps: motion/react) Install: `npx shadcn@latest add https://velora.colorlib.com/r/terminal.json`

## Blocks

Complete sections built from the components above. Installing a block also installs every component it uses.

### Hero Sections

- [Aurora hero](https://velora.colorlib.com/blocks/hero-sections#hero-aurora): Centered hero with a drifting aurora, dotted backdrop, announcement pill and staggered copy. Install: `npx shadcn@latest add https://velora.colorlib.com/r/hero-aurora.json`
- [Globe split hero](https://velora.colorlib.com/blocks/hero-sections#hero-globe): Split hero with copy, CTAs and live stats beside an interactive dotted globe with arcs. Install: `npx shadcn@latest add https://velora.colorlib.com/r/hero-globe.json`
- [Product screenshot hero](https://velora.colorlib.com/blocks/hero-sections#hero-screenshot): Centered headline above a dashboard in a browser frame with a border beam and a logo row. Install: `npx shadcn@latest add https://velora.colorlib.com/r/hero-screenshot.json`
- [Phone split hero](https://velora.colorlib.com/blocks/hero-sections#hero-split-phone): App launch hero with an email capture on the left and an app screen in an iPhone frame. Install: `npx shadcn@latest add https://velora.colorlib.com/r/hero-split-phone.json`
- [Wavy hero](https://velora.colorlib.com/blocks/hero-sections#hero-waves): Bold centered hero over flowing waves, with a rotating headline word and avatar social proof. Install: `npx shadcn@latest add https://velora.colorlib.com/r/hero-waves.json`
- [Developer tool hero](https://velora.colorlib.com/blocks/hero-sections#hero-grid-minimal): Minimal hero on a retro grid with a typed headline accent, an install terminal and two CTAs. Install: `npx shadcn@latest add https://velora.colorlib.com/r/hero-grid-minimal.json`

### Feature Sections

- [Bento feature grid](https://velora.colorlib.com/blocks/feature-sections#features-bento): Five-card bento grid with live visuals: integration beams, orbiting icons, a chart, a tag marquee and a globe. Install: `npx shadcn@latest add https://velora.colorlib.com/r/features-bento.json`
- [Icon feature grid](https://velora.colorlib.com/blocks/feature-sections#features-icon-grid): Heading and six icon feature cards in a three-column grid, each border lit by a cursor-following glow. Install: `npx shadcn@latest add https://velora.colorlib.com/r/features-icon-grid.json`
- [Tabbed product tour](https://velora.colorlib.com/blocks/feature-sections#features-tabs): Product tour with animated tabs; each tab pairs short copy and a checklist with a Tailwind-built app mock. Install: `npx shadcn@latest add https://velora.colorlib.com/r/features-tabs.json`
- [Alternating screenshot rows](https://velora.colorlib.com/blocks/feature-sections#features-split-screenshot): Two alternating rows of copy with a checklist beside a browser-framed dashboard mock, sides swapped. Install: `npx shadcn@latest add https://velora.colorlib.com/r/features-split-screenshot.json`
- [Numbered steps](https://velora.colorlib.com/blocks/feature-sections#features-steps): How-it-works section with four numbered steps on a gradient connector line, each with a small UI visual. Install: `npx shadcn@latest add https://velora.colorlib.com/r/features-steps.json`

### Pricing Sections

- [Three-tier pricing](https://velora.colorlib.com/blocks/pricing-sections#pricing-three-tiers): Three plan cards with a monthly/yearly switch, a savings badge and a highlighted middle plan. Install: `npx shadcn@latest add https://velora.colorlib.com/r/pricing-three-tiers.json`
- [Single plan pricing](https://velora.colorlib.com/blocks/pricing-sections#pricing-single-plan): One all-inclusive plan card beside a benefit list and short reassurance answers. Install: `npx shadcn@latest add https://velora.colorlib.com/r/pricing-single-plan.json`
- [Pricing comparison table](https://velora.colorlib.com/blocks/pricing-sections#pricing-comparison): Grouped feature comparison table with a sticky plan header, and per-plan tabs on mobile. Install: `npx shadcn@latest add https://velora.colorlib.com/r/pricing-comparison.json`

### Testimonial Sections

- [Testimonial marquee](https://velora.colorlib.com/blocks/testimonial-sections#testimonials-marquee): Two rows of review cards scrolling in opposite directions, with faded edges and pause on hover or focus. Install: `npx shadcn@latest add https://velora.colorlib.com/r/testimonials-marquee.json`
- [Featured testimonial](https://velora.colorlib.com/blocks/testimonial-sections#testimonials-featured): One rotating quote with crossfading portraits, framed by a beam card over a row of counting stats. Install: `npx shadcn@latest add https://velora.colorlib.com/r/testimonials-featured.json`
- [Testimonial grid](https://velora.colorlib.com/blocks/testimonial-sections#testimonials-grid): Masonry wall of social posts and quote cards, led by a wide case-study quote with a headline metric. Install: `npx shadcn@latest add https://velora.colorlib.com/r/testimonials-grid.json`

### CTA Sections

- [Vortex CTA band](https://velora.colorlib.com/blocks/cta-sections#cta-vortex): Dark rounded call-to-action band over a brand-tinted particle vortex, with two actions and fine print. Install: `npx shadcn@latest add https://velora.colorlib.com/r/cta-vortex.json`
- [Split CTA with product visual](https://velora.colorlib.com/blocks/cta-sections#cta-split-image): Two-column CTA card with a benefit list and a dashboard mock-up, traced by an animated border beam. Install: `npx shadcn@latest add https://velora.colorlib.com/r/cta-split-image.json`
- [Newsletter sign-up](https://velora.colorlib.com/blocks/cta-sections#cta-newsletter): Newsletter card over a glowing dot grid with a labelled email field, subscriber avatars and a privacy note. Install: `npx shadcn@latest add https://velora.colorlib.com/r/cta-newsletter.json`

### Logo Clouds

- [Logo marquee](https://velora.colorlib.com/blocks/logo-clouds#logos-marquee): A “Trusted by” line over a scrolling strip of grayscale logos that take their colour on hover. Install: `npx shadcn@latest add https://velora.colorlib.com/r/logos-marquee.json`
- [Logo grid](https://velora.colorlib.com/blocks/logo-clouds#logos-grid): Bordered grid of customer logos with a cursor spotlight per cell, beside a heading and stories link. Install: `npx shadcn@latest add https://velora.colorlib.com/r/logos-grid.json`

### FAQ Sections

- [Centered FAQ accordion](https://velora.colorlib.com/blocks/faq-sections#faq-accordion): Centered heading over an accordion of eight questions, closed by a contact row. Install: `npx shadcn@latest add https://velora.colorlib.com/r/faq-accordion.json`
- [Two-column FAQ](https://velora.colorlib.com/blocks/faq-sections#faq-two-column): Sticky intro and contact card on the left, an accordion of questions on the right. Install: `npx shadcn@latest add https://velora.colorlib.com/r/faq-two-column.json`

### Navbars

- [Floating pill navbar](https://velora.colorlib.com/blocks/navbars#navbar-floating): Full-width navbar that shrinks into a blurred floating pill on scroll, with a CTA and mobile menu. Install: `npx shadcn@latest add https://velora.colorlib.com/r/navbar-floating.json`
- [Mega menu navbar](https://velora.colorlib.com/blocks/navbars#navbar-mega): Top bar with a keyboard-accessible Product mega menu, search, sign-in and a slide-over mobile menu. Install: `npx shadcn@latest add https://velora.colorlib.com/r/navbar-mega.json`

### Footers

- [Link columns footer](https://velora.colorlib.com/blocks/footers#footer-columns): Footer with logo, tagline and social links, four link columns and a copyright bar with legal links. Install: `npx shadcn@latest add https://velora.colorlib.com/r/footer-columns.json`
- [Giant wordmark footer](https://velora.colorlib.com/blocks/footers#footer-wordmark): Minimal footer that ends in an oversized outlined wordmark lighting up in brand colours under the pointer. Install: `npx shadcn@latest add https://velora.colorlib.com/r/footer-wordmark.json`
- [Newsletter footer](https://velora.colorlib.com/blocks/footers#footer-newsletter): Footer with a newsletter sign-up row, link columns and a live “All systems normal” status badge. Install: `npx shadcn@latest add https://velora.colorlib.com/r/footer-newsletter.json`

### Login & Sign-up

- [Split login page](https://velora.colorlib.com/blocks/auth-sections#auth-login-split): Login form with password reveal, remember-me and social sign-in beside an aurora testimonial panel. Install: `npx shadcn@latest add https://velora.colorlib.com/r/auth-login-split.json`
- [Sign-up card](https://velora.colorlib.com/blocks/auth-sections#auth-signup-card): Centered sign-up card over a grid and light beams, with live password rules, terms and social sign-up. Install: `npx shadcn@latest add https://velora.colorlib.com/r/auth-signup-card.json`

## Pages

- [Components](https://velora.colorlib.com/components): All components with live previews, install commands and source.
- [Blocks](https://velora.colorlib.com/blocks): Free sections — heroes, features, pricing, testimonials, CTAs and more.
- [llms-full.txt](https://velora.colorlib.com/llms-full.txt): This index plus props, accessibility notes and a working example for every component.
- [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.