Dev Design Library

Velora UI components

Free, MIT-licensed animated shadcn/ui components and complete landing page templates. Next.js 16 + Tailwind CSS 4 + Motion. Accessible, reduced-motion friendly, tuned for perfect Lighthouse scores.

Components
132
Framework
React
Stack
React, TypeScript, Tailwind
License
MIT
GitHub stars
41
Source
https://github.com/ColorlibHQ/velora-ui
Website
https://velora.colorlib.com
Install
npx shadcn@latest add https://velora.colorlib.com/r/{name}.json

All Velora UI components

  • 3D Card: Perspective card that turns toward the pointer while its layers lift to different depths.
  • 3D Marquee: A tilted 3D grid of images whose columns scroll up and down in an endless loop.
  • 3D Pin: Card that tilts back as a glowing pin rises with a label chip and rippling rings.
  • Animated Beam: Draws an animated connection between any two elements.
  • Animated Gradient Text: Brand gradient sweeping continuously through text.
  • Animated List: Looping feed that springs each item in, newest on top.
  • Animated Modal: Native dialog whose panel springs in with a tilt over a blurred backdrop.
  • Animated Sidebar: Icon rail that expands on hover or focus and turns into a drawer on narrow screens.
  • Animated Tabs: Tabs with a gliding pill and panels stacked like cards that peek behind.
  • Animated Testimonials: Crossfades portraits behind a rotating quote.
  • Animated Tooltip: Avatar row with springy name tooltips on hover.
  • Apple Cards Carousel: Snap-scrolling row of tall image cards that morph into a full modal story.
  • Aurora Background: Velora's signature drifting aurora gradient backdrop.
  • Split login page: Login form with password reveal, remember-me and social sign-in beside an aurora testimonial panel.
  • Sign-up card: Centered sign-up card over a grid and light beams, with live password rules, terms and social sign-up.
  • Avatar Circles: Stacked initials avatars with a +N badge — zero images.
  • Background Beams: Light beams flowing along curved paths behind content.
  • Background Boxes: An isometric grid whose cells light up in brand tints under the pointer.
  • Bento Grid: Feature bento with hover-reveal CTAs and rich backgrounds.
  • Blur Fade: The workhorse entrance — blur, fade and drift into view.
  • Border Beam: A beam of light traveling around any border.
  • Browser Mockup: Browser window frame for product screenshots.
  • Card Hover Effect: Link-card grid with a highlight that glides to whichever card you hover or focus.
  • Card Stack: Deck that shuffles the top card to the back on a timer.
  • Code Block: Code panel with tabs, line numbers, highlighted lines and a copy button.
  • Compare Slider: Before/after wipe with a keyboard-accessible divider.
  • Confetti: Dependency-free confetti burst, fired from anywhere.
  • Container Scroll: Screenshot panel that rotates flat as it scrolls into view.
  • Newsletter sign-up: Newsletter card over a glowing dot grid with a labelled email field, subscriber avatars and a privacy note.
  • Split CTA with product visual: Two-column CTA card with a benefit list and a dashboard mock-up, traced by an animated border beam.
  • Vortex CTA band: Dark rounded call-to-action band over a brand-tinted particle vortex, with two actions and fine print.
  • Data Grid: Sortable, searchable, filterable table with selection, column toggles and pagination, built on TanStack Table.
  • Direction Aware Hover: Overlay enters from the edge the cursor actually crossed.
  • Dock: macOS-style dock with cursor magnification.
  • Dotted Glow Background: Canvas dot grid where drifting glows brighten dots and tint them toward the brand.
  • Draggable Card: Scattered photo cards you can fling around with inertia, tilt and bounds.
  • Evervault Card: Card that reveals shuffling brand-tinted characters through a mask following the pointer.
  • Expandable Card: Expands into a centred panel with shared-layout transitions.
  • Centered FAQ accordion: Centered heading over an accordion of eight questions, closed by a contact row.
  • Two-column FAQ: Sticky intro and contact card on the left, an accordion of questions on the right.
  • Bento feature grid: Five-card bento grid with live visuals: integration beams, orbiting icons, a chart, a tag marquee and a globe.
  • Icon feature grid: Heading and six icon feature cards in a three-column grid, each border lit by a cursor-following glow.
  • Alternating screenshot rows: Two alternating rows of copy with a checklist beside a browser-framed dashboard mock, sides swapped.
  • Numbered steps: How-it-works section with four numbered steps on a gradient connector line, each with a small UI visual.
  • Tabbed product tour: Product tour with animated tabs; each tab pairs short copy and a checklist with a Tailwind-built app mock.
  • File Drop: Upload zone that lifts and glows while a file is over it.
  • File Tree: Collapsible tree for documenting project structure.
  • Flickering Grid: Grid of squares fading in and out on staggered timers.
  • Flip Words: Cycles words with a springy blur-flip transition.
  • Floating Navbar: Hides on scroll down, returns the moment you scroll up.
  • Focus Cards: Image grid where the hovered card stays sharp while the others blur and step back.
  • Following Pointer: Swaps the cursor for an arrow and a name tag that trail the pointer inside a region.
  • Link columns footer: Footer with logo, tagline and social links, four link columns and a copyright bar with legal links.
  • Newsletter footer: Footer with a newsletter sign-up row, link columns and a live “All systems normal” status badge.
  • Giant wordmark footer: Minimal footer that ends in an oversized outlined wordmark lighting up in brand colours under the pointer.
  • Glare Card: Sheet of light tracking the cursor, like a foil trading card.
  • Globe: Dotted canvas globe with markers, great-circle arcs, drag and keyboard rotation.
  • Glowing Effect: Border glow that follows the pointer around a card's edge as it comes near.
  • Grid & Dot Pattern: SVG grid and dot backdrops with maskable depth.
  • Aurora hero: Centered hero with a drifting aurora, dotted backdrop, announcement pill and staggered copy.
  • Globe split hero: Split hero with copy, CTAs and live stats beside an interactive dotted globe with arcs.
  • Developer tool hero: Minimal hero on a retro grid with a typed headline accent, an install terminal and two CTAs.
  • Hero Parallax: Hero copy over three card rows that slide apart as a tilted block flattens.
  • Product screenshot hero: Centered headline above a dashboard in a browser frame with a border beam and a logo row.
  • Phone split hero: App launch hero with an email capture on the left and an app screen in an iPhone frame.
  • Wavy hero: Bold centered hero over flowing waves, with a rotating headline word and avatar social proof.
  • Hyper Text: Scrambles through letters and resolves into the real text.
  • Image Slider: Full-bleed image slider with crossfade-zoom, autoplay, dots, arrows and swipe.
  • iPhone Mockup: iPhone frame with dynamic island — pure CSS.
  • Lamp: A glowing lamp-line header that expands into view.
  • Layout Grid: Bento grid of image tiles that expand in place to reveal rich content.
  • Lens: Circular magnifier that follows the pointer or arrow keys to zoom into an image.
  • Light Rays: God rays fanning down from the top of a section.
  • Loaders: Five tiny CSS loading indicators — dots, pulse, orbit, bars and spinner.
  • Logo Cloud: Customer logos muted until hovered, so they read as texture.
  • Logo grid: Bordered grid of customer logos with a cursor spotlight per cell, beside a heading and stories link.
  • Logo marquee: A “Trusted by” line over a scrolling strip of grayscale logos that take their colour on hover.
  • Macbook Scroll: A CSS-drawn laptop pins in place and opens its lid as the screenshot scales up.
  • Magnetic Button: Leans toward the cursor and springs back on leave.
  • Marquee: Seamless scrolling loop — horizontal, vertical, hover-pause.
  • Meteors: Falling meteor streaks for dark hero and CTA sections.
  • Morphing Text: Blurs one phrase out as the next resolves in.
  • Moving Border: A light laps the button's border via offset-path.
  • Multi Step Loader: Full-screen overlay that ticks through a list of steps, keeping the active one centred.
  • Floating pill navbar: Full-width navbar that shrinks into a blurred floating pill on scroll, with a CTA and mobile menu.
  • Mega menu navbar: Top bar with a keyboard-accessible Product mega menu, search, sign-in and a slide-over mobile menu.
  • Navbar Menu: Hover-driven menu whose pill and panel morph between items.
  • Noise Background: Drifting brand-gradient blobs under a static film-grain overlay; wraps its content.
  • Number Ticker: Springs a number up when it enters the viewport.
  • Orbiting Circles: Items evenly distributed on rotating orbital rings.
  • Parallax Grid: Gallery columns drifting at different rates for depth.
  • Particles: Drifting, twinkling particle field on a lightweight canvas.
  • Pointer Highlight: Draws an outline around a phrase on scroll, then glides a pointer icon to its corner.
  • Pricing comparison table: Grouped feature comparison table with a sticky plan header, and per-plan tabs on mobile.
  • Single plan pricing: One all-inclusive plan card beside a benefit list and short reassurance answers.
  • Three-tier pricing: Three plan cards with a monthly/yearly switch, a savings badge and a highlighted middle plan.
  • Rainbow Button: CTA cycling the brand ramp, with a matching glow beneath.
  • Resizable Navbar: Full-width navbar that shrinks into a floating, blurred pill once you scroll.
  • Retro Grid: Perspective grid scrolling forever toward the horizon.
  • Ripple: Concentric rings pulsing outward — calm 'listening' backdrop.
  • Ripple Button: Expands a ripple from the exact point you pressed.
  • Scroll Progress: Gradient page-progress bar pinned to the top.
  • Scroll Velocity: Marquee whose speed and direction follow your scrolling.
  • Shimmer Button: CTA button with a continuous light sweep.
  • Shooting Stars: A twinkling star field with brand-tinted streaks shooting across at random.
  • Smooth Cursor: Dot-and-ring custom cursor; the ring trails on a spring and grows over links and buttons.
  • Sparkles Text: Twinkling stars orbiting your headline.
  • Spotlight Card: A radial glow that follows the cursor across the card.
  • Stateful Button: Button that morphs through loading, success and error states while a Promise settles.
  • Stepper: Progress indicator for multi-step forms and checkouts.
  • Sticky Banner: Dismissible announcement bar pinned above the header.
  • Sticky Scroll: Copy scrolls past a pinned panel that swaps per section.
  • Terminal: A terminal window that types its lines in view.
  • Featured testimonial: One rotating quote with crossfading portraits, framed by a beam card over a row of counting stats.
  • Testimonial grid: Masonry wall of social posts and quote cards, led by a wide case-study quote with a headline metric.
  • Testimonial marquee: Two rows of review cards scrolling in opposite directions, with faded edges and pause on hover or focus.
  • Text Highlighter: Marker-pen sweep that draws in when the phrase scrolls into view.
  • Text Hover Effect: Giant outlined word that draws in, then glows in brand colours under the pointer.
  • Text Reveal: Word-by-word blur reveal on scroll.
  • Text Shimmer: A soft light sweep — great for AI loading states.
  • Theme Toggler: Wipes the new theme in as a circle using View Transitions.
  • Tilt Card: 3D perspective tilt that tracks the cursor.
  • Timeline: Vertical timeline with sticky labels and a gradient beam that fills as you scroll.
  • Tracing Beam: Gradient line that draws itself down long-form content.
  • Tweet Card: Static social-proof card — props, not an API call.
  • Typewriter: Types, holds and deletes through a list of words.
  • Vanish Input: Search field whose placeholder cycles while empty.
  • Vortex: Brand-tinted particles spiralling into the centre, leaving soft fading trails.
  • Wavy Background: Blurred, translucent ribbons of brand colour flowing sideways on a canvas.
  • Wobble Card: Colored card that drifts toward the pointer, with parallax content and grain.
  • Word Rotate: Swaps a single word on a quiet vertical roll.
  • World Map: Dotted SVG world map with markers, pulsing hubs and animated connection arcs.

Browse by category