Components
Loading preview...
Pixel-art slide-out sheet from 8bitcn.com — retro pixel border on overlay panel. Wraps Radix Dialog (inlined via esbuild).
npx shadcn@latest add https://21st.dev/r/theorcdev/8bit-sheet"use client";
import {
Sheet, SheetTrigger, SheetContent, SheetHeader, SheetTitle, SheetDescription, SheetFooter,
Button, Input, Label,
} from "@/components/ui/8bit-sheet";
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">
<Sheet>
<SheetTrigger asChild>
<Button>Open Inventory</Button>
</SheetTrigger>
<SheetContent className="px-6 !right-4 !top-4 !bottom-4 !h-auto">
<SheetHeader className="px-0">
<SheetTitle>Inventory</SheetTitle>
<SheetDescription>Rename your hero.</SheetDescription>
</SheetHeader>
<div className="grid gap-4 py-4">
<div className="grid gap-2">
<Label htmlFor="hero">Hero Name</Label>
<Input id="hero" defaultValue="Player One" />
</div>
</div>
<SheetFooter className="px-0 pr-3">
<Button>Save</Button>
</SheetFooter>
</SheetContent>
</Sheet>
</div>
);
}