Aceternity UI

Also in the Aceternity UI registry

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

• ascii-art

  motion1 file
  PromptCopyDocs ↗

• background-dots

  Background Dots

  1 file
  PromptCopy

• background-dots-masked

  Background Dots Masked

  1 file
  PromptCopy

• background-dots-masked-vertical

  Background Dots Masked Vertical

  1 file
  PromptCopy

• background-grid-with-dots

  Background Grid with Dots

  1 file
  PromptCopyDocs ↗

• background-grid-with-dots-and-animations

  Background Grid with Dots and Animations

  1 file
  PromptCopyDocs ↗

• background-lines

  Background Lines

  motion1 file
  PromptCopyDocs ↗

• background-with-full-video

  Background With Full Video

  motion1 file
  PromptCopyDocs ↗

• background-with-skewed-lines

  Background With Skewed Lines

  1 file
  PromptCopyDocs ↗

• background-with-skewed-rectangles

  Background With Skewed Rectangles

  1 file
  PromptCopyDocs ↗

• bento-grid-illustrations

  Bento grid showcasing MacBook, iPhone, iPad, and Dynamic Island illustrations

  motion1 file
  PromptCopyDocs ↗

• 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
  PromptCopyDocs ↗

• blog-content-centered

  Blog Content Centered

  react-markdown, date-fns1 file
  PromptCopyDocs ↗

• blog-content-with-toc

  Blog Content With Toc

  motion, react-markdown, date-fns, @tabler/icons-react1 file
  PromptCopyDocs ↗

• blog-with-categories

  Blog listing with three featured cards and a denser four-column grid below, category labels on each post

  1 file
  PromptCopyDocs ↗

• blog-with-search

  Blog With Search

  fuzzy-search, date-fns1 file
  PromptCopyDocs ↗

• blog-with-search-magazine

  Blog With Search — magazine layout with cover story and card grid

  fuzzy-search, date-fns1 file
  PromptCopyDocs ↗

• canvas-text

  1 file
  PromptCopyDocs ↗

• card-hover-effect

  motion1 file
  PromptCopyDocs ↗

• centered-around-testimonials

  Centered Around Testimonials

  motion1 file
  PromptCopyDocs ↗

• centered-with-logo

  Centered With Logo

  @tabler/icons-react1 file
  PromptCopyDocs ↗

• chat-conversation

  Chat Conversation

  motion1 file
  PromptCopyDocs ↗

• chromatic-image

  1 file
  PromptCopy

• cloud-shader

  1 file
  PromptCopy

• collaborative-cursors

  Collaborative Cursors

  motion, @tabler/icons-react1 file
  PromptCopyDocs ↗

• contact-form-grid-with-details

  Contact Form Grid With Details

  motion, @tabler/icons-react1 file
  PromptCopyDocs ↗

• contact-section-with-shader

  Contact Section With Shader Background and Rotating Testimonials

  motion, @tabler/icons-react1 file
  PromptCopyDocs ↗

• contact-with-dither-image

  Contact section with dithered landscape background, testimonial card, and split form

  1 file
  PromptCopyDocs ↗

• cta-centered-masonry-gallery

  CTA Centered Masonry Gallery

  @tabler/icons-react1 file
  PromptCopyDocs ↗

• cta-with-background-noise

  CTA With Background Noise

  react-icons1 file
  PromptCopyDocs ↗

• cta-with-centered-text

  CTA With Centered Text

  1 file
  PromptCopyDocs ↗

• cta-with-dashed-grid-lines

  CTA With Dashed Grid Lines

  react-icons, @tabler/icons-react1 file
  PromptCopyDocs ↗

• cta-with-masonry-images

  CTA With Masonry Images

  @tabler/icons-react1 file
  PromptCopyDocs ↗

• dither-features

  Feature section with dithered image backdrop, tabbed content cards, and chat conversation skeletons

  motion, @tabler/icons-react1 file
  PromptCopyDocs ↗

• dither-shader

  1 file
  PromptCopyDocs ↗

• dot-distortion-shader

  A dot distortion shader for creating dynamic background effects.

  motion1 file
  PromptCopyDocs ↗

• dotted-glow-background

  1 file
  PromptCopyDocs ↗

• draggable-cards

  Swipeable stack of profile cards with spring physics; flick cards off the deck and they cycle to the back

  motion1 file
  PromptCopyDocs ↗

• dynamic-island

  Animated Dynamic Island with customizable idle, loading, and processed states

  motion1 file
  PromptCopyDocs ↗

