Components
A responsive Bento grid styled like a holographic blueprint. Features glowing cyan corner brackets, flickering hover effects, and a technical grid background. Ideal for sci-fi dashboards, system schematics, or futuristic UI layouts. Fully responsive and built with pure CSS and React.
npx @21st-dev/cli add dhileepkumargm/blueprint-bento-gridLoading preview...
import BentoItem from "@/components/ui/blueprint-bento-grid";
export default function DemoOne() {
return (
<div className="blueprint-container blueprint-theme-scope">
<div className="w-full max-w-6xl z-10">
<h1 className="blueprint-title text-5xl font-bold text-center mb-10">SYSTEM SCHEMATICS</h1>
<div className="bento-grid">
<BentoItem className="col-span-3 row-span-2">
<h2 className="text-3xl font-bold mb-2">[ CORE PROCESSOR ]</h2>
<p>Status: Nominal</p>
<p>Temperature: 34°C</p>
<p>Load: 15%</p>
</BentoItem>
<BentoItem className="col-span-2">
<h2 className="text-2xl font-bold mb-2">[ ENERGY LEVELS ]</h2>
<p>Main Core: 98%</p>
<p>Auxiliary: 100%</p>
</BentoItem>
<BentoItem className="col-span-2">
<h2 className="text-2xl font-bold mb-2">[ NETWORK NODES ]</h2>
<p>Active Connections: 1,284</p>
<p>Data Rate: 40 Gb/s</p>
</BentoItem>
<BentoItem className="col-span-5 full-span-tablet">
<h2 className="text-2xl font-bold mb-2">[ DIAGNOSTICS LOG ]</h2>
<p>{'>'} All systems responding.</p>
<p>{'>'} Quantum entanglement stable.</p>
<p>{'>'} No anomalies detected.</p>
</BentoItem>
</div>
</div>
</div>
);
}