@velora
100 animated React components and 31 free section blocks for Tailwind CSS 4 — accessible, reduced-motion safe and MIT licensed.
Install this registry
npx shadcn@latest add https://velora.colorlib.com/r/registry.json pnpm dlx shadcn@latest add https://velora.colorlib.com/r/registry.json bunx shadcn@latest add https://velora.colorlib.com/r/registry.json curl -s https://velora.colorlib.com/r/registry.json Components
131 totalVelora's signature drifting aurora gradient backdrop.
npx shadcn@latest add https://velora.colorlib.com/r/aurora-background.json Light beams flowing along curved paths behind content.
npx shadcn@latest add https://velora.colorlib.com/r/background-beams.json An isometric grid whose cells light up in brand tints under the pointer.
npx shadcn@latest add https://velora.colorlib.com/r/background-boxes.json Canvas dot grid where drifting glows brighten dots and tint them toward the brand.
npx shadcn@latest add https://velora.colorlib.com/r/dotted-glow-background.json Grid of squares fading in and out on staggered timers.
npx shadcn@latest add https://velora.colorlib.com/r/flickering-grid.json SVG grid and dot backdrops with maskable depth.
npx shadcn@latest add https://velora.colorlib.com/r/grid-pattern.json A glowing lamp-line header that expands into view.
npx shadcn@latest add https://velora.colorlib.com/r/lamp.json God rays fanning down from the top of a section.
npx shadcn@latest add https://velora.colorlib.com/r/light-rays.json Falling meteor streaks for dark hero and CTA sections.
npx shadcn@latest add https://velora.colorlib.com/r/meteors.json Drifting brand-gradient blobs under a static film-grain overlay; wraps its content.
npx shadcn@latest add https://velora.colorlib.com/r/noise-background.json Drifting, twinkling particle field on a lightweight canvas.
npx shadcn@latest add https://velora.colorlib.com/r/particles.json Perspective grid scrolling forever toward the horizon.
npx shadcn@latest add https://velora.colorlib.com/r/retro-grid.json Concentric rings pulsing outward — calm 'listening' backdrop.
npx shadcn@latest add https://velora.colorlib.com/r/ripple.json A twinkling star field with brand-tinted streaks shooting across at random.
npx shadcn@latest add https://velora.colorlib.com/r/shooting-stars.json Brand-tinted particles spiralling into the centre, leaving soft fading trails.
npx shadcn@latest add https://velora.colorlib.com/r/vortex.json Blurred, translucent ribbons of brand colour flowing sideways on a canvas.
npx shadcn@latest add https://velora.colorlib.com/r/wavy-background.json Brand gradient sweeping continuously through text.
npx shadcn@latest add https://velora.colorlib.com/r/animated-gradient-text.json Cycles words with a springy blur-flip transition.
npx shadcn@latest add https://velora.colorlib.com/r/flip-words.json Scrambles through letters and resolves into the real text.
npx shadcn@latest add https://velora.colorlib.com/r/hyper-text.json Blurs one phrase out as the next resolves in.
npx shadcn@latest add https://velora.colorlib.com/r/morphing-text.json Springs a number up when it enters the viewport.
npx shadcn@latest add https://velora.colorlib.com/r/number-ticker.json Twinkling stars orbiting your headline.
npx shadcn@latest add https://velora.colorlib.com/r/sparkles-text.json Marker-pen sweep that draws in when the phrase scrolls into view.
npx shadcn@latest add https://velora.colorlib.com/r/text-highlighter.json Giant outlined word that draws in, then glows in brand colours under the pointer.
npx shadcn@latest add https://velora.colorlib.com/r/text-hover-effect.json Word-by-word blur reveal on scroll.
npx shadcn@latest add https://velora.colorlib.com/r/text-reveal.json A soft light sweep — great for AI loading states.
npx shadcn@latest add https://velora.colorlib.com/r/text-shimmer.json Types, holds and deletes through a list of words.
npx shadcn@latest add https://velora.colorlib.com/r/typewriter.json Swaps a single word on a quiet vertical roll.
npx shadcn@latest add https://velora.colorlib.com/r/word-rotate.json Dependency-free confetti burst, fired from anywhere.
npx shadcn@latest add https://velora.colorlib.com/r/confetti.json Leans toward the cursor and springs back on leave.
npx shadcn@latest add https://velora.colorlib.com/r/magnetic-button.json A light laps the button's border via offset-path.
npx shadcn@latest add https://velora.colorlib.com/r/moving-border.json CTA cycling the brand ramp, with a matching glow beneath.
npx shadcn@latest add https://velora.colorlib.com/r/rainbow-button.json Expands a ripple from the exact point you pressed.
npx shadcn@latest add https://velora.colorlib.com/r/ripple-button.json CTA button with a continuous light sweep.
npx shadcn@latest add https://velora.colorlib.com/r/shimmer-button.json Button that morphs through loading, success and error states while a Promise settles.
npx shadcn@latest add https://velora.colorlib.com/r/stateful-button.json Wipes the new theme in as a circle using View Transitions.
npx shadcn@latest add https://velora.colorlib.com/r/theme-toggler.json Looping feed that springs each item in, newest on top.
npx shadcn@latest add https://velora.colorlib.com/r/animated-list.json Avatar row with springy name tooltips on hover.
npx shadcn@latest add https://velora.colorlib.com/r/animated-tooltip.json Stacked initials avatars with a +N badge — zero images.
npx shadcn@latest add https://velora.colorlib.com/r/avatar-circles.json Feature bento with hover-reveal CTAs and rich backgrounds.
npx shadcn@latest add https://velora.colorlib.com/r/bento-grid.json Link-card grid with a highlight that glides to whichever card you hover or focus.
npx shadcn@latest add https://velora.colorlib.com/r/card-hover-effect.json Deck that shuffles the top card to the back on a timer.
npx shadcn@latest add https://velora.colorlib.com/r/card-stack.json Before/after wipe with a keyboard-accessible divider.
npx shadcn@latest add https://velora.colorlib.com/r/compare-slider.json Overlay enters from the edge the cursor actually crossed.
npx shadcn@latest add https://velora.colorlib.com/r/direction-aware-hover.json macOS-style dock with cursor magnification.
npx shadcn@latest add https://velora.colorlib.com/r/dock.json Scattered photo cards you can fling around with inertia, tilt and bounds.
npx shadcn@latest add https://velora.colorlib.com/r/draggable-card.json Card that reveals shuffling brand-tinted characters through a mask following the pointer.
npx shadcn@latest add https://velora.colorlib.com/r/evervault-card.json Expands into a centred panel with shared-layout transitions.
npx shadcn@latest add https://velora.colorlib.com/r/expandable-card.json Collapsible tree for documenting project structure.
npx shadcn@latest add https://velora.colorlib.com/r/file-tree.json Image grid where the hovered card stays sharp while the others blur and step back.
npx shadcn@latest add https://velora.colorlib.com/r/focus-cards.json Sheet of light tracking the cursor, like a foil trading card.
npx shadcn@latest add https://velora.colorlib.com/r/glare-card.json Bento grid of image tiles that expand in place to reveal rich content.
npx shadcn@latest add https://velora.colorlib.com/r/layout-grid.json Seamless scrolling loop — horizontal, vertical, hover-pause.
npx shadcn@latest add https://velora.colorlib.com/r/marquee.json Items evenly distributed on rotating orbital rings.
npx shadcn@latest add https://velora.colorlib.com/r/orbiting-circles.json A radial glow that follows the cursor across the card.
npx shadcn@latest add https://velora.colorlib.com/r/spotlight-card.json 3D perspective tilt that tracks the cursor.
npx shadcn@latest add https://velora.colorlib.com/r/tilt-card.json Colored card that drifts toward the pointer, with parallax content and grain.
npx shadcn@latest add https://velora.colorlib.com/r/wobble-card.json Icon rail that expands on hover or focus and turns into a drawer on narrow screens.
npx shadcn@latest add https://velora.colorlib.com/r/animated-sidebar.json Tabs with a gliding pill and panels stacked like cards that peek behind.
npx shadcn@latest add https://velora.colorlib.com/r/animated-tabs.json Hides on scroll down, returns the moment you scroll up.
npx shadcn@latest add https://velora.colorlib.com/r/floating-navbar.json Hover-driven menu whose pill and panel morph between items.
npx shadcn@latest add https://velora.colorlib.com/r/navbar-menu.json Full-width navbar that shrinks into a floating, blurred pill once you scroll.
npx shadcn@latest add https://velora.colorlib.com/r/resizable-navbar.json Dismissible announcement bar pinned above the header.
npx shadcn@latest add https://velora.colorlib.com/r/sticky-banner.json Upload zone that lifts and glows while a file is over it.
npx shadcn@latest add https://velora.colorlib.com/r/file-drop.json Progress indicator for multi-step forms and checkouts.
npx shadcn@latest add https://velora.colorlib.com/r/stepper.json Search field whose placeholder cycles while empty.
npx shadcn@latest add https://velora.colorlib.com/r/vanish-input.json Native dialog whose panel springs in with a tilt over a blurred backdrop.
npx shadcn@latest add https://velora.colorlib.com/r/animated-modal.json Five tiny CSS loading indicators — dots, pulse, orbit, bars and spinner.
npx shadcn@latest add https://velora.colorlib.com/r/loaders.json Full-screen overlay that ticks through a list of steps, keeping the active one centred.
npx shadcn@latest add https://velora.colorlib.com/r/multi-step-loader.json Crossfades portraits behind a rotating quote.
npx shadcn@latest add https://velora.colorlib.com/r/animated-testimonials.json Customer logos muted until hovered, so they read as texture.
npx shadcn@latest add https://velora.colorlib.com/r/logo-cloud.json Static social-proof card — props, not an API call.
npx shadcn@latest add https://velora.colorlib.com/r/tweet-card.json Screenshot panel that rotates flat as it scrolls into view.
npx shadcn@latest add https://velora.colorlib.com/r/container-scroll.json Hero copy over three card rows that slide apart as a tilted block flattens.
npx shadcn@latest add https://velora.colorlib.com/r/hero-parallax.json A CSS-drawn laptop pins in place and opens its lid as the screenshot scales up.
npx shadcn@latest add https://velora.colorlib.com/r/macbook-scroll.json Gallery columns drifting at different rates for depth.
npx shadcn@latest add https://velora.colorlib.com/r/parallax-grid.json Gradient page-progress bar pinned to the top.
npx shadcn@latest add https://velora.colorlib.com/r/scroll-progress.json Marquee whose speed and direction follow your scrolling.
npx shadcn@latest add https://velora.colorlib.com/r/scroll-velocity.json Copy scrolls past a pinned panel that swaps per section.
npx shadcn@latest add https://velora.colorlib.com/r/sticky-scroll.json Vertical timeline with sticky labels and a gradient beam that fills as you scroll.
npx shadcn@latest add https://velora.colorlib.com/r/timeline.json Gradient line that draws itself down long-form content.
npx shadcn@latest add https://velora.colorlib.com/r/tracing-beam.json Draws an animated connection between any two elements.
npx shadcn@latest add https://velora.colorlib.com/r/animated-beam.json The workhorse entrance — blur, fade and drift into view.
npx shadcn@latest add https://velora.colorlib.com/r/blur-fade.json A beam of light traveling around any border.
npx shadcn@latest add https://velora.colorlib.com/r/border-beam.json Border glow that follows the pointer around a card's edge as it comes near.
npx shadcn@latest add https://velora.colorlib.com/r/glowing-effect.json Perspective card that turns toward the pointer while its layers lift to different depths.
npx shadcn@latest add https://velora.colorlib.com/r/3d-card.json Card that tilts back as a glowing pin rises with a label chip and rippling rings.
npx shadcn@latest add https://velora.colorlib.com/r/3d-pin.json A tilted 3D grid of images whose columns scroll up and down in an endless loop.
npx shadcn@latest add https://velora.colorlib.com/r/3d-marquee.json Snap-scrolling row of tall image cards that morph into a full modal story.
npx shadcn@latest add https://velora.colorlib.com/r/apple-cards-carousel.json Full-bleed image slider with crossfade-zoom, autoplay, dots, arrows and swipe.
npx shadcn@latest add https://velora.colorlib.com/r/image-slider.json Swaps the cursor for an arrow and a name tag that trail the pointer inside a region.
npx shadcn@latest add https://velora.colorlib.com/r/following-pointer.json Circular magnifier that follows the pointer or arrow keys to zoom into an image.
npx shadcn@latest add https://velora.colorlib.com/r/lens.json Draws an outline around a phrase on scroll, then glides a pointer icon to its corner.
npx shadcn@latest add https://velora.colorlib.com/r/pointer-highlight.json Dot-and-ring custom cursor; the ring trails on a spring and grows over links and buttons.
npx shadcn@latest add https://velora.colorlib.com/r/smooth-cursor.json Dotted canvas globe with markers, great-circle arcs, drag and keyboard rotation.
npx shadcn@latest add https://velora.colorlib.com/r/globe.json Dotted SVG world map with markers, pulsing hubs and animated connection arcs.
npx shadcn@latest add https://velora.colorlib.com/r/world-map.json Browser window frame for product screenshots.
npx shadcn@latest add https://velora.colorlib.com/r/browser-mockup.json Code panel with tabs, line numbers, highlighted lines and a copy button.
npx shadcn@latest add https://velora.colorlib.com/r/code-block.json iPhone frame with dynamic island — pure CSS.
npx shadcn@latest add https://velora.colorlib.com/r/iphone-mockup.json A terminal window that types its lines in view.
npx shadcn@latest add https://velora.colorlib.com/r/terminal.json Centered hero with a drifting aurora, dotted backdrop, announcement pill and staggered copy.
npx shadcn@latest add https://velora.colorlib.com/r/hero-aurora.json Split hero with copy, CTAs and live stats beside an interactive dotted globe with arcs.
npx shadcn@latest add https://velora.colorlib.com/r/hero-globe.json Centered headline above a dashboard in a browser frame with a border beam and a logo row.
npx shadcn@latest add https://velora.colorlib.com/r/hero-screenshot.json App launch hero with an email capture on the left and an app screen in an iPhone frame.
npx shadcn@latest add https://velora.colorlib.com/r/hero-split-phone.json Bold centered hero over flowing waves, with a rotating headline word and avatar social proof.
npx shadcn@latest add https://velora.colorlib.com/r/hero-waves.json Minimal hero on a retro grid with a typed headline accent, an install terminal and two CTAs.
npx shadcn@latest add https://velora.colorlib.com/r/hero-grid-minimal.json Five-card bento grid with live visuals: integration beams, orbiting icons, a chart, a tag marquee and a globe.
npx shadcn@latest add https://velora.colorlib.com/r/features-bento.json Heading and six icon feature cards in a three-column grid, each border lit by a cursor-following glow.
npx shadcn@latest add https://velora.colorlib.com/r/features-icon-grid.json Product tour with animated tabs; each tab pairs short copy and a checklist with a Tailwind-built app mock.
npx shadcn@latest add https://velora.colorlib.com/r/features-tabs.json Two alternating rows of copy with a checklist beside a browser-framed dashboard mock, sides swapped.
npx shadcn@latest add https://velora.colorlib.com/r/features-split-screenshot.json How-it-works section with four numbered steps on a gradient connector line, each with a small UI visual.
npx shadcn@latest add https://velora.colorlib.com/r/features-steps.json Three plan cards with a monthly/yearly switch, a savings badge and a highlighted middle plan.
npx shadcn@latest add https://velora.colorlib.com/r/pricing-three-tiers.json One all-inclusive plan card beside a benefit list and short reassurance answers.
npx shadcn@latest add https://velora.colorlib.com/r/pricing-single-plan.json Grouped feature comparison table with a sticky plan header, and per-plan tabs on mobile.
npx shadcn@latest add https://velora.colorlib.com/r/pricing-comparison.json Two rows of review cards scrolling in opposite directions, with faded edges and pause on hover or focus.
npx shadcn@latest add https://velora.colorlib.com/r/testimonials-marquee.json One rotating quote with crossfading portraits, framed by a beam card over a row of counting stats.
npx shadcn@latest add https://velora.colorlib.com/r/testimonials-featured.json Masonry wall of social posts and quote cards, led by a wide case-study quote with a headline metric.
npx shadcn@latest add https://velora.colorlib.com/r/testimonials-grid.json Dark rounded call-to-action band over a brand-tinted particle vortex, with two actions and fine print.
npx shadcn@latest add https://velora.colorlib.com/r/cta-vortex.json Two-column CTA card with a benefit list and a dashboard mock-up, traced by an animated border beam.
npx shadcn@latest add https://velora.colorlib.com/r/cta-split-image.json Newsletter card over a glowing dot grid with a labelled email field, subscriber avatars and a privacy note.
npx shadcn@latest add https://velora.colorlib.com/r/cta-newsletter.json A “Trusted by” line over a scrolling strip of grayscale logos that take their colour on hover.
npx shadcn@latest add https://velora.colorlib.com/r/logos-marquee.json Bordered grid of customer logos with a cursor spotlight per cell, beside a heading and stories link.
npx shadcn@latest add https://velora.colorlib.com/r/logos-grid.json Centered heading over an accordion of eight questions, closed by a contact row.
npx shadcn@latest add https://velora.colorlib.com/r/faq-accordion.json Sticky intro and contact card on the left, an accordion of questions on the right.
npx shadcn@latest add https://velora.colorlib.com/r/faq-two-column.json Full-width navbar that shrinks into a blurred floating pill on scroll, with a CTA and mobile menu.
npx shadcn@latest add https://velora.colorlib.com/r/navbar-floating.json Top bar with a keyboard-accessible Product mega menu, search, sign-in and a slide-over mobile menu.
npx shadcn@latest add https://velora.colorlib.com/r/navbar-mega.json Footer with logo, tagline and social links, four link columns and a copyright bar with legal links.
npx shadcn@latest add https://velora.colorlib.com/r/footer-columns.json Minimal footer that ends in an oversized outlined wordmark lighting up in brand colours under the pointer.
npx shadcn@latest add https://velora.colorlib.com/r/footer-wordmark.json Footer with a newsletter sign-up row, link columns and a live “All systems normal” status badge.
npx shadcn@latest add https://velora.colorlib.com/r/footer-newsletter.json Login form with password reveal, remember-me and social sign-in beside an aurora testimonial panel.
npx shadcn@latest add https://velora.colorlib.com/r/auth-login-split.json Centered sign-up card over a grid and light beams, with live password rules, terms and social sign-up.
npx shadcn@latest add https://velora.colorlib.com/r/auth-signup-card.json