Components
A retro-themed Bento grid styled like a classic CRT terminal. Features scanline overlays, blinking cursors, and green phosphor glow. Ideal for dashboards, status panels, or nostalgic UI layouts. Fully responsive and hover-animated using pure CSS.
npx shadcn@latest add https://21st.dev/r/dhileepkumargm/terminal-bento-gridLoading preview...
import BentoItem from "@/components/ui/terminal-bento-grid";
export default function DemoOne() {
return (
<div className="terminal-container terminal-theme-scope">
<div className="w-full max-w-5xl z-10">
<h1 className="text-5xl text-center mb-10 blinking-cursor">SYSTEM DASHBOARD</h1>
<div className="bento-grid">
<BentoItem className="col-span-2">
<h2 className="text-3xl mb-2">{'>'} REPOSITORY: MAIN_BRANCH</h2>
<p className="text-xl">Status: Synced. Last commit: 4 hours ago.</p>
</BentoItem>
<BentoItem>
<h2 className="text-3xl mb-2">{'>'} API STATUS</h2>
<p className="text-xl">All systems operational.</p>
</BentoItem>
<BentoItem>
<h2 className="text-3xl mb-2">{'>'} DOCKER</h2>
<p className="text-xl">3 containers running.</p>
</BentoItem>
<BentoItem className="col-span-2">
<h2 className="text-3xl mb-2">{'>'} CI/CD PIPELINE</h2>
<p className="text-xl">Last build successful. Ready to deploy.</p>
</BentoItem>
<BentoItem className="col-span-3">
<h2 className="text-3xl mb-2">{'>'} REAL-TIME LOGS</h2>
<p className="text-xl">200 GET /api/users - 5ms</p>
<p className="text-xl">200 GET /api/dashboard - 12ms</p>
<p className="text-xl">404 GET /api/data - 2ms</p>
</BentoItem>
</div>
</div>
</div>
);
};