How do I install Features Section With Card Gradient?

Run npx shadcn@latest add @aceternity/features-section-demo-1 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 Card Gradient 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 Card Gradient 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.

Feature Sections

20 / 24

Features Section 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.

HIPAA and SOC2 Compliant

Our applications are HIPAA and SOC2 compliant, your data is safe with us, always.

Automated Social Media Posting

Schedule and automate your social media posts across multiple platforms to save time and maintain a consistent online presence.

Advanced Analytics

Gain insights into your social media performance with detailed analytics and reporting tools to measure engagement and ROI.

Content Calendar

Plan and organize your social media content with an intuitive calendar view, ensuring you never miss a post.

Audience Targeting

Reach the right audience with advanced targeting options, including demographics, interests, and behaviors.

Social Listening

Monitor social media conversations and trends to stay informed about what your audience is saying and respond in real-time.

Customizable Templates

Create stunning social media posts with our customizable templates, designed to fit your brand's unique style and voice.

Collaboration Tools

Work seamlessly with your team using our collaboration tools, allowing you to assign tasks, share drafts, and provide feedback in real-time.

Each card displays a title and description over a gradient background that transitions from neutral-100 to white in light mode and neutral-900 to neutral-950 in dark mode. The rounded-3xl border radius gives a soft appearance.

An SVG grid pattern sits behind the text content. The pattern uses randomly positioned squares to highlight certain cells, and the entire pattern fades with a mask-image linear gradient from top to bottom. The grid cell size is configurable via props.

The layout uses CSS Grid with responsive columns: one on mobile, two on small screens, three on medium, and four on large screens. The gap between cards adjusts based on breakpoint.

Works well for listing product capabilities, service offerings, compliance features, or any information that benefits from scannable card layouts.

More from Feature Sections

Included with All-Access

One payment unlocks the code for this block and every other block, template and page.

Get All-Access

Explore more

Features Section With Hover Effects Features Bento Grid With Skeletons Three Columns With Images Feature Sections Bento Grids

About this block

The layout uses CSS Grid with responsive columns: one on mobile, two on small screens, three on medium, and four on large screens. The gap between cards adjusts based on breakpoint.

Works well for listing product capabilities, service offerings, compliance features, or any information that benefits from scannable card layouts.