Obsidian FAQ Accordion

Obsidian FAQ Accordion

An elegant dark-themed FAQ section built for developer-facing products. Features monospaced question numbering, smooth expand/collapse powered by CSS grid transitions, and emerald accent highlights.

Features

• Numbered items — Monospaced 01–06 indexing with hover color shift
• Smooth accordion — CSS grid-template-rows transition for jank-free expand/collapse
• Emerald accents — Subtle green glow, gradient headline, and interactive hover states
• Crosshatch background — Fine grid pattern adds tactile depth to the dark surface
• Staggered reveal — Each item enters sequentially on load
• Responsive — Clean single-column layout that works at every breakpoint

Dependencies

• @/components/ui/badge — Shadcn Badge
• @remixicon/react — RiAddLine, RiSubtractLine

Customization

• Colors: Replace emerald-400 references with your brand accent
• Content: Update the faqs array with your own Q&A pairs
• Animation: Adjust --stagger multiplier and grid transition duration
• Background: Swap #08080c for any near-black tone