8-bit Table

Component 21

About

Pixel-art table from 8bitcn.com — bordered cells with retro 8-bit styling. Zero external deps.

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

Code

How 8-bit Table is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";
import { Table, TableHeader, TableBody, TableRow, TableHead, TableCell, Badge } from "@/components/ui/8bit-table";
export default function Default() {
  return (
    <div className="flex w-full min-h-screen items-center justify-center bg-background p-8 overflow-hidden font-pixel">
      <Table>
        <TableHeader>
          <TableRow>
            <TableHead>Item</TableHead>
            <TableHead>Qty</TableHead>
            <TableHead>Rarity</TableHead>
          </TableRow>
        </TableHeader>
        <TableBody>
          <TableRow>
            <TableCell>Potion</TableCell>
            <TableCell>3</TableCell>
            <TableCell><Badge variant="secondary">Common</Badge></TableCell>
          </TableRow>
          <TableRow>
            <TableCell>Elixir</TableCell>
            <TableCell>1</TableCell>
            <TableCell><Badge>Rare</Badge></TableCell>
          </TableRow>
          <TableRow>
            <TableCell>Phoenix Down</TableCell>
            <TableCell>2</TableCell>
            <TableCell><Badge variant="destructive">Epic</Badge></TableCell>
          </TableRow>
        </TableBody>
      </Table>
    </div>
  );
}