Components
Loading preview...
Pixel-art collapsible panel from 8bitcn.com — toggle to reveal/hide content with retro styling.
npx shadcn@latest add https://21st.dev/r/theorcdev/8bit-collapsible"use client";
import {
Collapsible,
CollapsibleContent,
CollapsibleTrigger,
} from "@/components/ui/8bit-collapsible";
export default function Default() {
return (
<div className="flex w-full min-h-screen items-center justify-center bg-background p-8 overflow-hidden">
<Collapsible className="w-full max-w-sm space-y-2">
<div className="flex items-center justify-between border-2 border-foreground p-3">
<span className="text-sm font-pixel">Secret Stash</span>
<CollapsibleTrigger className="text-xs font-pixel underline">
Toggle
</CollapsibleTrigger>
</div>
<CollapsibleContent className="space-y-2">
<div className="border-2 border-foreground p-3 font-pixel text-sm">Gold ×999</div>
<div className="border-2 border-foreground p-3 font-pixel text-sm">Phoenix Down ×3</div>
<div className="border-2 border-foreground p-3 font-pixel text-sm">Megalixir ×1</div>
</CollapsibleContent>
</Collapsible>
</div>
);
}