• empty-state-with-cards

  Empty project state with corner grid lines, CTAs, and fanned template thumbnails

  motion1 file
  PromptCopyDocs ↗

• empty-state-with-draggable-cards

  Empty hiring-style layout with a swipeable card deck above primary actions

  motion1 file
  PromptCopyDocs ↗

• empty-state-with-pictures

  Centered empty state with stacked photo frames and gentle motion

  motion1 file
  PromptCopyDocs ↗

• empty-state-with-stacked-cards

  Soft panel empty state with overlapping template previews and doc link

  motion1 file
  PromptCopyDocs ↗

• expandable-card-on-click

  Expandable Card On Click

  motion1 file
  PromptCopyDocs ↗

• faqs-with-dashed-lines

  FAQs With Dashed Lines and Accordion

  motion, @tabler/icons-react1 file
  PromptCopyDocs ↗

• feature-section-bento-skeletons

  Bento Grid Feature Section With Animated Skeletons

  motion, @tabler/icons-react1 file
  PromptCopyDocs ↗

• 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
  PromptCopyDocs ↗

• 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
  PromptCopyDocs ↗

• feature-section-with-terminal

  Feature section with animated terminal and expandable feature tabs

  motion, @tabler/icons-react1 file
  PromptCopyDocs ↗

• 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
  PromptCopyDocs ↗

• 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
  PromptCopyDocs ↗

• features-section-with-skeletons

  Features Section With Skeletons

  motion, @tabler/icons-react1 file
  PromptCopyDocs ↗

• features-with-accordion-and-image

  Feature section with accordion list, CTAs, and a cinematic image preview with floating assistant UI

  motion1 file
  PromptCopy

• features-with-hover-and-text-animation

  Feature grid with hover-driven headline and Motion text swap, responsive cell dividers

  motion1 file
  PromptCopyDocs ↗

• features-with-isometric-blocks

  Feature cards with animated isometric box illustrations

  motion1 file
  PromptCopyDocs ↗

• features-with-square-edges

  Three-column feature section with square-edged cards, corner marks, and AI note-taking UI mockups

  1 file
  PromptCopy

• features-with-sticky-scroll

  Features with sticky scroll

  motion, @tabler/icons-react1 file
  PromptCopyDocs ↗

• feature-with-inline-icons

  Minimal feature grid with inline icons and responsive separators

  @tabler/icons-react1 file
  PromptCopyDocs ↗

• flipping-images-with-bar

  Animated Image Carousel with Scanning Bar Reveal and Sparkle Effects

  motion1 file
  PromptCopyDocs ↗

• floating-navbar

  motion1 file
  PromptCopyDocs ↗

• folder-with-files

  Folder With Files

  motion1 file
  PromptCopyDocs ↗

• footer-with-big-text

  Footer With Big Text

  1 file
  PromptCopyDocs ↗

• frequently-asked-questions-accordion

  Frequently Asked Questions Accordion

  motion, @tabler/icons-react1 file
  PromptCopy

• full-background-image-with-text

  Full Background Image With Text

  motion1 file
  PromptCopyDocs ↗

• gooey-input

  motion1 file
  PromptCopyDocs ↗

• hero-section-with-dither-background

  Hero Section With Dither Background

  @tabler/icons-react, react-fast-marquee1 file
  PromptCopyDocs ↗

• hero-section-with-flickering-lights

  Hero Section With Flickering Lights

  motion1 file
  PromptCopyDocs ↗

• hero-section-with-images-grid-and-navbar

  Hero Section With Images Grid and Navbar

  motion, react-fast-marquee, @tabler/icons-react1 file
  PromptCopyDocs ↗

• hero-section-with-infinite-scroll-cards

  Hero Section With Infinite Scroll Cards

  motion1 file
  PromptCopyDocs ↗

• hero-section-with-mesh-gradient

  Hero Section With Mesh Gradient

  motion1 file
  PromptCopyDocs ↗

• hero-section-with-mousemove

  Hero section with hover highlight showing element dimensions and sliding number animation

  motion, react-use-measure1 file
  PromptCopyDocs ↗

• hero-section-with-multi-color-background

  Hero Section With Multi Color Background

  motion1 file
  PromptCopyDocs ↗

• hero-section-with-noise-background

  Hero Section With Noise Background

  motion1 file
  PromptCopyDocs ↗

• hero-section-with-shadow-and-scales

  Hero Section With Shadow and Scales

  @tabler/icons-react1 file
  PromptCopyDocs ↗

