UI ComponentsMarketing
Features
Feature showcase section with grid of feature cards
Feature showcase section displaying product features or benefits in a grid layout.
Structure
Grid Layout (default)
┌─────────────────────────────────────────────────────┐
│ root │
│ ┌─────────────────────────────────────────────────┐ │
│ │ header │ │
│ │ ┌─────────────────────────────────────────────┐ │ │
│ │ │ title │ │ │
│ │ │ subtitle │ │ │
│ │ └─────────────────────────────────────────────┘ │ │
│ └─────────────────────────────────────────────────┘ │
│ ┌─────────────────────────────────────────────────┐ │
│ │ grid │ │
│ │ ┌───────────┐ ┌───────────┐ ┌───────────┐ │ │
│ │ │ feature │ │ feature │ │ feature │ │ │
│ │ │ 🚀 │ │ ⚡ │ │ 🔒 │ │ │
│ │ │ title │ │ title │ │ title │ │ │
│ │ │ desc │ │ desc │ │ desc │ │ │
│ │ └───────────┘ └───────────┘ └───────────┘ │ │
│ │ ┌───────────┐ ┌───────────┐ ┌───────────┐ │ │
│ │ │ feature │ │ feature │ │ feature │ │ │
│ │ │ 📊 │ │ 🎨 │ │ 🔧 │ │ │
│ │ │ title │ │ title │ │ title │ │ │
│ │ │ desc │ │ desc │ │ desc │ │ │
│ │ └───────────┘ └───────────┘ └───────────┘ │ │
│ └─────────────────────────────────────────────────┘ │
└─────────────────────────────────────────────────────┘Alternating Layout
┌─────────────────────────────────────────────────────┐
│ ┌─────────────────────┐ ┌─────────────────────────┐ │
│ │ content │ │ image │ │
│ │ title │ │ │ │
│ │ description │ │ │ │
│ └─────────────────────┘ └─────────────────────────┘ │
│ ┌─────────────────────────┐ ┌─────────────────────┐ │
│ │ image │ │ content │ │
│ │ │ │ title │ │
│ │ │ │ description │ │
│ └─────────────────────────┘ └─────────────────────┘ │
└─────────────────────────────────────────────────────┘Usage
<Features
title="Why choose us"
subtitle="Everything you need to build modern apps"
items={[
{
icon: 'zap',
title: 'Lightning Fast',
description: 'Optimized for performance with sub-second load times',
},
{
icon: 'shield',
title: 'Secure by Default',
description: 'Enterprise-grade security with SOC2 compliance',
},
{
icon: 'globe',
title: 'Global Scale',
description: 'Deploy to 300+ edge locations worldwide',
},
{
icon: 'code',
title: 'Developer First',
description: 'Built by developers, for developers',
},
{
icon: 'puzzle',
title: 'Extensible',
description: 'Integrate with your favorite tools',
},
{
icon: 'heart',
title: 'Great Support',
description: '24/7 support from our expert team',
},
]}
columns={3}
layout="grid"
/>