Components
Loading preview...
A responsive Bento grid styled with a minimalist Brutalist aesthetic. Featuring concrete tones, hard shadows, and inward-pressing hover effects, this component evokes architectural clarity and digital weight. Ideal for system layouts, modular dashboards, or raw UI compositions.
@dhiluxui
npx shadcn@latest add https://21st.dev/r/dhileepkumargm/brutalist-bento-gridimport BentoItem from "@/components/ui/brutalist-bento-grid";
export default function DemoOne() {
return (
<div className="brutalist-container brutalist-scope">
<div className="w-full max-w-6xl z-10 flex flex-col items-center">
<h1 className="brutalist-title text-4xl sm:text-5xl text-center mb-12">Foundation Blocks</h1>
<div className="bento-grid">
<BentoItem className="item-1">
<h2>Core Module</h2>
<p>The central processing unit. All logic originates here.</p>
</BentoItem>
<BentoItem className="item-2">
<h2>Primary Structure</h2>
<p>Load-bearing framework and architectural integrity.</p>
</BentoItem>
<BentoItem className="item-3">
<h2>Input</h2>
<p>Data ingress.</p>
</BentoItem>
<BentoItem className="item-4">
<h2>Output</h2>
<p>Data egress.</p>
</BentoItem>
<BentoItem className="item-5">
<h2>Sub-System Support</h2>
<p>Auxiliary services and operational support infrastructure.</p>
</BentoItem>
</div>
</div>
</div>
);
};