Component
Item
A versatile component used to display content in a compact row, similar to a list item, with support for media, actions and descriptions.
Itemvariant: default · outline · muted — size: default · sm · xs
ItemMediavariant: default · icon · image
ItemGroup / ItemSeparatorgroups related items
Playground
Two-factor authentication
Add an extra layer of security to your account.
Basic
Your profile has been updated
Changes will be visible to other users.
Icon + link title
Your identity has been confirmed.
Variants
Default
Transparent background, no border.
Outline
Bordered container.
Muted
Subtle filled background.
Sizes
Default size
Standard padding and gap.
Small
Reduced padding.
Avatar — single and grouped
MJ
Maria Johnson
Product designer
MJ
Maria Johnson
CS
Carlos Silva
AC
Ana Costa
Image list — music tracks
Sunset Drive
3:24
Ocean Waves
4:02
City Lights
2:47
Header — image above content
Design
12 members
Engineering
12 members
Inside a dropdown menu
RTL support
المصادقة الثنائية
أضف طبقة إضافية من الأمان إلى حسابك.
Tokens used
6 semantic tokens consumed by this component.
--foregroundForegroundtext-foreground
--muted-foregroundMuted Foregroundtext-muted-foreground
--mutedMutedbg-mutedtext-mutedborder-muted
--borderBorderborder-borderborder
--primaryPrimarybg-primarytext-primaryborder-primaryring-primary
--ringRingring-ringring