Vinyl UI

Accordion

Stacked sections that expand and collapse.

Vinyl styling: Display-caps triggers, 2px rules, Vinyl collapse animation.

Installation

npx shadcn@latest add @vinyl/accordion

The @vinyl registry URL in components.json decides whether you get the web or the native version (see installation for web / native).

Usage

<Accordion type="single" collapsible>
  <AccordionItem value="a">
    <AccordionTrigger>What's on side A?</AccordionTrigger>
    <AccordionContent>Five synth tracks.</AccordionContent>
  </AccordionItem>
</Accordion>

API

Same API as shadcn/ui's Accordion on the web, and React Native Reusables' Accordion on native. Vinyl only changes styling and motion.

Wordmark

Stacked, slanted multi-colour title lockup.

Alert

Inline status message with an icon.

On this page

InstallationUsageAPI