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.