TerminalBentoGrid

Dashboards 89

About

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.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds TerminalBentoGrid to your project and fits it to your theme.

Code

How TerminalBentoGrid is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

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>
    );
};