# Feature Bento

> Asymmetric bento grid for showcasing product features.

- Author: Atelier UI
- License: MIT
- Page: https://chromotion.dev/en/components/feature-bento
- Site: Atelier UI (https://chromotion.dev)

## Install

```bash
npx shadcn@latest add https://chromotion.dev/r/feature-bento.json
```

Stack: React + TypeScript + Tailwind CSS v4, shadcn/ui conventions. `cn` comes from `@/lib/utils`.

## Dependencies

```bash
npm install lucide-react
```

## Usage

```tsx title="components/feature-bento-demo.tsx"
import { Gauge, Globe, Lock, Users, Zap } from "lucide-react"

import { FeatureBento } from "@/components/feature-bento"

export default function FeatureBentoDemo() {
  return (
    <FeatureBento
      eyebrow="Features"
      title="Everything you need to ship"
      description="One platform for building, deploying and scaling modern web apps."
      features={[
        {
          icon: Zap,
          title: "Instant deploys",
          description: "Push to git and your changes are live worldwide in seconds.",
          visual: (
            <div className="flex h-32 items-end gap-1.5 px-6 pb-4">
              {[40, 65, 45, 80, 60, 95, 70, 100].map((h, i) => (
                <div key={i} className="flex-1 rounded-t bg-foreground/15" style={{ height: `${h}%` }} />
              ))}
            </div>
          ),
        },
        { icon: Lock, title: "Secure by default", description: "Automatic HTTPS, DDoS protection and SSO." },
        { icon: Globe, title: "Edge network", description: "Served from 100+ regions close to your users." },
        {
          icon: Users,
          title: "Built for teams",
          description: "Preview every pull request and collect feedback in context.",
        },
        { icon: Gauge, title: "Observability", description: "Real-time logs, traces and Web Vitals in one place." },
      ]}
    />
  )
}
```

## Source

```tsx title="components/feature-bento.tsx"
import * as React from "react"
import type { LucideIcon } from "lucide-react"

import { cn } from "@/lib/utils"

export type BentoFeature = {
  icon: LucideIcon
  title: string
  description: string
  /** Optional visual rendered at the top of the card */
  visual?: React.ReactNode
}

export interface FeatureBentoProps extends Omit<React.ComponentProps<"section">, "title"> {
  eyebrow?: string
  title?: React.ReactNode
  description?: React.ReactNode
  /** Five features fill the grid; the 1st and 4th get the wide slots */
  features: BentoFeature[]
}

const spans = ["md:col-span-2", "md:col-span-1", "md:col-span-1", "md:col-span-2", "md:col-span-3"]

export function FeatureBento({
  eyebrow,
  title,
  description,
  features,
  className,
  ...props
}: FeatureBentoProps) {
  return (
    <section className={cn("bg-background px-6 py-16 text-foreground", className)} {...props}>
      <div className="mx-auto max-w-5xl">
        {(eyebrow || title || description) && (
          <div className="mb-10 max-w-2xl">
            {eyebrow && <p className="mb-2 text-sm font-medium text-muted-foreground">{eyebrow}</p>}
            {title && <h2 className="text-3xl font-semibold tracking-tight text-balance">{title}</h2>}
            {description && <p className="mt-3 text-muted-foreground text-pretty">{description}</p>}
          </div>
        )}
        <div className="grid gap-4 md:grid-cols-3">
          {features.map(({ icon: Icon, title, description, visual }, i) => (
            <article
              key={title}
              className={cn(
                "group relative flex flex-col overflow-hidden rounded-2xl border bg-card p-6 text-card-foreground",
                "transition-[box-shadow,transform] duration-200 hover:-translate-y-0.5 hover:shadow-lg",
                spans[i % spans.length]
              )}
            >
              {visual && <div className="-mx-6 -mt-6 mb-6 border-b bg-muted/40">{visual}</div>}
              <div className="mb-4 inline-flex size-10 items-center justify-center rounded-xl border bg-background">
                <Icon className="size-5" />
              </div>
              <h3 className="font-medium">{title}</h3>
              <p className="mt-1.5 text-sm text-muted-foreground">{description}</p>
            </article>
          ))}
        </div>
      </div>
    </section>
  )
}
```