Bento Grid
Responsive bento-style grid layout with feature cards. Install Bento Grid from the VLLNT UI registry with the shadcn CLI.
Responsive bento-style grid layout with feature cards. Part of the content family in VLLNT UI, it ships as a machine-readable registry entry — copy the source directly into your app with the shadcn CLI and own it, no runtime dependency on a component library.
Preview
Switch between light and dark to inspect the embedded Storybook preview.
Installation
Add Bento Grid to your project with the shadcn CLI. The source lands in your codebase, ready to adapt:
pnpm dlx shadcn@latest add https://ui.vllnt.ai/r/bento-grid.jsonSource
import * as React from "react";
import { cn } from "../../lib/utils";
/** Props for {@link BentoGrid}. */
export type BentoGridProps = React.ComponentPropsWithoutRef<"div">;
/** Props for {@link BentoCard}. */
export type BentoCardProps = React.ComponentPropsWithoutRef<"div">;
/**
* Responsive masonry-style grid that lays out {@link BentoCard} tiles.
*
* @example
* ```tsx
* <BentoGrid>
* <BentoCard className="col-span-2">Featured</BentoCard>
* <BentoCard>Detail</BentoCard>
* </BentoGrid>
* ```
*/
export const BentoGrid = ({
children,
className,
ref,
...props
}: BentoGridProps & { ref?: React.Ref<HTMLDivElement> }) => {
return (
<div
className={cn(
"grid w-full auto-rows-[14rem] grid-cols-3 gap-4",
className,
)}
ref={ref}
{...props}
>
{children}
</div>
);
};
BentoGrid.displayName = "BentoGrid";
/**
* Single tile inside a {@link BentoGrid} with a hover shadow lift.
*
* @example
* ```tsx
* <BentoCard className="col-span-2 row-span-2">Highlight</BentoCard>
* ```
*/
export const BentoCard = ({
children,
className,
ref,
...props
}: BentoCardProps & { ref?: React.Ref<HTMLDivElement> }) => {
return (
<div
className={cn(
"group relative flex flex-col justify-between overflow-hidden rounded-xl border bg-card p-6 text-card-foreground shadow-sm transition-shadow hover:shadow-md",
className,
)}
ref={ref}
{...props}
>
{children}
</div>
);
};
BentoCard.displayName = "BentoCard";
Stories
Explore every variant and state in the interactive Storybook:
Preview
Switch between light and dark to inspect the embedded Storybook preview.