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.
"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>
);
}
Part of 8bitcn — browse the full library on 21st.dev.