Components
Loading preview...
Pixel-art drawer from 8bitcn.com — retro pixel border on bottom-sheet panel. Wraps Vaul Drawer (inlined via esbuild).
npx shadcn@latest add https://21st.dev/r/OrcDev/8bit-drawer"use client";
import {
Drawer, DrawerTrigger, DrawerContent, DrawerHeader, DrawerTitle,
DrawerDescription, DrawerFooter, DrawerClose, Button,
} from "@/components/ui/8bit-drawer";
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">
<Drawer>
<DrawerTrigger asChild>
<Button>Open Inventory</Button>
</DrawerTrigger>
<DrawerContent>
<div className="mx-auto w-full max-w-sm">
<DrawerHeader>
<DrawerTitle>Inventory</DrawerTitle>
<DrawerDescription>Manage your hero loadout.</DrawerDescription>
</DrawerHeader>
<div className="px-4 pb-2 text-[10px] uppercase tracking-widest text-muted-foreground">
3 items / 20 slots
</div>
<DrawerFooter>
<Button>Save</Button>
<DrawerClose asChild>
<Button variant="outline">Close</Button>
</DrawerClose>
</DrawerFooter>
</div>
</DrawerContent>
</Drawer>
</div>
);
}