• hero-with-background-and-navbar

  Hero With Background And Navbar

  motion1 file
  PromptCopyDocs ↗

• hero-with-centered-image

  Hero With Centered Image

  motion, react-icons1 file
  PromptCopyDocs ↗

• hero-with-chat-input

  Hero with navbar, large chat-style prompt textarea, action bar, and sample work grid

  framer-motion, @tabler/icons-react1 file
  PromptCopyDocs ↗

• hero-with-dither-shader

  Hero with animated dither shader background, scale bands, product screenshot, and logo rail

  1 file
  PromptCopy

• hero-with-framed-image-and-logos

  Hero with hatch scale bands, corner frames, split copy and image, and a logo rail

  1 file
  PromptCopy

• 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
  PromptCopyDocs ↗

• images-slider

  motion1 file
  PromptCopyDocs ↗

• isometric-box

  Minimal Isometric Box Illustration with Hover Animation

  motion1 file
  PromptCopyDocs ↗

• keyboard

  @tabler/icons-react, motion/react1 file
  PromptCopyDocs ↗

• layout-text-flip

  motion1 file
  PromptCopyDocs ↗

• lines-gradient-shader

  A lines gradient shader for creating animated gradient backgrounds.

  motion1 file
  PromptCopyDocs ↗

• loader

  1 file
  PromptCopyDocs ↗

• login-form-with-gradient

  Login Form With Gradient

  motion, @radix-ui/react-label1 file
  PromptCopyDocs ↗

• login-signup-minimal

  Login Signup Minimal

  @tabler/icons-react1 file
  PromptCopyDocs ↗

• login-with-socials-and-email

  Login With Socials And Email

  motion, @tabler/icons-react1 file
  PromptCopyDocs ↗

• logo-cloud-marquee

  Logo Cloud Marquee

  react-fast-marquee1 file
  PromptCopyDocs ↗

• 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
  PromptCopyDocs ↗

• 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
  PromptCopyDocs ↗

• logos-with-blur-flip

  Logos With Blur Flip

  motion1 file
  PromptCopyDocs ↗

• macbook-illustration-with-icons

  MacBook illustration with floating icon cards on hover

  motion1 file
  PromptCopyDocs ↗

• macbook-scroll

  @tabler/icons-react, motion1 file
  PromptCopyDocs ↗

• masonry-bento-grid-with-images

  Masonry Bento Grid With Images, useful for showcasing brands or products

  motion, @tabler/icons-react1 file
  PromptCopyDocs ↗

• 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
  PromptCopyDocs ↗

• modern-hero-with-gradients

  Modern Hero With Gradients

  @tabler/icons-react1 file
  PromptCopyDocs ↗

• moving-line

  motion1 file
  PromptCopy

• multicolored-features

  Feature section with YouTube creator highlights, multicolor gradient rows, thumbnails, and embedded video modal

  motion1 file
  PromptCopyDocs ↗

• multi-illustration-bento

  Multi-illustration bento grid with world map, keyboard, and login skeletons

  motion, svg-dotted-map1 file
  PromptCopyDocs ↗

• multi-level-features-with-illustrations

  Feature section with sticky nav, scroll-spy feature levels, and landscape illustration panels

  1 file
  PromptCopy

• multi-step-loader

  @tabler/icons-react, motion1 file
  PromptCopyDocs ↗

• navbar-classic

  Classic navbar with search

  motion, @tabler/icons-react1 file
  PromptCopyDocs ↗

• navbar-dark-shadow

  Dark navbar with ridge shadows, dropdown mega menu with blog panel, and light/dark mode

  motion, @tabler/icons-react1 file
  PromptCopyDocs ↗

• navbar-mega

  Navbar with Mega Menu and Hover Effects

  motion, @tabler/icons-react1 file
  PromptCopyDocs ↗

• navbar-pill

  Navbar with Pills and tabs

  motion, @tabler/icons-react1 file
  PromptCopyDocs ↗

• navbar-underline

  Navbar with Underline and hover effects

  motion, @tabler/icons-react1 file
  PromptCopyDocs ↗

• navbar-with-children

  Navbar With Children

  motion, @tabler/icons-react1 file
  PromptCopyDocs ↗

• noise-background

  1 file
  PromptCopyDocs ↗

• notch

  motion1 file
  PromptCopyDocs ↗

• parallax-hero-images

  motion1 file
  PromptCopyDocs ↗

• parallax-scroll-2

  motion1 file
  PromptCopy

