How do I install Features Section With Skeletons?

Run npx shadcn@latest add @aceternity/features-section-with-skeletons in your terminal. Before installing, add the Aceternity Pro registry to your components.json and set your API token as the ACETERNITY_PRO_TOKEN environment variable. The CLI automatically installs all required dependencies including Tailwind CSS plugins and Framer Motion.

Is Features Section With Skeletons responsive and accessible?

Yes. The component is fully responsive across mobile, tablet, and desktop breakpoints. It uses semantic HTML elements, proper heading hierarchy, and accessible color contrast ratios. Touch targets are appropriately sized for mobile interactions, and all interactive elements are keyboard-navigable.

Can I customize the colors, fonts, and layout?

Everything is built with Tailwind CSS utility classes and Framer Motion animations. You can change colors, spacing, typography, border radius, shadows, and animation timing directly in the JSX — no separate CSS files to manage. The component uses your project's Tailwind theme, so it automatically adapts to your design system.

What frameworks does this work with?

Features Section With Skeletons is built for React and Next.js (App Router and Pages Router). It requires Tailwind CSS v4 and Framer Motion. It works with any React-based framework including Remix, Gatsby, and Vite — just ensure Tailwind CSS and Framer Motion are configured in your project.

Features Section With Skeletons

Hey! Are you free for a quick call?

Sure, give me 5 minutes!

Sounds good 👍

I'm not sure if I can make it.

Real time messaging

Send and receive messages in real time with voice and text.

Secure file sharing

Share files securely with end-to-end encryption.

Sarah

Tyler

Team collaboration

Collaborate with your team in shared workspaces.

This features section uses skeleton animations to show what each feature actually does. Instead of static icons or images, each card has a live preview that animates when the section comes into view.

The three cards cover messaging, file sharing, and team collaboration. The messaging card shows a chat conversation appearing message by message. The file transfer card animates a progress bar. The team collaboration card shows avatars and activity happening in real time.

Each skeleton triggers when the card scrolls into view using the useInView hook from Motion. This keeps the animations fresh every time someone scrolls down to the section.

Works well for SaaS landing pages, product tours, or anywhere you want to show features instead of just describing them.

Explore more

Features Bento Grid With Skeletons Features Section With Card Gradient Features Grid With Large Skeletons Hero Sections

Part of Feature Sections · All blocks

Build websites faster and 10x better than your competitors with
Aceternity UI Pro

Next.js 15, Tailwind CSS v4 and Motion for react powered templates

100+ templates and blocks combined

Ready to copy paste component blocks, save days of development time

Get lifetime access