sections

FeatureGrid

Responsive grid of feature cards with staggered entrance animations.

v1.0.0react >=18next >=14tailwind >=4motion >=12

featuresgridcardsstaggersectionbenefits

Preview

Loading preview...

Props

Prop	Type	Default	Description
`children*`	`ReactNode`	`—`	Feature card elements to render in the grid
`columns`	`number`	`3`	Number of columns on desktop
`stagger`	`StaggerName \| number`	`normal`	Stagger delay between children. Accepts a token name or milliseconds.
`gap`	`string`	`gap-6`	Tailwind gap class applied to the grid
`className`	`string`	`—`	Additional Tailwind classes for the outer section
`id`	`string`	`—`	HTML id attribute

Slots

Slot	Type	Required	Description
`children`	`ReactNode`	Yes	Feature card elements. Each child is auto-wrapped in FadeUp with stagger delay.

Layout

Display: grid

Responsive: Yes

Responsive grid. 1 col on mobile, 2 on tablet, columns prop on desktop.

Examples

Basic 3-column grid

<FeatureGrid>
  <div className="rounded-xl bg-neutral-900 p-6">Feature 1</div>
  <div className="rounded-xl bg-neutral-900 p-6">Feature 2</div>
  <div className="rounded-xl bg-neutral-900 p-6">Feature 3</div>
</FeatureGrid>

2-column with custom stagger

<FeatureGrid columns={2} stagger="slow" gap="gap-8">
  <GlowCard>Analytics Dashboard</GlowCard>
  <GlowCard>Real-time Monitoring</GlowCard>
  <GlowCard>Custom Reports</GlowCard>
  <GlowCard>API Access</GlowCard>
</FeatureGrid>

4-column icon grid

<FeatureGrid columns={4} stagger={50}>
  {features.map((f) => (
    <div key={f.id} className="text-center">
      {f.icon}
      <h3>{f.title}</h3>
    </div>
  ))}
</FeatureGrid>

AI Usage Hint

Use FeatureGrid for displaying feature cards, benefits, or service offerings in a responsive grid. Pass cards as children — each is auto-wrapped in FadeUp with stagger delay. Use columns prop (2/3/4) to control layout.

Works Well With

FadeUpGlowCardTiltCardStaggerGroup