New illustration block: MacBook Illustration With Icons.
A MacBook with floating AI company icons (Perplexity, OpenAI, Anthropic) that pop out on hover. The lid opens with spring physics while the icons animate upward with staggered timing and slight rotation. Each icon has a card-style shadow and inverts colors in dark mode.
Four new pro blocks today: Box Illustration, Feature With Inline Icons, Pricing With Header and Icons, and Hero Section With Mousemove.
An interactive 3D box with popout cards on hover. Features a Vercel deployment card and testimonial card that animate upward with spring physics. The box uses CSS 3D transforms to create an open-box effect with front lid, back lid, and side flaps. Fully dark mode responsive.
A minimal feature grid with icons placed inline next to text. The layout adapts from 1 column on mobile to 2 on tablet to 3 on desktop. Responsive separators appear between items only—no borders on the outer edges. The separator logic calculates each item's grid position at each breakpoint to show the right combination of horizontal and vertical lines.
A data-driven pricing section with three tiers. Plans are defined in a typed array, making it easy to swap content without touching component structure. The featured plan inverts colors—dark in light mode, light in dark mode—to draw attention. Features can include React nodes for custom formatting like bold text. The CTA button on the featured tier uses a gradient, while others stick to subtle shadows. All shadows adapt to the current theme.
A hero with a Figma-style hover inspector. Hover over any element—headline, paragraph, buttons, or badge—and a blue border appears with a dimension label showing the width and height in pixels. The numbers animate with a sliding digit effect, counting up from zero on each hover.
Behind the content sits a horizontal masonry grid with 5 rows of component screenshots. Each row has a different horizontal offset, and a radial mask fades the images toward the center so they don't compete with the text.
The hover highlight moves smoothly between elements using Framer Motion's layoutId. After 5 seconds without interaction, it fades out. All sub-components use memo to avoid unnecessary re-renders.
New component: Terminal and a new pro block: Feature Section with Terminal.
A Mac-style terminal with typewriter effect and bash syntax highlighting. Commands type out character by character with optional keyboard sounds.
A two-column layout pairing the terminal with expandable feature tabs. Click a tab to see relevant CLI commands typed out in real time. Tabs cover initialization, listing components, adding components, and AI-assisted discovery.
New Grouped Sidebar in the Sidebars bundle.
Collapsible sidebar with expandable navigation groups. Both sidebar state and group expansion persist to localStorage, so everything stays where you left it after page refresh.
Primary links up top, divider, then collapsible groups (Content, Team, Settings) below. Groups open by default. Works on mobile with a slide-out drawer.
New Text Generate Typewriter in the Text Animations bundle.
A typewriter effect with realistic mechanical keyboard sounds. Types words character by character with key down/up audio feedback—each keystroke plays the press sound, then the release sound when the character appears.
Backspace uses press-and-hold behavior: one key-down sound at the start, rapid deletion, then key-up when done. The final word stays on screen with a typed period and blinking cursor. Animation triggers on viewport entry and runs once.
New Simplistic SaaS Template for AI and Agentic startups.
New Feature Section With Vertical Grids added to the Feature Sections bundle.
New Feature Section With Horizontal Skeletons added to the Feature Sections bundle.
Background Grid with Dots - An SVG-based grid pattern background with circular dots at each intersection point. Features customizable grid size, dot radius, and colors with automatic dark mode support. The exported GridWithDots component can be used standalone as a background layer in hero sections, landing pages, and feature cards.
Background Grid with Dots and Animations - An interactive SVG grid background with line distortion and dot movement effects on mouse hover. Lines wave and change color based on cursor proximity, while dots follow their intersecting lines. Performance-optimized with requestAnimationFrame, passive event listeners, and automatic animation pause when idle.
Animated Beam Path Illustration - A glowing gradient beam animation that travels along a dotted SVG path. Features orange-to-red gradient colors with soft glow effects, ideal for illustrating data flow, connections, or progress indicators in feature sections and bento grids.
Multi Illustration Bento - A bento grid layout with 3 feature cards showcasing authentication, SDK availability, and global security. Features a login form skeleton with social auth and testimonial, a dotted world map with animated avatar pins, and a Mac keyboard illustration with hover effects. All cards use composition components with dark mode support.
World Map Illustration - Interactive dotted world map with customizable location pins featuring teardrop-shaped markers and avatar support.
Keyboard Illustration - Compact Mac keyboard with blue hover glow effects and size variants (sm, md, lg, xl) for cards and bento grids.
Simple Login With Grid Lines - Clean login form with decorative dashed grid lines border, subtle input styling, and a dark gradient submit button.
All illustrations feature:
useAnimate hookuseImperativeHandle patternrepeat: Infinity
New free component: Parallax Hero Images - absolutely positioned images with mouse-driven parallax effect for hero sections.
Features include blur fade-in animations, depth-based movement speeds, and two variants: default (middle images closest) and edge-focus (top/bottom images closest). Fully responsive with touch support on mobile.
Features With Stacked Isometric Boxes - A two-column feature section with interactive stacked isometric boxes. Features autoplay that cycles through items every 5 seconds, with timer reset on click. The left column displays feature cards with titles and descriptions, while the right column shows stacked isometric boxes with the active one highlighted in blue. Built with Framer Motion for smooth spring animations.
CTA With Masonry Images - A two-column call-to-action block with left-aligned heading, supporting text, and a blue primary button styled like the brand button system. The right side uses a two-column masonry-style image grid with rectangular cards, subtle shadow/ring treatment, and soft edge fading for a polished static presentation.
Premium Auth Split - A full-screen split authentication layout with a live WebGL raymarched shader on the left panel featuring three rotating torus shapes. Right panel has a sign-in form with Google OAuth, email input, and a gradient continue button. Full dark mode support.
New free component: Scales - a repeating line pattern for backgrounds.
Works in three directions: diagonal, horizontal, or vertical. You can change the size and color. There's also a ScalesContainer wrapper if you want to place content on top of it.
Isometric Box - Minimal isometric box illustration with smooth hover animations. Features rounded corners on the top face with sharp structural edges. On hover, the faces animate outward creating an exploded view effect using spring physics.
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. Active cards highlight the moving face with a sky-500 stroke color.
Login Signup Minimal - Clean and minimal login form with email and password fields, followed by Google and Apple social login buttons. Features a dashed divider with gradient effect, subtle input styling with ring borders, and full dark mode support.
Pricing Minimal - Clean minimal pricing with three tiers and dashed grid line accents on the featured card. Features a decorative divider with plus icon for additional features, and self-contained mock data for easy customization.
Contact Section With Shader - Two-column contact form with WebGL gradient background and rotating testimonials. Pass your own colors via the colors prop.
Feature Section Bento Skeletons - Bento grid with 4 cards. Each card has an animated skeleton showing the feature in action: messaging, file transfer, team collaboration, and testimonials.
Uptime Status Illustration - Interactive uptime status bar with 45 days of history. Hover over each bar to reveal date, status, and uptime percentage with smooth blur animations. Color-coded for operational, degraded, partial outage, and major outage states.
Rotating Tabs With Text - Stacked notification cards that automatically rotate every 3 seconds. Features spring animations, 3D depth stacking, and full light/dark mode support.
Flipping Images With Bar - Animated image carousel with a scanning bar reveal effect. Images start grayscale and transition to full color as a glowing bar sweeps across with trailing sparkles. Features blur in/out transitions between images.
New component drop: ASCII Art - Transform any image into beautiful ASCII art with customizable charsets and animations.
| Prop | Type | Default | Description |
|---|---|---|---|
src | string | - | Source image URL |
resolution | number | 80 | Number of ASCII columns |
charset | string | "standard" | Charset preset or custom characters |
colored | boolean | false | Use original image colors |
animationStyle | "fade" | "typewriter" | "matrix" | "fade" | Animation effect on reveal |
objectFit | "cover" | "contain" | "fill" | "cover" | How image fits the ASCII grid |
Perfect for creative portfolios, retro-themed sites, or anywhere you want a unique visual effect.
Introducing Explore Mode - a new way to browse and discover components on Aceternity UI.
Explore mode gives you a visual overview of all available components, blocks, and templates in a grid layout. Quickly scan through designs, find inspiration, and jump directly to any component that catches your eye.
Perfect for discovering new components or getting a quick overview of what's available.
New component drop: Canvas Text - An animated text component with colorful curved lines rendered on canvas, clipped to the text shape.
var(--color-blue-500) for colors| Prop | Type | Default | Description |
|---|---|---|---|
text | string | - | The text to display with animated background |
colors | string[] | - | Array of colors for animated lines |
animationDuration | number | 5 | Duration in seconds for one animation cycle |
lineGap | number | 10 | Vertical gap between lines in pixels |
curveIntensity | number | 60 | Intensity of the bezier curve animation |
overlay | boolean | false | Position absolutely for overlay use cases |
Perfect for hero sections, landing pages, or anywhere you want eye-catching animated text effects.
Added a new Features Section With Skeletons block to the feature sections collection.
A three-column features grid with animated skeleton illustrations for each feature. Includes a real-time messaging chat interface, secure file transfer with folder animations, and team collaboration with interactive cursor selections. Full dark mode support.
Introducing a new Illustrations category with four animated blocks for feature sections and landing pages.
Each illustration triggers on scroll using Motion's useInView hook. Full dark mode support included.
Added a new Testimonials With Carousel block to the testimonials collection.
This block shows three testimonials at a time with smooth animated transitions between pages. It includes previous and next controls, staggered entrance animation for cards, and wrap-around pagination for continuous browsing.
Each card includes quote text, avatar, name, and designation with responsive layout and dark mode support.
Added a new Hero Section with Mesh Gradient to the hero sections collection.
A modern hero section featuring a vibrant mesh gradient background created using multiple overlapping radial gradients positioned at different points. The colors blend smoothly to create a dynamic appearance without any hard edges, with CSS blend modes helping create seamless transitions where colors overlap.
Content is centered using flexbox, with large typography for the headline and lighter weight description text styled in contrasting colors for readability against the colorful background. Includes call-to-action buttons for quick user engagement.
Perfect for SaaS landing pages, creative agency sites, modern app launches, and any project that needs a bold, contemporary first impression.
Added a new Hero Section with Tabs to the hero sections collection.
A modern hero section featuring an interactive tabbed browser window preview. Tabs auto-rotate through different content sections with smooth fade and blur animations, showcasing multiple features or pages in a single component.
The hero includes a bold headline, descriptive subtext, dual CTA buttons, and a social proof section with avatars and star ratings. The browser window features macOS-style traffic light buttons and a scrollable tab bar with dividers. Content images animate in with opacity, translation, and blur effects using Framer Motion.
Perfect for SaaS landing pages, portfolio showcases, feature demonstrations, template galleries, and any product that benefits from showing multiple views in an engaging, interactive format.
Added a new Hero Section with Flickering Lights to the hero sections collection.
A cinematic hero section featuring animated light bulbs arranged on a steel grid that flicker to life in a dramatic staggered sequence. Each bulb transitions through off, flickering, and on states with realistic timing, while random bulbs occasionally fuse with spark particle effects before reigniting.
The component includes a bold headline, description text, and CTA buttons that brighten in sync with the grid illumination. Features a 3D-rotated steel grid with perspective transforms for added depth.
Perfect for industrial product launches, creative agency sites, entertainment platforms, and gaming landing pages.
You can now view components, blocks, and templates in full screen mode. Click the maximize icon in the preview toolbar to open a distraction-free view in a new tab.
New component drop: Keyboard - A beautiful Mac-style keyboard with mechanical key sound effects and keystroke preview.
| Prop | Type | Default | Description |
|---|---|---|---|
enableSound | boolean | false | Enable mechanical keyboard sound effects |
showPreview | boolean | false | Show keystroke preview animation above keyboard |
Perfect for landing pages, developer portfolios, or anywhere you want to showcase keyboard interactions.
New component drop: Testimonials Background With Drag.
A super simple panning motion effect for testimonials. Showcases thousands (assumption, infact there are just 15 but repeated), yet focuses on one with panning movements.
Added 3 new Hero Sections to the hero sections collection.
These new hero components feature modern designs with stunning visual effects, perfect for creating impactful landing pages and capturing your visitors' attention right from the start.
The latest addition includes an Infinite Scroll Canvas hero section with an interactive draggable canvas featuring scattered image cards, momentum-based scrolling, and a clean center content area - perfect for showcasing portfolios, galleries, or product showcases.
Added a new Shaders collection - a set of reusable shaders for your backgrounds.
Perfect for adding depth and visual interest to your hero sections, landing pages, and backgrounds.
Added a new Webcam Pixel Grid component - a real-time webcam pixel grid effect, perfect for pixel art and retro aesthetics.
Added a new Bento Grid with Skeletons to the bento grids collection.
Added a new Pricing Page with Featured and Enterprise component to the pricing sections collection.
This pricing page is designed to showcase multiple pricing tiers with a focus on highlighting the featured plan. Includes:
Perfect for SaaS products, platforms, and services that need a comprehensive pricing presentation with emphasis on featured offerings.
Added the new Agenforce Marketing Template. A marketing template designed for various use cases, including AI Agents, Agency, Chatbots and SaaS. Includes delightful micro-interactions and animations.
Agenforce focuses on delivering a modern, minimal and clean design that is tastefully filled with microinteractions to keep your users engaged.
Loved building this template, took a lot of time to design and develop, micro-interactions and animations are my favourite part of the template.
Perfect for AI agent companies, agencies, chatbot services, and SaaS products looking for a professional and engaging web presence.
Added a new Features Grid with Large Skeletons component to the feature sections collection.
This component showcases a modern 3-column grid layout with interactive skeleton cards that feature:
Perfect for showcasing product features, service capabilities, or workflow processes with an engaging and modern interface that emphasizes visual hierarchy and user interaction.
The component includes three distinct skeleton variations:
Built with Tabler Icons and full TypeScript support for seamless integration into any React application.
Added a new logo cloud component collection with beautiful micro interactions and animations.
These components are perfect for showcasing client logos, partners, or trusted brands with smooth animations and modern design patterns.
Added a new hero section component with parallax images with perspective.
Simple and monochromatic, multipurpose and useful for a lot of use cases.
Added a new hero section component with image and scales.
Useful for a modern hero sections with images that require micro interactions.
Added a new masonry bento grid with images block into the Bento Grids components and registry
Useful for showcasing brands or products.
Added 4 new navbar blocks into the Navbars components and registry
Simple and effective, covers majority of the use cases.
Added a login form component with gradient using WebGL and Motion for React. Perfect for login pages that want to add some flare to the page without actually having to compromise on the form elements.
Today we bring you a page where you can see all the changes and updates to Aceternity UI Pro.
I'll try my best to keep it up to date with the latest changes and updates.
Aceternity UI and Aceternity UI Pro now support ShadCN CLI 3.0.
Which means you can now use ShadCN CLI 3.0 to add components to your project.
npx shadcn@latest add @aceternity-pro [component]
Example:
npx shadcn@latest add @aceternity-pro/bento-grid-example-three
Visit the complete documentation here
If you want to use PRO components with the CLI, generate an API KEY in the dashboard and use it with the cli.
Added the new Nodus Marketing Template. Filled with amazing micro-interactions and animations.
Nodus focuses on bringing out the best part of your product in a minimal and concise manner.
Some of the key features are:
Added the new minimal portfolio template and bento grids components.
Now you can view any component in full screen mode. Click on the full screen button in the component preview to view it in full screen mode.
Improved website speed and User Experience. It is now faster and easier to use.
Added the first public release with core components and templates. Including 30+ blocks and 7+ templates
Access an ever-growing collection of premium, meticulously crafted templates and Component Blocks.
© 2026 Aceternity Labs LLC. All Rights Reserved.