• pixelated-canvas

  1 file
  PromptCopyDocs ↗

• premium-auth-split

  Premium Auth Split with WebGL Shader

  1 file
  PromptCopyDocs ↗

• pricing-minimal

  Minimal Pricing with Enterprise Section

  @tabler/icons-react1 file
  PromptCopyDocs ↗

• 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
  PromptCopyDocs ↗

• pricing-with-header-and-icons

  Data-driven pricing cards with featured plan styling and dark mode support

  @tabler/icons-react1 file
  PromptCopyDocs ↗

• pricing-with-switch

  Pricing With Switch

  motion, @tabler/icons-react1 file
  PromptCopyDocs ↗

• pricing-with-switch-and-add-on

  Pricing With Switch And Add On

  motion, @tabler/icons-react1 file
  PromptCopyDocs ↗

• registration-form-with-images

  Registration Form With Images

  motion, @tabler/icons-react1 file
  PromptCopyDocs ↗

• rotating-tabs-with-text

  Rotating Notification Cards with Stacked Animation

  motion1 file
  PromptCopyDocs ↗

• scales

  1 file
  PromptCopyDocs ↗

• simple-centered-contact-form

  Simple Centered Contact Form

  @tabler/icons-react1 file
  PromptCopyDocs ↗

• simple-cta-with-images

  Simple CTA With Images

  motion, react-icons1 file
  PromptCopyDocs ↗

• simple-faqs-with-background

  Simple FAQs With Background

  motion, @tabler/icons-react1 file
  PromptCopyDocs ↗

• simple-footer-with-four-grids

  Simple Footer With Four Grids

  1 file
  PromptCopyDocs ↗

• simple-login-with-grid-lines

  Simple login form with dashed grid lines border decoration

  1 file
  PromptCopyDocs ↗

• simple-navbar-with-hover-effects

  Simple Navbar With Hover Effects

  motion, @tabler/icons-react1 file
  PromptCopyDocs ↗

• simple-pricing-with-three-tiers

  Simple Pricing With Three Tiers

  @tabler/icons-react1 file
  PromptCopyDocs ↗

• simple-sidebar-with-hover

  Simple Sidebar With Hover

  motion, @tabler/icons-react1 file
  PromptCopyDocs ↗

• single-row-logo-cloud

  A single row logo cloud with 5 logos that flips in an interval.

  motion1 file
  PromptCopyDocs ↗

• spotlight-logo-cloud

  Spotlight Logo Cloud

  1 file
  PromptCopyDocs ↗

• spotlight-shader

  A spotlight shader for creating dynamic spotlight background effects with customizable positions and animations.

  1 file
  PromptCopyDocs ↗

• stats-for-changelog

  Stats For Changelog

  motion1 file
  PromptCopyDocs ↗

• stats-with-gradient

  Stats With Gradient

  1 file
  PromptCopyDocs ↗

• stats-with-grid-background

  Stats With Grid Background

  @tabler/icons-react1 file
  PromptCopyDocs ↗

• stats-with-number-ticker

  Stats With Number Ticker

  motion1 file
  PromptCopyDocs ↗

• tailwindcss-buttons

  @tabler/icons-react1 file
  PromptCopyDocs ↗

• team-section-with-light-background

  Team Section With Light Background

  1 file
  PromptCopyDocs ↗

• team-section-with-scales

  Team Section With Scales

  1 file
  PromptCopyDocs ↗

• team-section-with-small-avatars

  Team Section With Small Avatars

  1 file
  PromptCopyDocs ↗

• team-section-with-timeline-cards

  Team Section With Timeline Cards

  motion, @tabler/icons-react1 file
  PromptCopyDocs ↗

• terminal

  1 file
  PromptCopyDocs ↗

• testimonials-background-with-drag

  Testimonials Background With Drag

  motion1 file
  PromptCopyDocs ↗

• testimonials-marquee-grid-boxed

  Two-row testimonial marquee with framed section and bordered cards

  react-fast-marquee1 file
  PromptCopyDocs ↗

• text-generate-typewriter

  Text Generate Typewriter with Keyboard Sounds

  1 file
  PromptCopyDocs ↗

• three-column-features-with-image

  Three-column feature section with pipeline UI, lifestyle image, and CRM activity timeline

  1 file
  PromptCopy

• three-columns-with-images

  Three Columns With Images

  motion1 file
  PromptCopy

• two-column-with-image

  Two Column With Image

  react-icons, motion1 file
  PromptCopyDocs ↗