Bento Grid

The BentoGrid provides a trendy, asymmetric layout inspired by bento boxes. It is perfect for showcasing features, portfolio items, or services in a visually engaging way.

Usage

import BentoGrid from '~/components/sections/BentoGrid.astro';
import BentoItem from '~/components/ui/BentoItem.astro';
import { Globe, Cpu } from 'lucide-react';

<BentoGrid title="My Features" description="Check out these cool things.">
  
  <BentoItem class="md:col-span-2">
    <Globe />
    <h3>Global Reach</h3>
  </BentoItem>

  <BentoItem class="md:row-span-2">
    <Cpu />
    <h3>High Performance</h3>
  </BentoItem>

</BentoGrid>

Example

Community & Learning

Join thousands of developers building the future.

Vibrant Community

Connect with over 10,000 developers on Discord. Share tips, get help, and collaborate.

Open Source

Free to contribute.

Rich Docs

Video Tutorials

Weekly Showcase

See the best projects built with our template.

Props

BentoGrid

BentoItem