Skip to content

Soft gradient features

Four-card bento grid with gradient illustrations.

Usage

Usage
import { BentoGrid06 } from '@/components/blocks/bento-grid-06'


<BentoGrid06 />


// Replace the cards. The second and third cards span two columns on desktop.
<BentoGrid06
  heading="Everything your files need"
  features={[
    { title: 'Every version, kept', description: 'Hourly snapshots for a year.', art: 'panes', tone: 'blue' },
    { title: 'Sync that just flows', description: 'Edits land everywhere in seconds.', art: 'ribbon', tone: 'grey' },
    { title: 'Private by design', description: 'Encrypted on your device.', art: 'lock', tone: 'sky' },
    { title: 'Space that stretches', description: 'Dial storage up or down.', art: 'dial', tone: 'azure' },
  ]}
/>

Install

pnpm dlx shadcn@latest add @pastaui-pro/bento-grid-06

Source

Props

Soft gradient features props
PropTypeDefaultDescription
headingstring= —Optional section heading above the grid. Without it the section is labelled Features for screen readers.
features{ title: string; description: string; art: 'panes' | 'ribbon' | 'lock' | 'dial'; tone: 'blue' | 'grey' | 'sky' | 'azure' }[]= [{ title: 'Every version, kept', art: 'panes', … }, …]The cards, in order. art picks the illustration and tone picks the card tint. Cards two and three of every four span two columns on desktop.
classNamestring= —Extra classes for the outer section.
styleCSSProperties= —Override the --pp-* theme variables inline, such as --pp-tint-blue.