sh4dcnv2 · atlas
← libraries

@velora

100 animated React components and 31 free section blocks for Tailwind CSS 4 — accessible, reduced-motion safe and MIT licensed.

131 components pro available react shadcn-cli MIT

Install this registry

shadcn (npm) npx shadcn@latest add https://velora.colorlib.com/r/registry.json
pnpm pnpm dlx shadcn@latest add https://velora.colorlib.com/r/registry.json
bun bunx shadcn@latest add https://velora.colorlib.com/r/registry.json
fetch registry curl -s https://velora.colorlib.com/r/registry.json

Components

131 total
Aurora Background ui

Velora's signature drifting aurora gradient backdrop.

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

Light beams flowing along curved paths behind content.

npx shadcn@latest add https://velora.colorlib.com/r/background-beams.json
Background Boxes ui

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
Dotted Glow Background ui

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
Flickering Grid ui

Grid of squares fading in and out on staggered timers.

npx shadcn@latest add https://velora.colorlib.com/r/flickering-grid.json
Grid & Dot Pattern ui

SVG grid and dot backdrops with maskable depth.

npx shadcn@latest add https://velora.colorlib.com/r/grid-pattern.json
Lamp ui

A glowing lamp-line header that expands into view.

npx shadcn@latest add https://velora.colorlib.com/r/lamp.json
Light Rays ui

God rays fanning down from the top of a section.

npx shadcn@latest add https://velora.colorlib.com/r/light-rays.json
Meteors ui

Falling meteor streaks for dark hero and CTA sections.

npx shadcn@latest add https://velora.colorlib.com/r/meteors.json
Noise Background ui

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
Particles ui

Drifting, twinkling particle field on a lightweight canvas.

npx shadcn@latest add https://velora.colorlib.com/r/particles.json
Retro Grid ui

Perspective grid scrolling forever toward the horizon.

npx shadcn@latest add https://velora.colorlib.com/r/retro-grid.json
Ripple ui

Concentric rings pulsing outward — calm 'listening' backdrop.

npx shadcn@latest add https://velora.colorlib.com/r/ripple.json
Shooting Stars ui

A twinkling star field with brand-tinted streaks shooting across at random.

npx shadcn@latest add https://velora.colorlib.com/r/shooting-stars.json
Vortex ui

Brand-tinted particles spiralling into the centre, leaving soft fading trails.

npx shadcn@latest add https://velora.colorlib.com/r/vortex.json
Wavy Background ui

Blurred, translucent ribbons of brand colour flowing sideways on a canvas.

npx shadcn@latest add https://velora.colorlib.com/r/wavy-background.json
Animated Gradient Text ui

Brand gradient sweeping continuously through text.

npx shadcn@latest add https://velora.colorlib.com/r/animated-gradient-text.json
Flip Words ui

Cycles words with a springy blur-flip transition.

npx shadcn@latest add https://velora.colorlib.com/r/flip-words.json
Hyper Text ui

Scrambles through letters and resolves into the real text.

npx shadcn@latest add https://velora.colorlib.com/r/hyper-text.json
Morphing Text ui

Blurs one phrase out as the next resolves in.

npx shadcn@latest add https://velora.colorlib.com/r/morphing-text.json
Number Ticker ui

Springs a number up when it enters the viewport.

npx shadcn@latest add https://velora.colorlib.com/r/number-ticker.json
Sparkles Text ui

Twinkling stars orbiting your headline.

npx shadcn@latest add https://velora.colorlib.com/r/sparkles-text.json
Text Highlighter ui

Marker-pen sweep that draws in when the phrase scrolls into view.

npx shadcn@latest add https://velora.colorlib.com/r/text-highlighter.json
Text Hover Effect ui

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
Text Reveal ui

Word-by-word blur reveal on scroll.

npx shadcn@latest add https://velora.colorlib.com/r/text-reveal.json
Text Shimmer ui

A soft light sweep — great for AI loading states.

npx shadcn@latest add https://velora.colorlib.com/r/text-shimmer.json
Typewriter ui

Types, holds and deletes through a list of words.

npx shadcn@latest add https://velora.colorlib.com/r/typewriter.json
Word Rotate ui

Swaps a single word on a quiet vertical roll.

npx shadcn@latest add https://velora.colorlib.com/r/word-rotate.json
Confetti ui

Dependency-free confetti burst, fired from anywhere.

