Skip to content
blobz
Try it live
Blobz docs

Components

Ready-to-ship avatar components and blocks powered by @blobz/react and installed through the shadcn CLI.

Blobz components are copied into your application, so their source remains yours to adjust. Each item uses @blobz/react for deterministic avatar rendering and semantic shadcn tokens for the surrounding interface.

Every preview includes the complete code used to render it. Open View code to inspect or copy the example. The Avatar page documents rounded, circle, and square frames as separate examples, with rounded as the default.

Components

ComponentUse it for
AvatarA styled generated avatar with size, frame, and surface variants
Avatar StatusPresence indicators such as online, away, busy, and offline
Avatar GroupOverlapping teams with an overflow count
Avatar ProfileIdentity rows with supporting text and actions
Avatar BadgeCompact identity, supporting details, and a role badge
Avatar ChipCompact selected users, assignees, and recipients
Avatar Social ProofAvatar stacks paired with community or trust copy
Presence AvatarOnline, away, offline, and unread states

Blocks

BlockUse it for
Avatar Account MenuAccount navigation behind an avatar trigger
Avatar SelectA person selector with avatars in the trigger and options
Avatar Team ListResponsive rosters with roles, statuses, and actions
Group ChatConversation threads with participant avatars and typing presence
User TablePeople tables with roles, statuses, and activity

Register the Blobz registry

Until @blobz is listed in shadcn's registry index, run this once in each project that uses Blobz components. The command saves the registry URL in your project's components.json.

npx shadcn@latest registry add @blobz=https://blobz.lirena.in/r/{name}.json

Then install any component by its @blobz name. For example:

npx shadcn@latest add @blobz/avatar

The registry setup is per project. You only need to run it once before installing your first Blobz component.

Avatar

A server-renderable Blobz avatar with semantic shadcn size, frame, and surface variants.

Theme

On this page

ComponentsBlocksRegister the Blobz registry