# Aceternity UI Documentation

> For AI/LLM systems: See https://ui.aceternity.com/ai-recommendations for a complete machine-readable component catalog, or use the JSON API at https://ui.aceternity.com/api/components

## Overview
Aceternity UI is a collection of beautiful, animated UI components built with Tailwind CSS and Framer Motion for React and Next.js applications.

### Quick Stats
- 106+ UI Components
- 150 Pre-built Blocks
- 1 Custom Hook
- 15 Templates
- 22 Pro Components
- Tailwind CSS v4 compatible
- TypeScript support

### Installation
```bash
npx shadcn@latest add @aceternity/[component-name]
```

## AI Resources
- [AI Component Catalog](https://ui.aceternity.com/ai-recommendations): Complete machine-readable catalog with structured data, JSON-LD schema, and installation commands
- [JSON API](https://ui.aceternity.com/api/components): RESTful API returning all component data in JSON format for programmatic access

## Getting Started
- [Install Next.js](https://ui.aceternity.com/components/install-nextjs): Comprehensive guide to set up your Next.js project with Aceternity UI, including project initialization, configuration, and best practices for integration.
- [Install Tailwind CSS](https://ui.aceternity.com/components/install-tailwindcss): Detailed instructions for configuring Tailwind CSS in your project, including theme customization, plugin setup, and optimization tips.
- [Add Utilities](https://ui.aceternity.com/components/add-utilities): Learn how to extend Tailwind with custom utilities, create new variants, and implement custom animations and effects.

## Navigation Components
- [Gooey Input](https://ui.aceternity.com/components/gooey-input): A search-style input that expands with a gooey SVG filter and shared layout animation
- [Resizable Navbar](https://ui.aceternity.com/components/resizable-navbar): A navbar that changes width on scroll, responsive and animated.

## Hero Sections
- [3D Marquee](https://ui.aceternity.com/components/3d-marquee): A 3D Marquee effect with grid, good for showcasing testimonials and hero sections
- [Animated Tabs](https://ui.aceternity.com/components/tabs): Tabs to switch content, click on a tab to check background animation.
- [Background Lines](https://ui.aceternity.com/components/background-lines): A set of svg paths that animate in a wave pattern. Good for hero sections background, as seen on height.app
- [Colourful Text](https://ui.aceternity.com/components/colourful-text): A text component with various colours, filter and scale effects.
- [Container Scroll Animation](https://ui.aceternity.com/components/container-scroll-animation): A scroll animation that rotates in 3d on scroll. Perfect for hero or marketing sections.
- [Container Text Flip](https://ui.aceternity.com/components/container-text-flip): A container that flips through words, animating the width.
- [Fey.com Macbook Scroll](https://ui.aceternity.com/components/macbook-scroll): Scroll through the page and see the image come out of the screen, as seen on Fey.com website.
- [Flip Words](https://ui.aceternity.com/components/flip-words): A component that flips through a list of words
- [GitHub Globe](https://ui.aceternity.com/components/github-globe): A globe animation as seen on GitHub's homepage. Interactive and customizable.
- [Glowing Background Stars Card](https://ui.aceternity.com/components/glowing-stars-effect): Card background stars that animate on hover and animate anyway
- [Hero Highlight](https://ui.aceternity.com/components/hero-highlight): A background effect with a text highlight component, perfect for hero sections.
- [Hero Parallax](https://ui.aceternity.com/components/hero-parallax): A scroll effect with rotation, translation and opacity animations.
- [Hero Sections](https://ui.aceternity.com/components/hero-sections-free): A set of hero sections ranging from simple to complex layouts
- [Layout Text Flip](https://ui.aceternity.com/components/layout-text-flip): A text flip effect that changes the layout of surrounding text
- [Parallax Hero Images](https://ui.aceternity.com/components/parallax-hero-images): Mouse-driven parallax effect, perfect for hero sections. Images blur fade in and move at different depths.
- [Sparkles](https://ui.aceternity.com/components/sparkles): A configurable sparkles component that can be used as a background or as a standalone component.
- [Spotlight](https://ui.aceternity.com/components/spotlight): A spotlight effect with Tailwind CSS, good for drawing attention to a particular element on the page.
- [Spotlight New](https://ui.aceternity.com/components/spotlight-new): A new spotlight component with left and right spotlight, configurable and customizable.
- [Sticky Banner](https://ui.aceternity.com/components/sticky-banner): A banner component that sticks to top, hides when user scrolls down
- [Text Flipping Board](https://ui.aceternity.com/components/text-flipping-board): A split-flap display component that animates characters with flip transitions, inspired by Vestaboard.
- [Text Generate Effect](https://ui.aceternity.com/components/text-generate-effect): A cool text effect that fades in text on page load, one by one.
- [Text Reveal Card](https://ui.aceternity.com/components/text-reveal-card): Mousemove effect to reveal text content at the bottom of the card.
- [Typewriter Effect](https://ui.aceternity.com/components/typewriter-effect): Text generates as if it is being typed on the screen.

## Card Components
- [Focus Cards](https://ui.aceternity.com/components/focus-cards): Hover over the card to focus on it, blurring the rest of the cards.
- [Hero Sections](https://ui.aceternity.com/components/hero-sections-free): A set of hero sections ranging from simple to complex layouts
- [Lens](https://ui.aceternity.com/components/lens): A lens component to zoom into images, videos, or practically anything.

## Background Effects
- [3D Marquee](https://ui.aceternity.com/components/3d-marquee): A 3D Marquee effect with grid, good for showcasing testimonials and hero sections

## Text Effects
- [Canvas Text](https://ui.aceternity.com/components/canvas-text): Animated text component with colorful curved lines rendered on canvas, clipped to the text shape.
- [Colourful Text](https://ui.aceternity.com/components/colourful-text): A text component with various colours, filter and scale effects.
- [Container Text Flip](https://ui.aceternity.com/components/container-text-flip): A container that flips through words, animating the width.
- [Encrypted Text](https://ui.aceternity.com/components/encrypted-text): A text component that reveals the text gradually, gibberish effect.
- [Flip Words](https://ui.aceternity.com/components/flip-words): A component that flips through a list of words
- [Hero Highlight](https://ui.aceternity.com/components/hero-highlight): A background effect with a text highlight component, perfect for hero sections.
- [Layout Text Flip](https://ui.aceternity.com/components/layout-text-flip): A text flip effect that changes the layout of surrounding text
- [Link Preview](https://ui.aceternity.com/components/link-preview): Dynamic link previews for your anchor tags
- [Pointer Highlight](https://ui.aceternity.com/components/pointer-highlight): A component that highlights text when it's in view, with a pointer and border.
- [Text Flipping Board](https://ui.aceternity.com/components/text-flipping-board): A split-flap display component that animates characters with flip transitions, inspired by Vestaboard.
- [Text Generate Effect](https://ui.aceternity.com/components/text-generate-effect): A cool text effect that fades in text on page load, one by one.
- [Text Hover Effect](https://ui.aceternity.com/components/text-hover-effect): A text hover effect that animates and outlines gradient on hover, as seen on x.ai
- [Text Reveal Card](https://ui.aceternity.com/components/text-reveal-card): Mousemove effect to reveal text content at the bottom of the card.
- [Typewriter Effect](https://ui.aceternity.com/components/typewriter-effect): Text generates as if it is being typed on the screen.

## Layout Components
- [Resizable Navbar](https://ui.aceternity.com/components/resizable-navbar): A navbar that changes width on scroll, responsive and animated.

## Special Effects
- [Background Lines](https://ui.aceternity.com/components/background-lines): A set of svg paths that animate in a wave pattern. Good for hero sections background, as seen on height.app
- [Lens](https://ui.aceternity.com/components/lens): A lens component to zoom into images, videos, or practically anything.

## Utility Components
- [Animated Modal](https://ui.aceternity.com/components/animated-modal): A customizable, compound modal component with animated transitions
- [Glare Card](https://ui.aceternity.com/components/glare-card): A glare effect that happens on hover, as seen on Linear's website
- [Link Preview](https://ui.aceternity.com/components/link-preview): Dynamic link previews for your anchor tags
- [Sidebar](https://ui.aceternity.com/components/sidebar): Expandable sidebar that expands on hover, mobile responsive and dark mode support

## Other Components
- [3D Animated Pin](https://ui.aceternity.com/components/3d-pin): A gradient pin that animates on hover, perfect for product links.
- [3D Card Effect](https://ui.aceternity.com/components/3d-card-effect): A card perspective effect, hover over the card to elevate card elements.
- [3D Globe](https://ui.aceternity.com/components/3d-globe): A realistic globe component with tooltips and avatar tips
- [Add Utilities](https://ui.aceternity.com/components/add-utilities): Commonly used utilities for using Aceternity UI
- [Animated Testimonials](https://ui.aceternity.com/components/animated-testimonials): Minimal testimonials sections with image and quote.
- [Animated Tooltip](https://ui.aceternity.com/components/animated-tooltip): A cool tooltip that reveals on hover, follows mouse pointer
- [Apple Cards Carousel](https://ui.aceternity.com/components/apple-cards-carousel): A sleek and minimal carousel implementation, as seen on apple.com
- [ASCII Art](https://ui.aceternity.com/components/ascii-art): Convert any image to ASCII art with customizable charsets, colors, and animations.
- [Aurora Background](https://ui.aceternity.com/components/aurora-background): A subtle Aurora or Southern Lights background for your website.
- [Background Beams](https://ui.aceternity.com/components/background-beams): Multiple background beams that follow a path of SVG, makes a good hero section background.
- [Background Beams With Collision](https://ui.aceternity.com/components/background-beams-with-collision): Exploding beams in the background
- [Background Boxes](https://ui.aceternity.com/components/background-boxes): A full width background box container that highlights on hover
- [Background Gradient](https://ui.aceternity.com/components/background-gradient): An animated gradient that sits at the background of a card, button or anything.
- [Background Gradient Animation](https://ui.aceternity.com/components/background-gradient-animation): A smooth and elegant background gradient animation that changes the gradient position over time.
- [Background Ripple Effect](https://ui.aceternity.com/components/background-ripple-effect): A grid of cells that ripple when clicked.
- [Bento Grid](https://ui.aceternity.com/components/bento-grid): A skewed grid layout with Title, description and a header component
- [Canvas Reveal Effect](https://ui.aceternity.com/components/canvas-reveal-effect): A dot background that expands on hover, as seen on Clerk's website
- [Card Spotlight](https://ui.aceternity.com/components/card-spotlight): A card component with a spotlight effect revealing a radial gradient background
- [Card Stack](https://ui.aceternity.com/components/card-stack): Cards stack on top of each other after some interval. Perfect for showing testimonials.
- [Cards](https://ui.aceternity.com/components/cards-free): A set of cards that can be used for different use cases
- [Carousel](https://ui.aceternity.com/components/carousel): A customizable carousel with microinteractions and slider.
- [CLI](https://ui.aceternity.com/components/cli): Installing Aceternity UI with the Shadcn CLI
- [Code Block](https://ui.aceternity.com/components/code-block): A configurable code block component built on top of react-syntax-highlighter.
- [Comet Card](https://ui.aceternity.com/components/comet-card): A perspective, 3D, Tilt card as seen on Perplexity Comet's website.
- [Compare](https://ui.aceternity.com/components/compare): A comparison component between two images, slide or drag to compare
- [Cover](https://ui.aceternity.com/components/container-cover): A Cover component that wraps any children, providing beams and space effect, hover to reveal speed.
- [Direction Aware Hover](https://ui.aceternity.com/components/direction-aware-hover): A direction aware hover effect using Framer Motion, Tailwindcss and good old javascript.
- [Dither Shader](https://ui.aceternity.com/components/dither-shader): A real-time ordered dithering effect for images, perfect for pixel art and retro aesthetics.
- [Dotted Glow Background](https://ui.aceternity.com/components/dotted-glow-background): A background effect with opacity animation, glow effect and more.
- [Draggable Card](https://ui.aceternity.com/components/draggable-card): A tiltable, draggable card component that jumps on bounds.
- [Evervault Card](https://ui.aceternity.com/components/evervault-card): A cool card with amazing hover effect, reveals encrypted text and a mixed gradient.
- [Expandable Cards](https://ui.aceternity.com/components/expandable-card): Click cards to expand them and show additional information
- [Feature Sections](https://ui.aceternity.com/components/feature-sections-free): A set of feature sections ranging from bento grids to simple layouts
- [File Upload](https://ui.aceternity.com/components/file-upload): A minimal file upload form with background grid, drag and drop, and micro interactions.
- [Floating Dock](https://ui.aceternity.com/components/floating-dock): A floating dock mac os style component, acts as a navigation bar.
- [Floating Navbar](https://ui.aceternity.com/components/floating-navbar): A sticky Navbar that hides on scroll, reveals when scrolled up.
- [Following Pointer](https://ui.aceternity.com/components/following-pointer): A custom pointer that follows mouse arrow and animates in pointer and content.
- [Glowing Effect](https://ui.aceternity.com/components/glowing-effect): A border glowing effect that adapts to any container or card, as seen on Cursor's website.
- [Google Gemini Effect](https://ui.aceternity.com/components/google-gemini-effect): An effect of SVGs as seen on the Google Gemini Website
- [Grid and Dot Backgrounds](https://ui.aceternity.com/components/grid-and-dot-backgrounds): A simple grid and dots background to make your sections stand out.
- [Hover Border Gradient](https://ui.aceternity.com/components/hover-border-gradient): A hover effect that expands to the entire container with a gradient border.
- [Hover Effect](https://ui.aceternity.com/components/card-hover-effect): Hover over the cards and the effect slides to the currently hovered card.
- [Images Badge](https://ui.aceternity.com/components/images-badge): A badge with images that can be hovered to reveal more images.
- [Images Slider](https://ui.aceternity.com/components/images-slider): A full page slider with images that can be navigated with the keyboard.
- [Infinite Moving Cards](https://ui.aceternity.com/components/infinite-moving-cards): A customizable group of cards that move infinitely in a loop. Made with Framer Motion and Tailwind CSS.
- [Install Next.js](https://ui.aceternity.com/components/install-nextjs): Install Next.js with Create Next App
- [Install Tailwind CSS](https://ui.aceternity.com/components/install-tailwindcss): Install Tailwind CSS with Next.js (v3 and v4)
- [Keyboard](https://ui.aceternity.com/components/keyboard): A mac style keyboard component with mechanical keys sound effects.
- [Lamp Section Header](https://ui.aceternity.com/components/lamp-effect): A lamp effect as seen on linear, great for section headers.
- [Layout Grid](https://ui.aceternity.com/components/layout-grid): A layout effect that animates the grid item on click, powered by framer motion layout
- [Loaders](https://ui.aceternity.com/components/loader): A set of simple and minimal loaders for your loading screens and components.
- [Meteor Effect](https://ui.aceternity.com/components/meteors): A group of beams in the background of a container, sort of like meteors.
- [Moving Border](https://ui.aceternity.com/components/moving-border): A border that moves around the container. Perfect for making your buttons stand out.
- [Multi Step Loader](https://ui.aceternity.com/components/multi-step-loader): A step loader for screens that take a lot of time to load.
- [Navbar Menu](https://ui.aceternity.com/components/navbar-menu): A navbar menu that animates its children on hover, makes a beautiful bignav
- [Noise Background](https://ui.aceternity.com/components/noise-background): A dynamic background effect with animated gradients, noise texture, and smooth motion.
- [Parallax Grid Scroll](https://ui.aceternity.com/components/parallax-scroll): A grid where two columns scroll in oposite directions, giving a parallax effect.
- [Pixelated Canvas](https://ui.aceternity.com/components/pixelated-canvas): Convert any image to a pixelated canvas mouse distortion effects, as seen on Tailwind CSS Website.
- [Placeholders And Vanish Input](https://ui.aceternity.com/components/placeholders-and-vanish-input): Sliding in placeholders and vanish effect of input on submit
- [Scales](https://ui.aceternity.com/components/scales): A repeating diagonal, horizontal, or vertical line pattern background effect.
- [Shooting Stars and Stars Background](https://ui.aceternity.com/components/shooting-stars-and-stars-background): A shooting star animation on top of a starry background, as seen on figmaplug.in
- [Signup Form](https://ui.aceternity.com/components/signup-form): A customizable form built on top of shadcn's input and label, with a touch of framer motion
- [Stateful Button](https://ui.aceternity.com/components/stateful-button): A button that shows a loading state when clicked, and a success state when the action is completed.
- [Sticky Scroll Reveal](https://ui.aceternity.com/components/sticky-scroll-reveal): A sticky container that sticks while scrolling, text reveals on scroll
- [SVG Mask Effect](https://ui.aceternity.com/components/svg-mask-effect): A mask reveal effect, hover the cursor over a container to reveal what's underneath.
- [Tailwind CSS buttons](https://ui.aceternity.com/components/tailwindcss-buttons): A curated list of awesome, battle tested Tailwind CSS buttons components
- [Terminal](https://ui.aceternity.com/components/terminal): A mac style terminal component with bash syntax highlighting and typewriter effect.
- [Timeline](https://ui.aceternity.com/components/timeline): A timeline component with sticky header and scroll beam follow.
- [Tooltip Card](https://ui.aceternity.com/components/tooltip-card): A tooltip card container that follows mouse pointer when hovered over
- [Tracing Beam](https://ui.aceternity.com/components/tracing-beam): A Beam that follows the path of an SVG as the user scrolls. Adjusts beam length with scroll speed.
- [Vortex Background](https://ui.aceternity.com/components/vortex): A wavy, swirly, vortex background ideal for CTAs and backgrounds.
- [Wavy Background](https://ui.aceternity.com/components/wavy-background): A cool background effect with waves that move.
- [Webcam Pixel Grid](https://ui.aceternity.com/components/webcam-pixel-grid): A real-time webcam pixel grid effect, perfect for pixel art and retro aesthetics.
- [Wobble Card](https://ui.aceternity.com/components/wobble-card): A card effect that translates and scales on mousemove, perfect for feature cards.
- [World Map](https://ui.aceternity.com/components/world-map): A world map with animated lines and dots, programatically generated.

## Pro Blocks: Backgrounds
- [Background Dots](https://ui.aceternity.com/blocks/backgrounds/background-with-dots): A CSS-only dotted pattern background using radial gradients. Lightweight alternative to SVG or canvas-based patterns with automatic dark mode support.
- [Background Dots Masked](https://ui.aceternity.com/blocks/backgrounds/background-with-dots-masked): A dotted pattern with a radial CSS mask that fades the pattern from center to edges. Creates a spotlight effect that draws attention to centered content.
- [Background Dots Masked Vertical](https://ui.aceternity.com/blocks/backgrounds/background-with-dots-masked-vertical): A dotted pattern with a linear vertical mask that fades from top to bottom. Ideal for hero sections where content continues below the fold.
- [Background Grid with Dots](https://ui.aceternity.com/blocks/backgrounds/background-grid-with-dots): An SVG-based grid pattern with dots at intersections. Features customizable grid size, dot radius, and colors with automatic dark mode support and radial fade effect.
- [Background Grid with Dots and Animations](https://ui.aceternity.com/blocks/backgrounds/background-grid-with-dots-and-animations): An interactive SVG grid background with line distortion and dot movement effects on mouse hover. Features performance-optimized animations using requestAnimationFrame, customizable highlight colors, and automatic dark mode support.
- [Background Lines](https://ui.aceternity.com/blocks/backgrounds/background-with-lines): An animated background with shooting star trails and pulsing concentric circles. Uses SVG animations for the stars and Framer Motion for the breathing circle effect.
- [Background Noise Grid](https://ui.aceternity.com/blocks/backgrounds/background-with-noise-grid): Vertical strips with gradient fills and a noise texture overlay create a subtle layered background. Dynamically calculates strip count based on viewport width.
- [Background With Full Video](https://ui.aceternity.com/blocks/backgrounds/background-with-full-video): A full-screen video background that fades in on load with a radial mask in dark mode. Pairs with animated colorful text that cycles through colors on an interval.
- [Background With Shooting Stars](https://ui.aceternity.com/blocks/backgrounds/background-with-shooting-stars): An animated background with shooting star trails and pulsing concentric circles. Uses SVG animations for the stars and Framer Motion for the breathing circle effect.
- [Background With Skewed Lines](https://ui.aceternity.com/blocks/backgrounds/background-with-skewed-lines): Diagonal line pattern using an SVG pattern element with a linear mask that fades the center. Lightweight and resolution-independent.
- [Background With Skewed Rectangles](https://ui.aceternity.com/blocks/backgrounds/background-with-skewed-rectangles): A 3D perspective grid pattern with rectangles rotated on the X-axis. Two layers create a symmetrical effect with masks fading in opposite directions.

## Pro Blocks: Bento Grids
- [Bento Grid Illustrations](https://ui.aceternity.com/blocks/bento-grids/bento-grid-illustrations): A minimal bento grid showcasing device illustrations with MacBook, iPhone, iPad, and Dynamic Island. Features hover animations, blur fade-in content, and compound components.
- [Bento Grid With Skeletons](https://ui.aceternity.com/blocks/bento-grids/bento-grid-with-skeletons): A six-card bento grid where each card contains an animated skeleton illustration. Features chat messages, video call grids, mentorship marquees, and floating avatars.
- [Masonry Bento Grid With Images](https://ui.aceternity.com/blocks/bento-grids/masonry-bento-grid-with-images): A four-column masonry layout of linked image cards with hover overlays. Each card reveals the link URL on hover with a dark overlay transition.
- [Symmetric Bento Grid](https://ui.aceternity.com/blocks/bento-grids/symmetric-bento-grid): A five-card asymmetric bento layout with animated SVG connection paths, a rotating 3D globe using Cobe, and deployment workflow visualization.
- [Three Column Bento Grid](https://ui.aceternity.com/blocks/bento-grids/three-column-bento-grid): A responsive bento grid with animated skeletons including avatar scoring, progress tracking timelines, video interview previews, and drag-and-drop file upload.
- [Three Columns With Images](https://ui.aceternity.com/blocks/bento-grids/three-column-with-images): A five-card bento grid using product screenshots instead of animated skeletons. Cards animate on hover with title and description text shifting horizontally.

## Pro Blocks: Blog Content Sections
- [Blog Content Centered](https://ui.aceternity.com/blocks/blog-content-sections/blog-content-centered): A centered single-column blog post layout with a large hero image, author byline, and Markdown content rendered through react-markdown.
- [Blog Content With TOC](https://ui.aceternity.com/blocks/blog-content-sections/blog-content-with-toc): A two-column blog layout with a sticky table of contents sidebar. The TOC includes hover animations and collapses into a floating button on mobile.

## Pro Blocks: Blog Sections
- [Blog With Search](https://ui.aceternity.com/blocks/blog-sections/blog-with-search): A blog listing page with fuzzy search filtering. Features a large featured post card and a filterable list of additional posts below.
- [Blog With Search Magazine](https://ui.aceternity.com/blocks/blog-sections/blog-with-search-magazine): An editorial-style blog listing with a full-width cover story, fuzzy search, and a responsive card grid for the rest of your posts.
- [Simple Blog With Grid](https://ui.aceternity.com/blocks/blog-sections/simple-blog-with-grid): A blog listing page with a header section over a grid pattern background and a three-column card grid for posts. Cards scale on hover.

## Pro Blocks: Cards
- [Background Overlay Card](https://ui.aceternity.com/blocks/cards/background-overlay-card): A card with a static background image that swaps to an animated GIF on hover. Includes a dark overlay that appears during the hover state.
- [Content Card](https://ui.aceternity.com/blocks/cards/content-card): A blog-style card with author avatar, name, read time, and content overlaid on a background image. The overlay darkens on hover.
- [Expandable Card On Click](https://ui.aceternity.com/blocks/cards/expandable-card-on-click): A grid of cards that expand into a modal overlay when clicked. Uses Framer Motion's layoutId for smooth shared element transitions.
- [Feature Block Animated Card](https://ui.aceternity.com/blocks/cards/feature-block-animated-card): A card showcasing AI/ML tool logos with staggered bounce animations. Includes a glowing beam with sparkle particles that animates vertically.

## Pro Blocks: Contact Sections
- [Contact Form Grid With Details](https://ui.aceternity.com/blocks/contact-sections/contact-form-grid-with-details): A two-column contact section with a 3D tilted world map on the left and a full contact form on the right. Includes animated location pins and a subtle grid background.
- [Contact Section With Shader](https://ui.aceternity.com/blocks/contact-sections/contact-section-with-shader): A two-column contact section with an animated WebGL shader background and rotating testimonial cards. The shader features flowing gradients with customizable colors.
- [Simple Centered Contact Form](https://ui.aceternity.com/blocks/contact-sections/simple-centered-contact-form): A compact centered contact form card with name, email, company, and message fields. Includes social media links at the bottom.

## Pro Blocks: CTA Sections
- [CTA Centered Masonry Gallery](https://ui.aceternity.com/blocks/cta-sections/cta-centered-masonry-gallery): A centered call-to-action with headline, supporting text, and a primary button, plus a symmetric three-column masonry image gallery below.
- [CTA With Background Noise](https://ui.aceternity.com/blocks/cta-sections/cta-with-background-noise): A dark two-column CTA section with noise texture overlay, gradient border lines, and product images. Ideal for high-contrast conversion sections.
- [CTA With Dashed Grid Lines](https://ui.aceternity.com/blocks/cta-sections/cta-with-dashed-grid-lines): A three-column CTA layout with dashed border lines extending beyond the container edges. Includes a testimonial quote in the right column.
- [CTA With Masonry Images](https://ui.aceternity.com/blocks/cta-sections/cta-with-masonry-images): A two-column CTA section with headline, subtext, and a blue brand button on the left, paired with a two-column masonry image layout on the right.
- [Simple CTA With Images](https://ui.aceternity.com/blocks/cta-sections/simple-cta-with-images): A horizontal CTA section with overlapping user avatars, star ratings, and a call-to-action button. Avatars show tooltips on hover with spring-based animations.

## Pro Blocks: FAQs
- [FAQs With Dashed Lines](https://ui.aceternity.com/blocks/faqs/faqs-with-dashed-lines): An accordion-style FAQ component with animated dashed grid lines that appear on active items. Features grouped sections with smooth expand/collapse transitions.
- [FAQs With Grid](https://ui.aceternity.com/blocks/faqs/faqs-with-grid): A three-column masonry-style FAQ layout where questions and answers display as static cards. No accordion interaction, all content visible at once.
- [Frequently Asked Questions Accordion](https://ui.aceternity.com/blocks/faqs/frequently-asked-questions-with-accordion): A two-column FAQ layout with an animated accordion on the right. Plus/minus icons rotate and scale with CSS transitions when items expand or collapse.
- [Simple FAQs With Background](https://ui.aceternity.com/blocks/faqs/simple-faqs-with-background): A centered FAQ section with chevron-based accordions. Each item has a subtle background that appears when expanded for visual feedback.

## Pro Blocks: Feature Sections
- [Dither Features](https://ui.aceternity.com/blocks/feature-sections/dither-features): A feature section with a dithered image backdrop, tabbed content cards, and chat conversation skeletons for each feature.
- [Feature Section Bento Skeletons](https://ui.aceternity.com/blocks/feature-sections/feature-section-bento-skeletons): A bento grid feature section with 4 animated skeleton cards showcasing messaging, file sharing, team collaboration, and testimonials.
- [Feature Section With Centered Skeleton](https://ui.aceternity.com/blocks/feature-sections/feature-section-with-centered-skeleton): A three-column feature section with icon-led copy on the left and right, and a centered showcase panel with backdrop imagery and an animated scan-and-reveal treatment.
- [Feature Section With Horizontal Skeletons](https://ui.aceternity.com/blocks/feature-sections/feature-section-with-horizontal-skeletons): A horizontal feature section with device skeletons (iPhone, MacBook, iPad), animated beam paths, Dynamic Island interactions, and compliance cards.
- [Feature Section With Terminal](https://ui.aceternity.com/blocks/feature-sections/feature-section-with-terminal): A feature section with an animated terminal on the left and expandable feature tabs on the right. Each tab shows different CLI commands with realistic terminal output.
- [Feature Section With Vertical Grids](https://ui.aceternity.com/blocks/feature-sections/feature-section-with-vertical-grids): A feature section with a vertical grid layout featuring animated skeletons including login form, world map, chat conversation, and keyboard illustrations.
- [Feature With Inline Icons](https://ui.aceternity.com/blocks/feature-sections/feature-with-inline-icons): A minimal feature grid displaying icons inline with text. Features responsive separators that adapt to 1, 2, or 3 column layouts with clean border lines between items.
- [Features Bento Grid With Skeletons](https://ui.aceternity.com/blocks/feature-sections/bento-grid): A four-panel bento grid layout with animated skeleton illustrations including a video embed, image gallery, and 3D globe visualization using Cobe.
- [Features Grid With Large Skeletons](https://ui.aceternity.com/blocks/feature-sections/features-grid-with-large-skeletons): A three-column feature grid with tall cards displaying animated skeleton illustrations. Each card shows a workflow or status visualization with 3D perspective effects.
- [Features Section With Card Gradient](https://ui.aceternity.com/blocks/feature-sections/simple-with-card-gradient): A responsive feature grid with eight cards. Each card has a gradient background and an SVG grid pattern with randomly positioned highlighted squares.
- [Features Section With Hover Effects](https://ui.aceternity.com/blocks/feature-sections/simple-with-hover-effects): An eight-card feature grid with icons and animated hover states. A vertical accent bar and gradient overlay appear on hover.
- [Features Section With Skeletons](https://ui.aceternity.com/blocks/feature-sections/features-section-with-skeletons): A features section with animated skeleton loaders that bring each card to life. Each card shows a different feature with a unique skeleton animation.
- [Features With Hover And Text Animation](https://ui.aceternity.com/blocks/feature-sections/features-with-hover-and-text-animation): A feature grid with thin dividers between cells. Hovering a card updates the headline with a Motion swap and tints the active row so each audience reads clearly.
- [Features With Isometric Blocks](https://ui.aceternity.com/blocks/feature-sections/features-with-isometric-blocks): Feature cards with animated isometric box illustrations. Each card showcases a different animation direction on hover - left, right, or top face movement.
- [Features With Stacked Isometric Boxes](https://ui.aceternity.com/blocks/feature-sections/features-with-stacked-isometric-boxes): A feature section with stacked isometric boxes that animate based on active selection. Features autoplay with 5-second intervals and click-to-select functionality.
- [Features With Sticky Scroll](https://ui.aceternity.com/blocks/feature-sections/features-with-sticky-scroll): A scroll-driven feature section where content sticks to the viewport. The background color transitions between features as users scroll.
- [Multi Illustration Bento](https://ui.aceternity.com/blocks/feature-sections/multi-illustration-bento): A bento grid layout with 3 feature cards showcasing world map, keyboard, and login form illustrations with testimonials.
- [Multicolored Features](https://ui.aceternity.com/blocks/feature-sections/multicolored-features): A bordered feature section that highlights YouTube creator coverage with multicolor gradient rows, thumbnails, and an inline modal for playback.

## Pro Blocks: Footers
- [Centered Footer With Logo](https://ui.aceternity.com/blocks/footers/centered-with-logo): A minimal footer with centered logo, horizontal navigation links, and social media icons. A horizontal grid line divides navigation from the copyright section.
- [Footer With Big Text](https://ui.aceternity.com/blocks/footers/footer-with-big-text): A comprehensive footer with multiple link categories, social icons, and a large animated brand name at the bottom with a gradient fade effect.
- [Footer With Grid](https://ui.aceternity.com/blocks/footers/huge-footer-with-grid): A comprehensive footer with logo section, four-column link grid, newsletter signup, and social icons. Built for sites with extensive navigation needs.
- [Simple Footer With Four Grids](https://ui.aceternity.com/blocks/footers/simple-footer-with-four-grids): A clean footer layout with four link columns: pages, socials, legal, and account. Includes a logo, tagline, and copyright notice at the bottom.

## Pro Blocks: Hero Sections
- [Centered Around Testimonials](https://ui.aceternity.com/blocks/hero-sections/centered-around-testimonials): A unique hero section that places a customer testimonial front and center alongside your headline. Combines social proof with your value proposition for maximum trust and conversion. Perfect for established products, B2B SaaS, and service-based businesses.
- [Full Background Image With Text](https://ui.aceternity.com/blocks/hero-sections/full-background-image-with-text): An immersive hero section with a full-bleed background image and overlaid text content. Creates a cinematic, high-impact first impression. Ideal for creative agencies, portfolio websites, event pages, and brands that want to lead with striking photography.
- [Hero Section With Beams and Grid](https://ui.aceternity.com/blocks/hero-sections/hero-section-with-beams-and-grid): A mesmerizing hero section featuring animated light beams and a subtle grid pattern background. Creates an ethereal, high-tech atmosphere perfect for AI products, developer tools, and technology companies that want to convey innovation and sophistication.
- [Hero Section With Dither Background](https://ui.aceternity.com/blocks/hero-sections/hero-section-with-dither-background): A hero with a canvas dither treatment on a background photo, fixed nav, headline, CTAs, logo marquee, and a framed product shot. Good for SaaS or AI landing pages that want a retro, graphic look instead of a flat image.
- [Hero Section With Flickering Lights](https://ui.aceternity.com/blocks/hero-sections/hero-section-with-flickering-lights): A cinematic hero section with animated flickering light bulbs on a steel grid. The bulbs power up one by one with realistic flicker effects, occasionally fusing and coming back to life. Perfect for industrial, tech, or creative brands wanting a dramatic, high-impact introduction.
- [Hero Section With Images Grid and Navbar](https://ui.aceternity.com/blocks/hero-sections/hero-section-with-images-grid-and-navbar): A complete hero section featuring an integrated navigation bar and a dynamic images grid with marquee animation. Combines a full navigation experience with a visually rich image gallery. Ideal for creative portfolios, e-commerce storefronts, and media-rich landing pages.
- [Hero Section With Infinite Scroll Cards](https://ui.aceternity.com/blocks/hero-sections/hero-section-with-infinite-scroll-cards): A dynamic hero section featuring infinitely scrolling card elements that create continuous visual movement. The auto-scrolling cards showcase content, features, or testimonials in a flowing stream. Perfect for social platforms, marketplaces, content-heavy products, and any site that wants to convey abundance and activity.
- [Hero Section With Mesh Gradient](https://ui.aceternity.com/blocks/hero-sections/hero-section-with-mesh-gradient): A modern hero section featuring a vibrant mesh gradient background with smooth color transitions. Includes centered content with headline, description, and call-to-action buttons.
- [Hero Section With Mousemove](https://ui.aceternity.com/blocks/hero-sections/hero-section-with-mousemove): A hero section with interactive hover highlighting that displays element dimensions. Features a sliding number animation, horizontal masonry grid backdrop, and smooth Framer Motion transitions as you hover between elements.
- [Hero Section With Multi Color Background](https://ui.aceternity.com/blocks/hero-sections/hero-section-with-multi-color-background): A vibrant hero section featuring a multi-color animated background that shifts between color palettes. The dynamic color transitions create a lively, attention-grabbing atmosphere. Perfect for creative products, design tools, marketing agencies, and brands that want to convey energy and creativity.
- [Hero Section With Noise Background](https://ui.aceternity.com/blocks/hero-sections/hero-section-with-noise-background): A textured hero section with a subtle noise overlay that adds depth and a tactile quality to your landing page. The grain texture creates a premium, editorial feel. Perfect for design agencies, creative studios, premium brands, and any website that values aesthetic refinement.
- [Hero Section With Shadow and Scales](https://ui.aceternity.com/blocks/hero-sections/hero-section-with-shadow-and-scales): A full-height hero with a landscape image, ruler-style borders, and a simple nav. Works on mobile with a collapsible menu. Good for AI, audio, or SaaS landing pages that want a crisp, editorial first screen.
- [Hero Section With Tabs](https://ui.aceternity.com/blocks/hero-sections/hero-section-with-tabs): A modern hero section featuring an interactive tabbed browser window preview. Tabs auto-rotate through different content sections with smooth animations, showcasing multiple features or pages in a single component. Perfect for SaaS, portfolios, and product showcases.
- [Hero With Background And Navbar](https://ui.aceternity.com/blocks/hero-sections/hero-with-background-and-navbar): A sleek hero section with an animated background effect and an integrated navigation bar. The combined layout creates a seamless visual experience from the very first viewport. Ideal for SaaS platforms, tech startups, and product websites that need both navigation and visual impact in one cohesive block.
- [Hero With Centered Image](https://ui.aceternity.com/blocks/hero-sections/hero-with-centered-image): A stunning hero section with a large centered product image, bold headline, and dual call-to-action buttons. Perfect for SaaS landing pages, product launches, and startup websites that need a visual-first approach to capture attention above the fold.
- [Hero With Image and Scales](https://ui.aceternity.com/blocks/hero-sections/hero-with-image-and-scales): A modern hero section with a product image that reveals animated scales on mouse hover. The interactive reveal effect creates curiosity and engagement. Built with Tailwind blue-500 color palette. Perfect for tech products, SaaS dashboards, and developer tools that want to showcase depth behind the interface.
- [Minimal Hero Section With Parallax Images](https://ui.aceternity.com/blocks/hero-sections/minimal-hero-section-with-parallax-images): A clean, minimal hero section where stacked images create a parallax depth effect on scroll. The layered image composition adds visual sophistication without overwhelming the content. Ideal for portfolios, creative agencies, and product websites that value elegant simplicity.
- [Modern Hero With Gradients](https://ui.aceternity.com/blocks/hero-sections/modern-hero-with-gradients): A visually striking hero section featuring layered gradient backgrounds, bold typography, and animated elements. Designed for modern SaaS websites, AI products, and tech startups that want to make a bold first impression with vibrant colors and depth.
- [Playful Hero Section](https://ui.aceternity.com/blocks/hero-sections/playful-hero-section): A fun, energetic hero section with hand-drawn highlight annotations and bouncy animations. Uses react-rough-notation for sketch-style word underlining and circling. Perfect for creative agencies, educational platforms, personal brands, and startups that want to feel approachable and human.
- [Two Column With Image](https://ui.aceternity.com/blocks/hero-sections/two-column-with-image): A classic two-column hero layout with compelling copy on one side and a high-impact image on the other. Ideal for product-led landing pages, marketing websites, and any page that needs to balance visual storytelling with persuasive text above the fold.

## Pro Blocks: Illustrations
- [Animated Beam Path Illustration](https://ui.aceternity.com/blocks/illustrations/animated-beam-path-illustration): An animated beam path illustration featuring a glowing gradient beam that travels along a dotted SVG path. Perfect for showcasing data flow, connections, or visual transitions in feature sections and bento grids.
- [Box Illustration](https://ui.aceternity.com/blocks/illustrations/box-illustration): An interactive box illustration with popout cards that animate on hover. Features a Vercel deployment card and a testimonial card that pop out with spring physics.
- [Chat Conversation](https://ui.aceternity.com/blocks/illustrations/chat-conversation): An animated chat interface with message bubbles and avatars. Messages appear sequentially with staggered animations when the component comes into view.
- [Collaborative Cursors](https://ui.aceternity.com/blocks/illustrations/collaborative-cursors): Animated multiplayer cursors with name tags drawing selection boxes over a code file. Simulates real-time collaboration with staggered cursor movements.
- [Dynamic Island](https://ui.aceternity.com/blocks/illustrations/dynamic-island): An animated Dynamic Island component with customizable states. Features smooth spring animations cycling through idle, loading, and processed states with configurable text and timing.
- [Flipping Images With Bar](https://ui.aceternity.com/blocks/illustrations/flipping-images-with-bar): An animated image carousel that reveals colors with a scanning bar effect. Images start grayscale and transition to full color as a glowing bar sweeps across with trailing sparkles.
- [Folder With Files](https://ui.aceternity.com/blocks/illustrations/folder-with-files): An interactive folder illustration with files that fan out on hover. Includes animated pulse beams and a server component for file transfer visualization.
- [Inline Icon Illustration](https://ui.aceternity.com/blocks/illustrations/inline-icon-illustration): A compact marketing snippet: headline with an inline logo chip, gentle periodic motion, and a dashed curved connector branching into icon-led callouts.
- [iPad Illustration](https://ui.aceternity.com/blocks/illustrations/ipad-illustration): An interactive iPad illustration with Dynamic Island animation. Features volume buttons, power button, blur fade-in content, AirPods connection sequence, and smooth spring physics.
- [iPhone Illustration](https://ui.aceternity.com/blocks/illustrations/iphone-illustration): An interactive iPhone illustration with Dynamic Island animation. Features side buttons, blur fade-in content, AirPods connection sequence, and smooth spring physics.
- [Isometric Box](https://ui.aceternity.com/blocks/illustrations/isometric-box): A minimal isometric box illustration with smooth hover animations. Features rounded corners on the top face and subtle dashed vertical lines for depth.
- [Keyboard Illustration](https://ui.aceternity.com/blocks/illustrations/keyboard-illustration): A compact Mac keyboard illustration with blue hover glow effects. Features size variants (sm, md, lg, xl) for flexible placement in cards, bento grids, and feature sections.
- [MacBook Illustration](https://ui.aceternity.com/blocks/illustrations/macbook-illustration): An interactive MacBook illustration with lid open animation and Dynamic Island. Features blur fade-in content, AirPods connection animation, and smooth spring physics.
- [MacBook Illustration With Icons](https://ui.aceternity.com/blocks/illustrations/macbook-illustration-with-icons): A MacBook illustration with floating AI company icons that pop out on hover. Features staggered spring animations and 3D lid rotation.
- [Meeting Illustration](https://ui.aceternity.com/blocks/illustrations/meeting-illustration): A compact meeting confirmation card with inline time highlight, speaker row, and join or reschedule actions—good for calendar and scheduling stories in hero or feature sections.
- [Rotating Tabs With Text](https://ui.aceternity.com/blocks/illustrations/rotating-tabs-with-text): Stacked notification cards that rotate automatically every 3 seconds. Cards stack with depth effect and smooth spring animations using motion/react.
- [Slider Illustration](https://ui.aceternity.com/blocks/illustrations/slider-illustration): Short pricing copy with an inline brand chip, soft text highlights, and an interactive slider that shows a floating image preview while you drag across segments.
- [Testimonials Hover Illustration](https://ui.aceternity.com/blocks/illustrations/testimonials-hover-illustration): An interactive testimonial card grid with hover animations. Cards lift and rotate on hover, revealing a diagonal stripe pattern beneath each card.
- [Text Highlight Illustration](https://ui.aceternity.com/blocks/illustrations/text-highlight-illustration): A paragraph snippet with an inline highlight wipe, floating rich-text style toolbar, and Ask AI chip—motion-led, good for AI editing or selection UX stories.
- [Uptime Status Illustration](https://ui.aceternity.com/blocks/illustrations/uptime-status-illustration): An interactive uptime status bar illustration with hover effects. Each bar represents a day's status and reveals detailed information on hover with smooth animations.
- [World Map Illustration](https://ui.aceternity.com/blocks/illustrations/world-map-illustration): An interactive dotted world map with customizable location pins featuring user avatars. Uses Mercator projection for accurate positioning and supports dynamic pin placement via latitude/longitude coordinates.

## Pro Blocks: Login and Signup Sections
- [Login Form With Gradient](https://ui.aceternity.com/blocks/login-and-signup-sections/login-form-with-gradient): A two-column login page with form fields on the left and an animated gradient illustration on the right. Includes social login buttons and custom input styling.
- [Login Signup Minimal](https://ui.aceternity.com/blocks/login-and-signup-sections/login-signup-minimal): A clean and minimal login form with email and password fields, Google and Apple social login buttons, and a dashed divider. Features subtle input styling with ring borders and full dark mode support.
- [Login With Socials And Email](https://ui.aceternity.com/blocks/login-and-signup-sections/login-with-socials-and-email): A centered login form with GitHub and Google buttons at top, and an animated email input that reveals on click. Features corner-expanding hover effects on the submit button.
- [Premium Auth Split](https://ui.aceternity.com/blocks/login-and-signup-sections/premium-auth-split): A full-screen split authentication layout with a real-time WebGL raymarched torus shader on the left panel and a clean sign-in form on the right. Features Google OAuth, email input, and dark mode support.
- [Registration Form With Images](https://ui.aceternity.com/blocks/login-and-signup-sections/registration-form-with-images): A split-screen registration page with form fields on the left and social proof testimonials on the right. Features overlapping user avatars and decorative grid lines.
- [Simple Login With Grid Lines](https://ui.aceternity.com/blocks/login-and-signup-sections/simple-login-with-grid-lines): A clean login form with decorative dashed grid lines forming a border around the form. Features email and password inputs with subtle shadow and ring styling, plus a gradient submit button.

## Pro Blocks: Logo Clouds
- [Logo Cloud Marquee](https://ui.aceternity.com/blocks/logo-clouds/logo-cloud-marquee): A dual-row marquee logo cloud with opposite scroll directions. Uses react-fast-marquee with pause-on-hover and edge fade masks.
- [Logo Cloud With Blur Animation](https://ui.aceternity.com/blocks/logo-clouds/logo-cloud-with-blur-animation): A logo grid with scroll-triggered entrance animations. Logos fade in from above with blur that clears as they enter the viewport.
- [Logo Cloud With Swap Animation](https://ui.aceternity.com/blocks/logo-clouds/logo-cloud-with-swap-animation): A logo cloud with automatic rotation. Displays 10 logos in a 5x2 grid that swap every 3 seconds with horizontal motion and blur effects.
- [Logos With Blur Flip](https://ui.aceternity.com/blocks/logo-clouds/logos-with-blur-flip): An auto-rotating logo cloud where logos flip in with blur and fade animations. Logos cycle through sets on a 3-second interval.
- [Spotlight Logo Cloud](https://ui.aceternity.com/blocks/logo-clouds/spotlight-logo-cloud): A static grid of logos with an ambient color spotlight effect in the background. Radial gradients create a soft, glowing atmosphere.

## Pro Blocks: Navbars
- [Navbar Classic](https://ui.aceternity.com/blocks/navbars/navbar-classic): A traditional header layout with logo, horizontal nav links, search input, and CTA button. Clean and familiar navigation pattern.
- [Navbar Dark Shadow](https://ui.aceternity.com/blocks/navbars/navbar-dark-shadow): A dark navbar with deep ridge and groove shadows, dropdown mega menu with a 3-column grid layout including a blog panel, and full light/dark mode support.
- [Navbar Mega](https://ui.aceternity.com/blocks/navbars/navbar-mega): A mega menu navbar with large dropdown panels containing categorized links. Products and Resources sections display in a two-column grid.
- [Navbar Pill](https://ui.aceternity.com/blocks/navbars/navbar-pill): A navigation bar with pill-style tabs that highlight the active link. The centered nav sits inside a rounded container with backdrop blur.
- [Navbar Underline](https://ui.aceternity.com/blocks/navbars/navbar-underline): A navigation bar with underline indicators for active and hover states. A thin line appears below the selected link.
- [Navbar With Children](https://ui.aceternity.com/blocks/navbars/navbar-with-children): A navbar with dropdown menus that reveal on hover. Dropdowns can contain links, product cards with images, or nested navigation.
- [Simple Navbar With Hover Effects](https://ui.aceternity.com/blocks/navbars/simple-navbar-with-hover-effects): A rounded pill-style navbar with sliding background hover effects on nav items. Uses layoutId for smooth animated transitions between hovered states.

## Pro Blocks: Pricing Sections
- [Pricing Minimal](https://ui.aceternity.com/blocks/pricing-sections/pricing-minimal): A clean minimal pricing component with three tiers, dashed grid line accents on the featured card, and additional features section with divider.
- [Pricing Page With Featured And Enterprise](https://ui.aceternity.com/blocks/pricing-sections/pricing-page-with-featured-and-enterprise): A complete pricing page with three tiers plus a separate enterprise card. Features discounted pricing display and comprehensive feature lists.
- [Pricing With Header and Icons](https://ui.aceternity.com/blocks/pricing-sections/pricing-with-header-and-icons): Data-driven pricing section with three tiers, featured plan styling, checkmark icons, and full dark mode support. Plans are defined as a typed array for easy customization.
- [Pricing With Switch](https://ui.aceternity.com/blocks/pricing-sections/pricing-with-switch): A four-tier pricing grid with an animated monthly/yearly toggle. Price values animate in with blur effects when switching billing periods.
- [Pricing With Switch And Add On](https://ui.aceternity.com/blocks/pricing-sections/pricing-with-switch-and-add-on): A pricing section with monthly/yearly toggle and add-on options. Features animated price changes and a three-tier layout with a featured plan.
- [Simple Pricing With Three Tiers](https://ui.aceternity.com/blocks/pricing-sections/simple-pricing-with-three-tiers): A clean three-column pricing section with feature lists and CTA buttons. The middle tier is highlighted as featured with enhanced styling.

## Pro Blocks: Shaders
- [Dot Distortion Shader](https://ui.aceternity.com/blocks/shaders/dot-distortion-shader): An interactive canvas shader with a grid of dots that distort when the mouse passes over. Dots have breathing animations and random glow pulses.
- [Lines Gradient Shader](https://ui.aceternity.com/blocks/shaders/lines-gradient-shader): A canvas-based animated shader background with flowing gradient bands. Renders smooth wave-like lines with customizable colors, speed, and density.
- [Spotlight Shader](https://ui.aceternity.com/blocks/shaders/spotlight-shader): A canvas shader with configurable spotlight beams shining from corners or edges. Supports multiple spotlights with custom colors, positions, and animations.

## Pro Blocks: Sidebars
- [Collapsible Sidebar](https://ui.aceternity.com/blocks/sidebars/collapsible-sidebar): A sidebar with a toggle button to expand and collapse. Maintains state between interactions and includes a smooth width transition.
- [Grouped Sidebar](https://ui.aceternity.com/blocks/sidebars/grouped-sidebar): A collapsible sidebar with grouped navigation sections. Features persistent state for both sidebar open/close and individual group expansion using localStorage.
- [Simple Sidebar With Hover](https://ui.aceternity.com/blocks/sidebars/simple-sidebar-with-hover): A sidebar that expands on hover to reveal link labels. Shows only icons when collapsed, full labels when hovered or active.

## Pro Blocks: Stats Sections
- [Stats For Changelog](https://ui.aceternity.com/blocks/stats-sections/stats-for-changelog): A timeline-style changelog section with date tabs and content cards. Clicking tabs reveals corresponding release notes with images.
- [Stats With Gradient](https://ui.aceternity.com/blocks/stats-sections/stats-with-gradient): A four-column stats grid with glassmorphism cards. Features an animated purple gradient beam at the bottom and decorative SVG bar patterns.
- [Stats With Grid Background](https://ui.aceternity.com/blocks/stats-sections/stats-with-grid-background): A three-column stats section with icon containers, values, and descriptions. Each card has an SVG grid pattern background and a hover-animated corner element.
- [Stats With Number Ticker](https://ui.aceternity.com/blocks/stats-sections/stats-with-number-ticker): A stats section with animated counting numbers. Values tick up from zero when the component enters the viewport, using spring physics.

## Pro Blocks: Team Sections
- [Team Section With Light Background](https://ui.aceternity.com/blocks/team-sections/team-section-with-light-background): A responsive team grid with portrait cards on soft gray surfaces, names and roles, and a dotted divider before each short bio.
- [Team Section With Scales](https://ui.aceternity.com/blocks/team-sections/team-section-with-scales): A team grid with portrait cards, names and roles, and subtle ruler-style grid lines for a structured about or culture section.
- [Team Section With Small Avatars](https://ui.aceternity.com/blocks/team-sections/team-section-with-small-avatars): A compact team list with tiny avatars, names, and roles—plus centered intro copy and optional hiring or culture links.
- [Team Section With Timeline Cards](https://ui.aceternity.com/blocks/team-sections/team-section-with-timeline-cards): A clean team grid with profile cards, availability badges, location details, and social actions.

## Pro Blocks: Testimonials
- [Testimonials Background With Drag](https://ui.aceternity.com/blocks/testimonials/testimonials-background-with-drag): A hero-style testimonials section with draggable cards scattered in the background. Cards can be picked up and moved, creating an interactive experience.
- [Testimonials Grid With Centered Carousel](https://ui.aceternity.com/blocks/testimonials/testimonials-grid-with-centered-carousel): A testimonials section with a faded background grid and a centered carousel slider. The active testimonial displays prominently while others blur in the background.
- [Testimonials Marquee Grid](https://ui.aceternity.com/blocks/testimonials/testimonials-marquee-grid): A two-row testimonials section with horizontal marquee scrolling. Cards scroll at different speeds with pause-on-hover interaction.
- [Testimonials Marquee Grid Boxed](https://ui.aceternity.com/blocks/testimonials/testimonials-marquee-grid-boxed): Two stacked rows of logo testimonials in horizontal marquees. Bordered cells, optional highlight cards, and a headline for landing-page social proof.
- [Testimonials Masonry Grid](https://ui.aceternity.com/blocks/testimonials/testimonials-masonry-grid): A four-column masonry layout of testimonial cards with quote icons. Cards have varying heights based on content length, creating a Pinterest-style layout.
- [Testimonials With Carousel](https://ui.aceternity.com/blocks/testimonials/testimonials-with-carousel): A testimonials section with paginated carousel navigation. Displays three testimonials at a time with smooth animated transitions between pages.
- [Testimonials With Centered Highlight](https://ui.aceternity.com/blocks/testimonials/testimonials-with-centered-highlight): A heading, short intro, and a responsive grid of testimonial cards with logos, quotes, and avatars. Highlight key cards when you want one story to stand out.

## Pro Blocks: Text Animations
- [Text Animation Blur Fade In](https://ui.aceternity.com/blocks/text-animations/text-animation-blur-fade-in): A word-by-word text reveal animation where each word fades in from blur. Uses viewport detection to trigger animations when content scrolls into view.
- [Text Animation Flipping Words](https://ui.aceternity.com/blocks/text-animations/text-animation-flipping-words): A typewriter-style text animation that types and deletes words with 3D flip effects. Characters rotate in with blur as they appear.
- [Text Animation Typewriter Effect](https://ui.aceternity.com/blocks/text-animations/text-animation-typewriter-effect): A classic typewriter text effect that types words character by character. Includes a blinking cursor and configurable typing and deletion speeds.
- [Text Generate Typewriter](https://ui.aceternity.com/blocks/text-animations/text-generate-typewriter): A typewriter effect with realistic mechanical keyboard sounds. Types words character by character with key down/up audio feedback, backspaces through text, and ends with a blinking cursor.

## Templates
- [Agenforce Marketing Template](https://ui.aceternity.com/templates/agenforce-marketing-template): A marketing template designed for various use cases, including AI Agents, Agency, Chatbots and SaaS. Includes delightful micro-interactions and animations.
- [Agenlabs Agency Template](https://ui.aceternity.com/templates/agenlabs-agency-template): Agenlabs is template with Clean modern design and crisp illustrations, perfect template to get your Agency business up and running.
- [AI SaaS Template](https://ui.aceternity.com/templates/ai-saas-template): Every AI SaaS template is a multi-page template focused on AI applications offering SaaS solutions.
- [Cryptgen Marketing Template](https://ui.aceternity.com/templates/cryptgen-marketing-aceternity): A single page, modern and responsive template with a bento grid, testimonials, features, and a call to action.
- [DevPro Portfolio Template](https://ui.aceternity.com/templates/devpro-portfolio-template): DevPro is a portfolio template for developers with blogs, projects, events and everything. Clean. Modern. Responsive. Neat.
- [Foxtrot Marketing Template](https://ui.aceternity.com/templates/foxtrot-marketing-template): Foxtrot is a SaaS marketing template that has a modern design with a pinch of class, perfect for launching your single page website.
- [Minimal Portfolio Template](https://ui.aceternity.com/templates/minimal-portfolio-template): An elegant, feature rich portfolio website template with a minimalistic center design along with tasteful microinteractions.
- [Minimalist Portfolio Template](https://ui.aceternity.com/templates/minimalist-portfolio-template): A minimalist portfolio template with a clean, modern design and a focus on content. Features 5 pages with a simple navigation. Change fonts and colors to your liking.
- [Nodus Agent Template](https://ui.aceternity.com/templates/nodus-agent-template): A template focused for startups building for AI agents and AI Chatbots. Clean, Minimal and Modern.
- [Playful Marketing Template](https://ui.aceternity.com/templates/playful-marketing-aceternity): A simple, elegant and playful marketing template with minimal colors and creative microinteractions.
- [Proactiv Marketing Template](https://ui.aceternity.com/templates/proactiv-marketing-template): Proactiv is a marketing template designed for SaaS companies focusing on marketing tools for social media.
- [Schedule Marketing Template](https://ui.aceternity.com/templates/schedule-marketing-template): Elegant marketing template for scheduling and booking appointments. Bento grids, modern design and responsive.
- [Sidefolio Portfolio Template](https://ui.aceternity.com/templates/sidefolio-portfolio-template): Sidefolio is a portfolio template for developers with blogs, projects, resume and everything. A sidebar layout with a modern design. Mobile responsive with toggleable sidebar.
- [Simplistic SaaS Template](https://ui.aceternity.com/templates/simplistic-saas-template): A SaaS template designed for AI and Agentic startups, features bento grids with rich illustrations and microinteractions.
- [Startup Landing Page Template](https://ui.aceternity.com/templates/startup-landing-page-template): A simple, clean, modern and minimalistic landing page template for startups. Filled with microinteractions to keep your users engaged.

## Blog Posts
- [Using Skeletons to Uplift Your Feature Sections](https://ui.aceternity.com/blog/skeletons-to-uplift-your-feature-sections): Skeletons or illustrations are perfect for conveying your message across. In this article, let's understand the nitty gritties of it.
- [How to create a bento grid with Tailwind CSS, Next.js and Framer Motion](https://ui.aceternity.com/blog/how-to-create-a-bento-grid-with-tailwindcss-nextjs-and-framer-motion): A bento grid is a design trend that focuses on grids to showcase various features of your product or business. In this article, we are going to talk about how you can create a bento grid from scratch using Tailwind CSS, Next.js and Framer Motion.
- [How we built the best AI SaaS Template at Aceternity](https://ui.aceternity.com/blog/how-we-built-the-best-ai-saas-template): In this article, I will walk you through our flagship AI SaaS Template where I talk about how I structured it from start to finish and what are some of the best practices I followed.

## Complete Component List (for AI reference)
All available components: 3d-card, 3d-globe, 3d-marquee, 3d-pin, animated-modal, animated-testimonials, animated-tooltip, apple-cards-carousel, ascii-art, aurora-background, background-beams, background-beams-with-collision, background-boxes, background-gradient, background-gradient-animation, background-lines, background-ripple-effect, bento-grid, canvas-reveal-effect, canvas-text, card-hover-effect, card-spotlight, card-stack, carousel, code-block, colourful-text, comet-card, compare, container-scroll-animation, container-text-flip, cover, direction-aware-hover, dither-shader, dotted-glow-background, draggable-card, encrypted-text, evervault-card, file-upload, flip-words, floating-dock, floating-navbar, focus-cards, following-pointer, glare-card, globe, glowing-effect, glowing-stars, gooey-input, google-gemini-effect, grid, hero-highlight, hero-parallax, hover-border-gradient, images-badge, images-slider, infinite-moving-cards, input, keyboard, label, lamp, layout-grid, layout-text-flip, lens, link-preview, loader, macbook-scroll, meteors, moving-border, moving-line, multi-step-loader, navbar-menu, noise-background, parallax-hero-images, parallax-scroll, parallax-scroll-2, pixelated-canvas, placeholders-and-vanish-input, pointer-highlight, resizable-navbar, scales, shooting-stars, sidebar, sparkles, spotlight, spotlight-new, stars-background, stateful-button, sticky-banner, sticky-scroll-reveal, svg-mask-effect, tabs, tailwindcss-buttons, terminal, text-flipping-board, text-generate-effect, text-hover-effect, text-reveal-card, timeline, tooltip-card, tracing-beam, typewriter-effect, vortex, wavy-background, webcam-pixel-grid, wobble-card, world-map