npx shadcn@latest add https://velora.colorlib.com/r/confetti.json
Magnetic Button ui

Leans toward the cursor and springs back on leave.

npx shadcn@latest add https://velora.colorlib.com/r/magnetic-button.json
Moving Border ui

A light laps the button's border via offset-path.

npx shadcn@latest add https://velora.colorlib.com/r/moving-border.json
Rainbow Button ui

CTA cycling the brand ramp, with a matching glow beneath.

npx shadcn@latest add https://velora.colorlib.com/r/rainbow-button.json
Ripple Button ui

Expands a ripple from the exact point you pressed.

npx shadcn@latest add https://velora.colorlib.com/r/ripple-button.json
Shimmer Button ui

CTA button with a continuous light sweep.

npx shadcn@latest add https://velora.colorlib.com/r/shimmer-button.json
Stateful Button ui

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
Theme Toggler ui

Wipes the new theme in as a circle using View Transitions.

npx shadcn@latest add https://velora.colorlib.com/r/theme-toggler.json
Animated List ui

Looping feed that springs each item in, newest on top.

npx shadcn@latest add https://velora.colorlib.com/r/animated-list.json
Animated Tooltip ui

Avatar row with springy name tooltips on hover.

npx shadcn@latest add https://velora.colorlib.com/r/animated-tooltip.json
Avatar Circles ui

Stacked initials avatars with a +N badge — zero images.

npx shadcn@latest add https://velora.colorlib.com/r/avatar-circles.json
Bento Grid ui

Feature bento with hover-reveal CTAs and rich backgrounds.

npx shadcn@latest add https://velora.colorlib.com/r/bento-grid.json
Card Hover Effect ui

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
Card Stack ui

Deck that shuffles the top card to the back on a timer.

npx shadcn@latest add https://velora.colorlib.com/r/card-stack.json
Compare Slider ui

Before/after wipe with a keyboard-accessible divider.

npx shadcn@latest add https://velora.colorlib.com/r/compare-slider.json
Direction Aware Hover ui

Overlay enters from the edge the cursor actually crossed.

npx shadcn@latest add https://velora.colorlib.com/r/direction-aware-hover.json
Dock ui

macOS-style dock with cursor magnification.

npx shadcn@latest add https://velora.colorlib.com/r/dock.json
Draggable Card ui

Scattered photo cards you can fling around with inertia, tilt and bounds.

npx shadcn@latest add https://velora.colorlib.com/r/draggable-card.json
Evervault Card ui

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
Expandable Card ui

Expands into a centred panel with shared-layout transitions.

npx shadcn@latest add https://velora.colorlib.com/r/expandable-card.json
File Tree ui

Collapsible tree for documenting project structure.

npx shadcn@latest add https://velora.colorlib.com/r/file-tree.json
Focus Cards ui

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
Glare Card ui

Sheet of light tracking the cursor, like a foil trading card.

npx shadcn@latest add https://velora.colorlib.com/r/glare-card.json
Layout Grid ui

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
Marquee ui

Seamless scrolling loop — horizontal, vertical, hover-pause.

npx shadcn@latest add https://velora.colorlib.com/r/marquee.json
Orbiting Circles ui

Items evenly distributed on rotating orbital rings.

npx shadcn@latest add https://velora.colorlib.com/r/orbiting-circles.json
Spotlight Card ui

A radial glow that follows the cursor across the card.

npx shadcn@latest add https://velora.colorlib.com/r/spotlight-card.json
Tilt Card ui

3D perspective tilt that tracks the cursor.

npx shadcn@latest add https://velora.colorlib.com/r/tilt-card.json
Wobble Card ui

Colored card that drifts toward the pointer, with parallax content and grain.

npx shadcn@latest add https://velora.colorlib.com/r/wobble-card.json
Animated Sidebar ui

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
Animated Tabs ui

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
Floating Navbar ui

Hides on scroll down, returns the moment you scroll up.

npx shadcn@latest add https://velora.colorlib.com/r/floating-navbar.json
Navbar Menu ui

Hover-driven menu whose pill and panel morph between items.

npx shadcn@latest add https://velora.colorlib.com/r/navbar-menu.json
Resizable Navbar ui

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
Sticky Banner ui

Dismissible announcement bar pinned above the header.

npx shadcn@latest add https://velora.colorlib.com/r/sticky-banner.json
File Drop ui

Upload zone that lifts and glows while a file is over it.

