Bento Grid

A responsive grid layout for showcasing features in varied card sizes with optional tilt effects.

Loading...

Installation

npx shadcn@latest add @scrollxui/bento-grid 

Usage

import { BentoGrid, BentoGridItem } from '@/components/ui/bento-grid';
<BentoGrid>
  <BentoGridItem
    title='The Power of Collaboration'
    description='Enable real-time collaboration with your team.'
    containerClassName='md:col-span-2'
    header={<div className='h-full w-full rounded-xl bg-neutral-100 dark:bg-neutral-800' />}
    icon={<Users className='h-4 w-4 text-neutral-500' />}
  />
  <BentoGridItem
    title='Smart Automation'
    description='Automate repetitive tasks and focus on what matters.'
    containerClassName='md:col-span-1'
    header={<div className='h-full w-full rounded-xl bg-neutral-100 dark:bg-neutral-800' />}
    icon={<Zap className='h-4 w-4 text-neutral-500' />}
  />
</BentoGrid>

Examples


Disable Tilt

Loading...

API Reference

Bento Grid

A responsive grid layout for showcasing features in varied card sizes with optional tilt effects.

Props

PropertyTypeDefaultDescription
classNamestring—
Class name for the inner card div. On BentoGrid, applies to the grid container.
childrenReact.ReactNode—
BentoGridItem components. Used in: BentoGrid.
titlestring | React.ReactNode—
Title displayed inside the card. Used in: BentoGridItem.
descriptionstring | React.ReactNode—
Description text displayed below the title. Used in: BentoGridItem.
headerReact.ReactNode—
Content rendered at the top of the card, typically an image or skeleton. Used in: BentoGridItem.
iconReact.ReactNode—
Icon rendered above the title. Used in: BentoGridItem.
containerClassNamestring—
Class name for the outer grid cell. Use for col-span and row-span. Used in: BentoGridItem.
disableTiltbooleanfalse
Disables the 3D tilt effect. Used in: BentoGridItem.

Built withby Ahdeetai.