Aceternity UI — 89 React Components, Preview & Copy | 21st

About Aceternity UI

Aceternity UI publishes a shadcn registry at ui.aceternity.com, with 285 components installable through the shadcn CLI.

Components: 285

Also in the Aceternity UI registry

Copy a prompt for your agent, copy the install command, or open the docs that ship it.

3d-pin
motion1 file
Docs ↗
about-us-section-with-cards
ascii-art
motion1 file
Docs ↗
background-dots
Background Dots
1 file
background-dots-masked
Background Dots Masked
1 file
background-dots-masked-vertical
Background Dots Masked Vertical
1 file
background-grid-with-dots
Background Grid with Dots
1 file
Docs ↗
background-grid-with-dots-and-animations
Background Grid with Dots and Animations
1 file
Docs ↗
background-lines
Background Lines
motion1 file
Docs ↗
background-with-full-video
Background With Full Video
motion1 file
Docs ↗
background-with-skewed-lines
Background With Skewed Lines
1 file
Docs ↗
background-with-skewed-rectangles
Background With Skewed Rectangles
1 file
Docs ↗
bento-grid-illustrations
Bento grid showcasing MacBook, iPhone, iPad, and Dynamic Island illustrations
motion1 file
Docs ↗
bento-grid-with-skeletons
A grid of 6 with skeletons, title and descriptions. Skeletons are modern and designed to be minimal. With chat like interfaces for skeletons, perfect for showcasing features or demos of product.
@tabler/icons-react, react-fast-marquee1 file
Docs ↗
blog-content-centered
Blog Content Centered
react-markdown, date-fns1 file
Docs ↗
blog-content-with-toc
Blog Content With Toc
motion, react-markdown, date-fns, @tabler/icons-react1 file
Docs ↗
blog-with-categories
Blog listing with three featured cards and a denser four-column grid below, category labels on each post
1 file
Docs ↗
blog-with-search
Blog With Search
fuzzy-search, date-fns1 file
Docs ↗
blog-with-search-magazine
Blog With Search — magazine layout with cover story and card grid
fuzzy-search, date-fns1 file
Docs ↗
card-hover-effect
motion1 file
Docs ↗
centered-around-testimonials
Centered Around Testimonials
motion1 file
Docs ↗
centered-with-logo
Centered With Logo
@tabler/icons-react1 file
Docs ↗
chat-conversation
Chat Conversation
motion1 file
Docs ↗
chromatic-image
1 file
collaborative-cursors
Collaborative Cursors
motion, @tabler/icons-react1 file
Docs ↗
contact-form-grid-with-details
Contact Form Grid With Details
motion, @tabler/icons-react1 file
Docs ↗
contact-section-with-shader
Contact Section With Shader Background and Rotating Testimonials
motion, @tabler/icons-react1 file
Docs ↗
contact-with-dither-image
Contact section with dithered landscape background, testimonial card, and split form
1 file
Docs ↗
cta-centered-masonry-gallery
CTA Centered Masonry Gallery
@tabler/icons-react1 file
Docs ↗
cta-with-background-noise
CTA With Background Noise
react-icons1 file
Docs ↗
cta-with-centered-text
CTA With Centered Text
1 file
Docs ↗
cta-with-dashed-grid-lines
CTA With Dashed Grid Lines
react-icons, @tabler/icons-react1 file
Docs ↗
cta-with-masonry-images
CTA With Masonry Images
@tabler/icons-react1 file
Docs ↗
cta-with-right-gradient-and-animation
dither-features
Feature section with dithered image backdrop, tabbed content cards, and chat conversation skeletons
motion, @tabler/icons-react1 file
Docs ↗
dither-shader
1 file
Docs ↗
dot-distortion-shader
A dot distortion shader for creating dynamic background effects.
motion1 file
Docs ↗
dotted-glow-background
1 file
Docs ↗
draggable-cards
Swipeable stack of profile cards with spring physics; flick cards off the deck and they cycle to the back
motion1 file
Docs ↗
dynamic-island
Animated Dynamic Island with customizable idle, loading, and processed states
motion1 file
Docs ↗
empty-state-with-cards
Empty project state with corner grid lines, CTAs, and fanned template thumbnails
motion1 file
Docs ↗
empty-state-with-draggable-cards
Empty hiring-style layout with a swipeable card deck above primary actions
motion1 file
Docs ↗
empty-state-with-pictures
Centered empty state with stacked photo frames and gentle motion
motion1 file
Docs ↗
empty-state-with-stacked-cards
Soft panel empty state with overlapping template previews and doc link
motion1 file
Docs ↗
expandable-card-on-click
Expandable Card On Click
motion1 file
Docs ↗
faqs-with-dashed-lines
FAQs With Dashed Lines and Accordion
motion, @tabler/icons-react1 file
Docs ↗
feature-grid-with-illustrations-and-bento
feature-grid-with-minimal-illustrations
feature-section-bento-skeletons
Bento Grid Feature Section With Animated Skeletons
motion, @tabler/icons-react1 file
Docs ↗
feature-section-with-centered-skeleton
Three-column feature section with icon-led copy on the sides and a centered showcase area (image backdrop plus animated reveal)
motion, lucide-react1 file
Docs ↗
feature-section-with-horizontal-skeletons
Feature section with horizontal device skeletons (iPhone, MacBook, iPad) with animated beams, Dynamic Island interactions, and compliance/security cards
motion, svg-dotted-map, lucide-react1 file
Docs ↗
feature-section-with-terminal
Feature section with animated terminal and expandable feature tabs
motion, @tabler/icons-react1 file
Docs ↗
feature-section-with-vertical-grids
Feature section with vertical grid layout, animated skeletons including login form, world map, chat conversation, and keyboard
motion, svg-dotted-map, lucide-react1 file
Docs ↗
features-grid-with-large-skeletons
A grid of 3 with micro-interactions and animations. Title and descriptions are flex row aligned on desktop screens and column on mobile screens. There are skeleton items with perspective designs, adding depth into the design. Cards have title, description, badge, and tags.
@tabler/icons-react1 file
Docs ↗
features-section-with-skeletons
Features Section With Skeletons
motion, @tabler/icons-react1 file
Docs ↗
features-with-accordion-and-image
Feature section with accordion list, CTAs, and a cinematic image preview with floating assistant UI
motion1 file
features-with-hover-and-text-animation
Feature grid with hover-driven headline and Motion text swap, responsive cell dividers
motion1 file
Docs ↗
features-with-isometric-blocks
Feature cards with animated isometric box illustrations
motion1 file
Docs ↗
features-with-square-edges
Three-column feature section with square-edged cards, corner marks, and AI note-taking UI mockups
1 file
features-with-sticky-scroll
Features with sticky scroll
motion, @tabler/icons-react1 file
Docs ↗
feature-with-inline-icons
Minimal feature grid with inline icons and responsive separators
@tabler/icons-react1 file
Docs ↗
flipping-images-with-bar
Animated Image Carousel with Scanning Bar Reveal and Sparkle Effects
motion1 file
Docs ↗
floating-navbar
motion1 file
Docs ↗
folder-with-files
Folder With Files
motion1 file
Docs ↗
footer-with-big-text
Footer With Big Text
1 file
Docs ↗
frequently-asked-questions-accordion
Frequently Asked Questions Accordion
motion, @tabler/icons-react1 file
full-background-image-with-text
Full Background Image With Text
motion1 file
Docs ↗
globe
three, three-globe, @react-three/fiber@alpha, @react-three/drei1 file
google-gemini-effect
motion1 file
Docs ↗
hero-section-with-dither-background
Hero Section With Dither Background
@tabler/icons-react, react-fast-marquee1 file
Docs ↗
hero-section-with-flickering-lights
Hero Section With Flickering Lights
motion1 file
Docs ↗
hero-section-with-hub
hero-section-with-images-grid-and-navbar
Hero Section With Images Grid and Navbar
motion, react-fast-marquee, @tabler/icons-react1 file
Docs ↗
hero-section-with-infinite-scroll-cards
Hero Section With Infinite Scroll Cards
motion1 file
Docs ↗
hero-section-with-mesh-gradient
Hero Section With Mesh Gradient
motion1 file
Docs ↗
hero-section-with-mousemove
Hero section with hover highlight showing element dimensions and sliding number animation
motion, react-use-measure1 file
Docs ↗
hero-section-with-multi-color-background
Hero Section With Multi Color Background
motion1 file
Docs ↗
hero-section-with-noise-background
Hero Section With Noise Background
motion1 file
Docs ↗
hero-section-with-shadow-and-scales
Hero Section With Shadow and Scales
@tabler/icons-react1 file
Docs ↗
hero-with-background-and-navbar
Hero With Background And Navbar
motion1 file
Docs ↗
hero-with-centered-image
Hero With Centered Image
motion, react-icons1 file
Docs ↗
hero-with-chat-input
Hero with navbar, large chat-style prompt textarea, action bar, and sample work grid
framer-motion, @tabler/icons-react1 file
Docs ↗
hero-with-dither-shader
Hero with animated dither shader background, scale bands, product screenshot, and logo rail
1 file
hero-with-fluid-gradient-and-planner
hero-with-framed-image-and-logos
Hero with hatch scale bands, corner frames, split copy and image, and a logo rail
1 file
hero-with-image-and-scales
A modern hero section with image and scales. Incorporates tailwind's blue 500 variant of color. A beautiful hero section with title, description, 2 CTA buttons and an Image. Image has a mouse move event that shows the scales behind the image. Perfect for hero sections that require a modern look.
1 file
Docs ↗
hero-with-logo-ticker-and-workspace
image-generation-loader
images-slider
motion1 file
Docs ↗
inference-landing-page
isometric-box
Minimal Isometric Box Illustration with Hover Animation
motion1 file
Docs ↗
layout-text-flip
motion1 file
Docs ↗
lines-gradient-shader
A lines gradient shader for creating animated gradient backgrounds.
motion1 file
Docs ↗
loader
1 file
Docs ↗
login-form-with-gradient
Login Form With Gradient
motion, @radix-ui/react-label1 file
Docs ↗
login-signup-minimal
Login Signup Minimal
@tabler/icons-react1 file
Docs ↗
login-with-socials-and-email
Login With Socials And Email
motion, @tabler/icons-react1 file
Docs ↗
logo-cloud-marquee
Logo Cloud Marquee
react-fast-marquee1 file
Docs ↗
logo-cloud-multiple-rows
logo-cloud-with-blur-animation
A collection of 6 logos of modern companies, animation is staggered and logos are aligned in a grid of 3. Perfect for logo clouds that require a modern look.
motion1 file
Docs ↗
logo-cloud-with-swap-animation
A logo cloud with 10 logos in a 5x2 grid that swap every 3 seconds. Logos animate horizontally with blur effect and staggered timing for a smooth transition.
motion1 file
Docs ↗
logos-with-blur-flip
Logos With Blur Flip
motion1 file
Docs ↗
macbook-illustration-with-icons
MacBook illustration with floating icon cards on hover
motion1 file
Docs ↗
macbook-scroll
@tabler/icons-react, motion1 file
Docs ↗
masonry-bento-grid-with-images
Masonry Bento Grid With Images, useful for showcasing brands or products
motion, @tabler/icons-react1 file
Docs ↗
meeting-notes-landing-page
minimal-hero-section-with-parallax-images
Minimal Hero Section With Parallax Images, images are displayed on top of each other with animation. Simple hero section with Title, description, CTA Buttons and images.
motion1 file
Docs ↗
minimal-hero-with-huge-interactions
modern-hero-with-gradients
Modern Hero With Gradients
@tabler/icons-react1 file
Docs ↗
moving-line
motion1 file
multicolored-features
Feature section with YouTube creator highlights, multicolor gradient rows, thumbnails, and embedded video modal
motion1 file
Docs ↗
multi-illustration-bento
Multi-illustration bento grid with world map, keyboard, and login skeletons
motion, svg-dotted-map1 file
Docs ↗
multi-level-features-with-illustrations
Feature section with sticky nav, scroll-spy feature levels, and landscape illustration panels
1 file
multi-step-loader
@tabler/icons-react, motion1 file
Docs ↗
navbar-classic
Classic navbar with search
motion, @tabler/icons-react1 file
Docs ↗
navbar-dark-shadow
Dark navbar with ridge shadows, dropdown mega menu with blog panel, and light/dark mode
motion, @tabler/icons-react1 file
Docs ↗
navbar-mega
Navbar with Mega Menu and Hover Effects
motion, @tabler/icons-react1 file
Docs ↗
navbar-pill
Navbar with Pills and tabs
motion, @tabler/icons-react1 file
Docs ↗
navbar-underline
Navbar with Underline and hover effects
motion, @tabler/icons-react1 file
Docs ↗
navbar-with-children
Navbar With Children
motion, @tabler/icons-react1 file
Docs ↗
noise-background
1 file
Docs ↗
notch
motion1 file
Docs ↗
parallax-hero-images
motion1 file
Docs ↗
parallax-scroll-2
motion1 file
pixelated-canvas
1 file
Docs ↗
premium-auth-split
Premium Auth Split with WebGL Shader
1 file
Docs ↗
pricing-minimal
Minimal Pricing with Enterprise Section
@tabler/icons-react1 file
Docs ↗
pricing-page-with-featured-and-enterprise
Pricing Page With Featured And Enterprise. This pricing page is designed to showcase the features of the product and the enterprise plan. It includes a featured plan with a discount, a regular plan, a bigger plan and an enterprise plan. Featured plan has an immersive shadow to make it stand out.
@tabler/icons-react1 file
Docs ↗
pricing-with-header-and-icons
Data-driven pricing cards with featured plan styling and dark mode support
@tabler/icons-react1 file
Docs ↗
pricing-with-icons
pricing-with-switch
Pricing With Switch
motion, @tabler/icons-react1 file
Docs ↗
pricing-with-switch-and-add-on
Pricing With Switch And Add On
motion, @tabler/icons-react1 file
Docs ↗
product-landing-page
registration-form-with-images
Registration Form With Images
motion, @tabler/icons-react1 file
Docs ↗
ribbon-gradient-shader
rotating-tabs-with-text
Rotating Notification Cards with Stacked Animation
motion1 file
Docs ↗
saas-landing-page
scales
1 file
Docs ↗
signup-with-guide-lines
simple-centered-contact-form
Simple Centered Contact Form
@tabler/icons-react1 file
Docs ↗
simple-cta-with-images
Simple CTA With Images
motion, react-icons1 file
Docs ↗
simple-faqs-with-background
Simple FAQs With Background
motion, @tabler/icons-react1 file
Docs ↗
simple-footer-with-four-grids
Simple Footer With Four Grids
1 file
Docs ↗
simple-login-with-grid-lines
Simple login form with dashed grid lines border decoration
1 file
Docs ↗
simple-navbar-with-hover-effects
Simple Navbar With Hover Effects
motion, @tabler/icons-react1 file
Docs ↗
simple-pricing-with-three-tiers
Simple Pricing With Three Tiers
@tabler/icons-react1 file
Docs ↗
simple-sidebar-with-hover
Simple Sidebar With Hover
motion, @tabler/icons-react1 file
Docs ↗
single-row-logo-cloud
A single row logo cloud with 5 logos that flips in an interval.
motion1 file
Docs ↗
spotlight-logo-cloud
Spotlight Logo Cloud
1 file
Docs ↗
spotlight-new
1 file
Docs ↗
spotlight-shader
A spotlight shader for creating dynamic spotlight background effects with customizable positions and animations.
1 file
Docs ↗
stateful-button
1 file
Docs ↗
stats-for-changelog
Stats For Changelog
motion1 file
Docs ↗
stats-with-gradient
Stats With Gradient
1 file
Docs ↗
stats-with-grid-background
Stats With Grid Background
@tabler/icons-react1 file
Docs ↗
stats-with-number-ticker
Stats With Number Ticker
motion1 file
Docs ↗
tailwindcss-buttons
@tabler/icons-react1 file
Docs ↗
team-section-with-light-background
Team Section With Light Background
1 file
Docs ↗
team-section-with-scales
Team Section With Scales
1 file
Docs ↗
team-section-with-small-avatars
Team Section With Small Avatars
1 file
Docs ↗
team-section-with-timeline-cards
Team Section With Timeline Cards
motion, @tabler/icons-react1 file
Docs ↗
terminal
1 file
Docs ↗
testimonials-background-with-drag
Testimonials Background With Drag
motion1 file
Docs ↗
testimonials-marquee-grid-boxed
Two-row testimonial marquee with framed section and bordered cards
react-fast-marquee1 file
Docs ↗
testimonials-photo-carousel-tall
text-generate-typewriter
Text Generate Typewriter with Keyboard Sounds
1 file
Docs ↗
three-column-features-with-image
Three-column feature section with pipeline UI, lifestyle image, and CRM activity timeline
1 file
three-columns-with-images
Three Columns With Images
motion1 file
tooltip-card
1 file
Docs ↗
two-column-with-image
Two Column With Image
react-icons, motion1 file
Docs ↗
webcam-pixel-grid
1 file
Docs ↗

What Aceternity UI builds on

The packages and primitives its components pull in, counted across the registry.

use-outside-click1

Hooks and utilities

carousel
input
label
sidebar
tabs

What Aceternity UI shipped recently

Every appearance and removal our crawl has seen in the registry index.

liquid-glassaddedOct 21, 2026
product-landing-pageaddedOct 20, 2026
hero-with-logo-ticker-and-workspaceaddedOct 19, 2026
background-cubes-gridaddedOct 16, 2026
morphing-hero-sectionaddedOct 13, 2026
inference-landing-pageaddedOct 7, 2026