8bit Save Slots

Cards

About

An 8-bit save/load game interface that lists save files with floppy-disk previews, timestamps, saved badges, and empty-slot placeholders. Built on the 8bitcn card, badge, button, and separator primitives.

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

Code

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

Usage.tsx

"use client";

import { SaveSlots } from "@/components/ui/8bit-save-slots";

export default function Default() {
  return (
    <div className="flex w-full min-h-screen items-center justify-center bg-background p-8 retro">
      <SaveSlots
        slots={[
          {
            id: "1",
            isEmpty: false,
            name: "Crystal Caves Adventure",
            timestamp: "2025-12-01T14:30:00",
            preview: "/images/save-preview-1.png",
            description: "Level 15 - Crystal Caves, 3 hearts",
          },
          {
            id: "2",
            isEmpty: false,
            name: "Dragon's Lair",
            timestamp: "2025-11-28T10:15:00",
            preview: "/images/save-preview-1.png",
            description: "Level 42 - Final Boss Area",
          },
          {
            id: "3",
            isEmpty: true,
          },
          {
            id: "4",
            isEmpty: false,
            name: "Tutorial Complete",
            timestamp: "2025-11-25T16:45:00",
            preview: "/images/save-preview-1.png",
            description: "Level 1 - Village Square",
          },
          {
            id: "5",
            isEmpty: true,
          },
        ]}
        layout="vertical"
        className="w-full max-w-[600px]"
      />
    </div>
  );
}