npx shadcn@latest add https://velora.colorlib.com/r/file-drop.json
Stepper ui

Progress indicator for multi-step forms and checkouts.

npx shadcn@latest add https://velora.colorlib.com/r/stepper.json
Vanish Input ui

Search field whose placeholder cycles while empty.

npx shadcn@latest add https://velora.colorlib.com/r/vanish-input.json
Animated Modal ui

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
Loaders ui

Five tiny CSS loading indicators — dots, pulse, orbit, bars and spinner.

npx shadcn@latest add https://velora.colorlib.com/r/loaders.json
Multi Step Loader ui

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
Animated Testimonials ui

Crossfades portraits behind a rotating quote.

npx shadcn@latest add https://velora.colorlib.com/r/animated-testimonials.json
Logo Cloud ui

Customer logos muted until hovered, so they read as texture.

npx shadcn@latest add https://velora.colorlib.com/r/logo-cloud.json
Tweet Card ui

Static social-proof card — props, not an API call.

npx shadcn@latest add https://velora.colorlib.com/r/tweet-card.json
Container Scroll ui

Screenshot panel that rotates flat as it scrolls into view.

npx shadcn@latest add https://velora.colorlib.com/r/container-scroll.json
Hero Parallax ui

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
Macbook Scroll ui

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
Parallax Grid ui

Gallery columns drifting at different rates for depth.

npx shadcn@latest add https://velora.colorlib.com/r/parallax-grid.json
Scroll Progress ui

Gradient page-progress bar pinned to the top.

npx shadcn@latest add https://velora.colorlib.com/r/scroll-progress.json
Scroll Velocity ui

Marquee whose speed and direction follow your scrolling.

npx shadcn@latest add https://velora.colorlib.com/r/scroll-velocity.json
Sticky Scroll ui

Copy scrolls past a pinned panel that swaps per section.

npx shadcn@latest add https://velora.colorlib.com/r/sticky-scroll.json
Timeline ui

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
Tracing Beam ui

Gradient line that draws itself down long-form content.

npx shadcn@latest add https://velora.colorlib.com/r/tracing-beam.json
Animated Beam ui

Draws an animated connection between any two elements.

npx shadcn@latest add https://velora.colorlib.com/r/animated-beam.json
Blur Fade ui

The workhorse entrance — blur, fade and drift into view.

npx shadcn@latest add https://velora.colorlib.com/r/blur-fade.json
Border Beam ui

A beam of light traveling around any border.

npx shadcn@latest add https://velora.colorlib.com/r/border-beam.json
Glowing Effect ui

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
3D Card ui

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
3D Pin ui

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
3D Marquee ui

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
Apple Cards Carousel ui

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
Image Slider ui

Full-bleed image slider with crossfade-zoom, autoplay, dots, arrows and swipe.

npx shadcn@latest add https://velora.colorlib.com/r/image-slider.json
Following Pointer ui

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
Lens ui

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
Pointer Highlight ui

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
Smooth Cursor ui

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
Globe ui

Dotted canvas globe with markers, great-circle arcs, drag and keyboard rotation.

npx shadcn@latest add https://velora.colorlib.com/r/globe.json
World Map ui

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 Mockup ui

Browser window frame for product screenshots.

npx shadcn@latest add https://velora.colorlib.com/r/browser-mockup.json
Code Block ui

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 Mockup ui

iPhone frame with dynamic island — pure CSS.

npx shadcn@latest add https://velora.colorlib.com/r/iphone-mockup.json
Terminal ui

A terminal window that types its lines in view.

npx shadcn@latest add https://velora.colorlib.com/r/terminal.json
Aurora hero block

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
Globe split hero block

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
Product screenshot hero block

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
Phone split hero block

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
Wavy hero block

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
Developer tool hero block

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
Bento feature grid block

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
Icon feature grid block

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
Tabbed product tour block

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
Alternating screenshot rows block

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
Numbered steps block

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-tier pricing block

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
Single plan pricing block

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
Pricing comparison table block

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
Testimonial marquee block

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
Featured testimonial block

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
Testimonial grid block

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
Vortex CTA band block

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
Split CTA with product visual block

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 sign-up block

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
Logo marquee block

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
Logo grid block

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 FAQ accordion block

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
Two-column FAQ block

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
Floating pill navbar block

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
Mega menu navbar block

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
Link columns footer block

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
Giant wordmark footer block

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
Newsletter footer block

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
Split login page block

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
Sign-up card block

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