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.