Item

A versatile component that you can use to display any content.

Basic Item

A simple item with title and description.

Usage

Use .item on a semantic element such as <article> or <a>. Use .item-group when listing multiple items.

HTML


<article class="item" data-variant="outline">
  <section>
    <h3>Basic Item</h3>
    <p>A simple item with title and description.</p>
  </section>
  <aside>
    <button class="btn-sm-outline">Action</button>
  </aside>
</article>

HTML structure

The component has the following HTML structure:

<article class="item"> or <a class="item">
The item root. Use data-variant="outline|muted" and data-size="sm|xs" when needed.
<figure> Optional
Media: icon, avatar, or image.
<section>
Primary content. Headings and paragraphs are styled automatically.
<h2>, <h3>, or <h4>
The item title.
<p> Optional
The item description.
<aside> Optional
Actions or trailing metadata.
<header>, <footer> Optional
Full-width item regions.
<div class="item-group" role="list"> Optional
Groups related items. Use role="listitem" on child items when they are not native list items.

Examples

Variants

Default Variant

Transparent border for quiet item rows.

Outline Variant

Outlined style with a visible border.

Muted Variant

Subdued appearance for secondary content.

Size

Default

Default item size.

Small

Small item size.

Extra Small

Extra small item size.

Icon

Security Alert

New login detected from an unknown device.

Avatar

hunvreus

hunvreus

Last seen 5 months ago.

Image

Group

hunvreus

hunvreus

hunvreus@gmail.com

shadcn

shadcn

shadcn@vercel.com

Header

v0-1.5-sm

Model
v0-1.5-sm

Everyday tasks and UI generation.

RTL

تنبيه أمني

تم اكتشاف تسجيل دخول من جهاز غير معروف.