Library

Feature Grid

Feature Grid

Responsive grid of feature cards with icons, staggered entrance animations on scroll. Configurable 2, 3, or 4 column layout with hover effects.

featuresgridiconsstagger

Installation

bash
# Copy feature-grid.tsx to your project
cp components/ui/feature-grid.tsx your-project/components/ui/feature-grid.tsx

How to use

tsx
import { FeatureGrid } from "@/components/ui/feature-grid";
tsx
<FeatureGrid
  heading="Features"
  features={[
    { icon: <Zap size={20} />, title: "Fast", description: "Built for speed" },
    { icon: <Shield size={20} />, title: "Secure", description: "Enterprise-grade" },
  ]}
  columns={3}
/>

Dependencies

framer-motion

Exports

FeatureGrid

File

components/ui/feature-grid.tsx
Preview

Everything you need to ship faster

A complete toolkit for modern development teams

Lightning Fast

Optimized for speed with edge deployment and smart caching.

Enterprise Security

SOC2 compliant with end-to-end encryption and role-based access.

Scalable Storage

Auto-scaling database with global replication and backup.

Auth Built In

Social login, MFA, and SSO out of the box.

AI Powered

Built-in AI features for smart suggestions and automation.

Customizable

Fully themeable with your brand colors and custom components.

Made with