Skip to main content

Installation

    Examples

    Usage

    showLineNumbers
    import { BentoCard, BentoGrid } from "@/components/ui/bento-grid"
    
    showLineNumbers
    <BentoGrid>
      <BentoCard
        name="Feature 1"
        className="col-span-3 lg:col-span-1"
        background={<div>Background Content</div>}
        Icon={IconComponent}
        description="Description of the feature"
        href="/feature-1"
        cta="Learn more"
      />
    </BentoGrid>
    

    Props

    BentoGrid

    PropTypeDefaultDescription
    childrenReact.ReactNode-The BentoCard components to display
    classNamestring-Additional CSS classes

    BentoCard

    PropTypeDefaultDescription
    namestring-The name/title of the card
    classNamestring-Additional CSS classes
    backgroundReact.ReactNode-Background content or component
    IconReact.ElementType-Icon component to display
    descriptionstring-Description text for the card
    hrefstring-URL link for the call-to-action
    ctastring-Call-to-action button text

    Build docs developers (and LLMs) love