Avatar

User image with a fallback.

DJ

AXKMVR

Vinyl styling: Square geometric frame; the fallback uses the sunset gradient (magenta on native).

Installation

npx shadcn@latest add @vinyl/avatar

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

Usage

<Avatar>
  <AvatarImage src="/dj.jpg" alt="DJ Nova" />
  <AvatarFallback>DJ</AvatarFallback>
</Avatar>

API

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

Aspect Ratio

Keeps content at a fixed ratio.

Badge

Monospaced, uppercase status label.

On this page

Installation Usage API