Accordion Latch

ui

An accordion whose sections latch shut with a small SVG hasp-and-staple on each closed header: opening swings the hasp off its staple, lifts the lid 2px, then unfolds the content. Closing reverses and the hasp settles back down with a bounce.

pnpm dlx shadcn@latest add "https://design.helpmarq.com/r/accordion-latch.json"

Sign In

Accordion Latch

ui

An accordion whose sections latch shut with a small SVG hasp-and-staple on each closed header: opening swings the hasp off its staple, lifts the lid 2px, then unfolds the content. Closing reverses and the hasp settles back down with a bounce.

pnpm dlx shadcn@latest add "https://design.helpmarq.com/r/accordion-latch.json"

components/ui/accordion-latch.tsx