8-bit Accordion

Component 15

About

Pixel-art accordion from 8bitcn.com — expandable panels with retro chunky dashed borders. Native primitive rewrite, no Radix.

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

Code

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

Usage.tsx

"use client";

import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@/components/ui/8bit-accordion";

export default function Default() {
  return (
    <div className="flex w-full min-h-screen items-center justify-center bg-background p-8 overflow-hidden">
      <Accordion type="single" collapsible className="w-full max-w-sm">
        <AccordionItem value="item-1">
          <AccordionTrigger className="font-pixel">Quest Log</AccordionTrigger>
          <AccordionContent className="font-pixel">
            Defeat the Dungeon Master to claim the legendary sword.
          </AccordionContent>
        </AccordionItem>
        <AccordionItem value="item-2">
          <AccordionTrigger className="font-pixel">Inventory</AccordionTrigger>
          <AccordionContent className="font-pixel">
            Potion ×3, Elixir ×1, Phoenix Down ×2
          </AccordionContent>
        </AccordionItem>
        <AccordionItem value="item-3">
          <AccordionTrigger className="font-pixel">Party</AccordionTrigger>
          <AccordionContent className="font-pixel">
            Warrior, Mage, Rogue
          </AccordionContent>
        </AccordionItem>
      </Accordion>
    </div>
  );
}