8bit Card

Cards 2

About

An 8-bit styled card component with pixel-border decoration, supporting header, title, description, content, footer, and action slots. Source-verbatim from the 8bitcn card primitive.

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

Code

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

Usage.tsx

import { Button } from "@/components/ui/8bit-button";
import {
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@/components/ui/8bit-card";
import { Input } from "@/components/ui/8bit-input";
import { Label } from "@/components/ui/8bit-label";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/8bit-select";

export default function Demo() {
  return (
    <div className="flex items-center justify-center min-h-screen p-8 retro">
      <Card className="max-w-lg">
        <CardHeader>
          <CardTitle>Create project</CardTitle>
          <CardDescription className="text-xs">
            Deploy your new project in one-click.
          </CardDescription>
        </CardHeader>
        <CardContent className="flex flex-col gap-4">
          <Label>Name</Label>
          <Input placeholder="Project name" className="max-w-72" />
          <Label>Framework</Label>
          <Select>
            <SelectTrigger>
              <SelectValue placeholder="Framework" />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="next">Next.js</SelectItem>
              <SelectItem value="svelte">SvelteKit</SelectItem>
              <SelectItem value="astro">Astro</SelectItem>
              <SelectItem value="nuxt">Nuxt.js</SelectItem>
            </SelectContent>
          </Select>
        </CardContent>
        <CardFooter className="flex justify-between">
          <Button variant="outline">Cancel</Button>
          <Button>Create</Button>
        </CardFooter>
      </Card>
    </div>
  );
}