UI Elements

Badges

Small labels for tags, status indicators, or counts.

Badge Variants

Default
Secondary
Destructive
Outline
Success

Badge Sizes

Small
Medium

Badge Use Cases

New
Active
Error
Pending
99+

Avatars

User profile images with fallback initials.

Avatar with Image

User
User
User

Avatar with Fallback

JD
AB
XY

Avatar Sizes

Small
Default
Large
Extra Large

Avatar with Badge

User
MK
User

Separator

Visual dividers for content sections.

Horizontal Separator

Content above the separator

Content below the separator

Vertical Separator

Link 1 Link 2 Link 3

Separator in Card

Account Settings

Manage your account preferences

Email Notifications
Receive emails about your account activity
Marketing Emails
Receive emails about new features

Combined Example

Badges, avatars, and separators working together.

Team Members

User
John Doe
john@example.com
Admin
User
Jane Smith
jane@example.com
Member
RJ
Robert Johnson
robert@example.com
Guest