Vinyl UI

Alert

Inline status message with an icon.

Vinyl styling: Thick left accent bar.

Installation

npx shadcn@latest add @vinyl/alert

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

Usage

<Alert>
  <DiscIcon />
  <AlertTitle>Now playing</AlertTitle>
  <AlertDescription>Side A, track 3.</AlertDescription>
</Alert>
<Alert variant="destructive">…</Alert>

API

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

Accordion

Stacked sections that expand and collapse.

Alert Dialog

Modal confirmation that interrupts the user.

On this page

InstallationUsageAPI