Changelog

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.

Features

• Realistic Mac keyboard layout - Complete with function keys, modifiers, and arrow keys
• Mechanical key sounds - Cherry MX Black sound effects using audio sprites
• Keystroke preview - Animated display showing the current key being pressed
• Responsive design - Scales from 0.8x on mobile to 2x on xl screens
• Visibility-aware - Event listeners only active when keyboard is in viewport
• Fully interactive - Click keys or use your physical keyboard

Props

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:

• Featured Plan Highlight: Immersive shadow effect to make the featured plan stand out
• Four Tier Structure: Starter, Pro, Business, and Enterprise plans
• Enterprise Section: Dedicated enterprise tier with custom contact option
• Flexible Pricing Display: Shows both actual and discounted prices with percentage savings
• Feature Lists: Detailed feature breakdown for each plan with checkmark icons
• Responsive Design: Adapts seamlessly from mobile to desktop layouts

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:

• 3D Perspective Design: Each skeleton card uses CSS transforms with rotateX, rotateY, and rotateZ for depth and visual appeal
• Interactive Micro-animations: Hover effects and smooth transitions on skeleton elements
• Responsive Layout: Flexbox alignment that adapts from column layout on mobile to row layout on desktop
• Rich Content Structure: Each card includes titles, descriptions, status badges, and categorization tags
• Visual Status Indicators: Color-coded badges (success, warning, danger) with animated icons
• Dotted Glow Background: Integration with the dotted-glow-background component for enhanced visual effects

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:

1. Stacked Cards Skeleton - Multiple overlapping cards with different z-indices
2. Process Timeline Skeleton - Step-by-step workflow visualization with progress indicators
3. Security Shield Skeleton - Centered shield icon with animated dotted background

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.

• Logo Cloud With Blur Animation - Staggered blur-to-focus animation for logo reveals

Added a new hero section component with parallax images with perspective.

Simple and monochromatic, multipurpose and useful for a lot of use cases.

• Minimal Hero Section With Parallax Images

Added a new hero section component with image and scales.

• Hero 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

• Masonry Bento Grid With Images

Useful for showcasing brands or products.

Added 4 new navbar blocks into the Navbars components and registry

• Navbar Classic
• Navbar Mega
• Navbar Pill
• Navbar Underline

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]
Copy

Example:

npx shadcn@latest add @aceternity-pro/bento-grid-example-three
Copy

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:

• Multi page - Landing, About, Features, Pricing, Careers and Blogs.
• Dark mode support
• Responsive design and follows best practices for SEO.
• Easy to customize and deploy.
• Built with Next.js, Tailwind CSS and Framer Motion.
• Typescript support.
• Easy to deploy and customize.
• Help and support.

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