jolyui
uibento-gridsource: ok · hit
Bento Grid
npx shadcn add "https://www.jolyui.dev/r/bento-grid.json"free
Where it goes
bento-grid
Visual style
bento
Tags auto-generated by rules on 9/24/2026 — empty means no evidence, not lack of support.
Files1 · source cached 10/15/2026, 12:50:16 AM
ui/bento-grid.tsx
import * as React from "react";
import { cn } from "@/lib/utils";
interface BentoGridProps extends React.HTMLAttributes<HTMLDivElement> {
children: React.ReactNode;
}
const BentoGrid = React.forwardRef<HTMLDivElement, BentoGridProps>(
({ className, children, ...props }, ref) => {
return (
<div
ref={ref}
className={cn(
"grid auto-rows-[minmax(180px,1fr)] grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3",
className,
)}
{...props}
>
{children}
</div>
);
},
);
BentoGrid.displayName = "BentoGrid";
export { BentoGrid };