Components/Surfaces/Item

COMPONENT28.28

Item

List rows with media, content and actions. Groups are gap-based lists; link rows get accent hover.

INSTALL

1pnpm dlx @sayagodev/mo add item

Or import the files from the package (no copy):

1import "@sayagodev/mo/css/item.css";

EXAMPLES

Demo

Basic item

A simple item with title and description.

Your profile has been verified.

1<div data-item data-variant="outline" role="listitem">2  <div data-item-content>3    <div data-item-title>Basic item</div>4    <p data-item-description>A simple item with title and description.</p>5  </div>6  <div data-item-actions>7    <button type="button" class="outline small">Action</button>8  </div>9</div>10 11<a href="#" data-item data-variant="outline" data-size="sm" role="listitem">12  <div data-item-media>13    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">14      <path d="M3.85 8.62a4 4 0 0 1 4.78-4.77 4 4 0 0 1 6.74 0 4 4 0 0 1 4.78 4.78 4 4 0 0 1 0 6.74 4 4 0 0 1-4.77 4.78 4 4 0 0 1-6.75 0 4 4 0 0 1-4.78-4.77 4 4 0 0 1 0-6.76Z" />15      <path d="m9 12 2 2 4-4" />16    </svg>17  </div>18  <div data-item-content>19    <div data-item-title>Your profile has been verified.</div>20  </div>21  <div data-item-actions>22    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">23      <path d="m9 18 6-6-6-6" />24    </svg>25  </div>26</a>27

Variants

Default

Bordered row with a subtle shadow.

Muted

Muted background for secondary content.

1<div data-item>2  <div data-item-media data-variant="icon">3    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">4      <path d="M22 12h-6l-2 3h-4l-2-3H2" />5      <path d="M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z" />6    </svg>7  </div>8  <div data-item-content>9    <div data-item-title>Default</div>10    <p data-item-description>Bordered row with a subtle shadow.</p>11  </div>12</div>13 14<div data-item data-variant="muted">15  <div data-item-media data-variant="icon">16    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">17      <path d="M22 12h-6l-2 3h-4l-2-3H2" />18      <path d="M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z" />19    </svg>20  </div>21  <div data-item-content>22    <div data-item-title>Muted</div>23    <p data-item-description>Muted background for secondary content.</p>24  </div>25</div>26

Sizes

Default size

The standard size for most use cases.

Small size

A compact size for dense layouts.

1<div data-item data-variant="outline">2  <div data-item-media data-variant="icon">3    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">4      <path d="M22 12h-6l-2 3h-4l-2-3H2" />5      <path d="M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z" />6    </svg>7  </div>8  <div data-item-content>9    <div data-item-title>Default size</div>10    <p data-item-description>The standard size for most use cases.</p>11  </div>12</div>13 14<div data-item data-variant="outline" data-size="sm">15  <div data-item-media data-variant="icon">16    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">17      <path d="M22 12h-6l-2 3h-4l-2-3H2" />18      <path d="M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z" />19    </svg>20  </div>21  <div data-item-content>22    <div data-item-title>Small size</div>23    <p data-item-description>A compact size for dense layouts.</p>24  </div>25</div>26

Link items

Visit our documentation

Learn how to get started with our components.

External resource

Opens in a new tab with security attributes.

1<a href="#" data-item role="listitem">2  <div data-item-content>3    <div data-item-title>Visit our documentation</div>4    <p data-item-description>Learn how to get started with our components.</p>5  </div>6  <div data-item-actions>7    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">8      <path d="m9 18 6-6-6-6" />9    </svg>10  </div>11</a>12 13<a href="#" target="_blank" rel="noopener noreferrer" data-item data-variant="outline" role="listitem">14  <div data-item-content>15    <div data-item-title>External resource</div>16    <p data-item-description>Opens in a new tab with security attributes.</p>17  </div>18  <div data-item-actions>19    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">20      <path d="M15 3h6v6" />21      <path d="M10 14 21 3" />22      <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" />23    </svg>24  </div>25</a>26

With icon

Security alert

New login detected from unknown device.

1<div data-item data-variant="outline" role="listitem">2  <div data-item-media data-variant="icon">3    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">4      <path d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1 1 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z" />5      <path d="M12 8v4" />6      <path d="M12 16h.01" />7    </svg>8  </div>9  <div data-item-content>10    <div data-item-title>Security alert</div>11    <p data-item-description>New login detected from unknown device.</p>12  </div>13  <div data-item-actions>14    <button type="button" class="outline small">Review</button>15  </div>16</div>17

With avatar

Evil Rabbit

Last seen 5 months ago

No team members

Invite your team to collaborate on this project.

1<div data-item data-variant="outline">2  <div data-item-media>3    <figure data-variant="avatar" class="large">ER</figure>4  </div>5  <div data-item-content>6    <div data-item-title>Evil Rabbit</div>7    <p data-item-description>Last seen 5 months ago</p>8  </div>9  <div data-item-actions>10    <button type="button" class="outline icon small" aria-label="Invite">11      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">12        <path d="M5 12h14" />13        <path d="M12 5v14" />14      </svg>15    </button>16  </div>17</div>18 19<div data-item data-variant="outline">20  <div data-item-media>21    <figure data-variant="avatar" role="group">22      <figure data-variant="avatar">S</figure>23      <figure data-variant="avatar">M</figure>24      <figure data-variant="avatar">E</figure>25    </figure>26  </div>  <div data-item-content>27    <div data-item-title>No team members</div>28    <p data-item-description>Invite your team to collaborate on this project.</p>29  </div>30  <div data-item-actions>31    <button type="button" class="outline small">Invite</button>32  </div>33</div>34

With image media

1<ul data-item-group role="list">2  <li>3    <a href="#" data-item data-variant="outline" role="listitem">4      <div data-item-media data-variant="image">5        <img src="https://avatar.vercel.sh/midnight-city-lights" alt="" />6      </div>7      <div data-item-content>8        <div data-item-title>Midnight City Lights</div>9        <p data-item-description>Neon Dreams</p>10      </div>11      <div data-item-content>12        <p data-item-description>3:45</p>13      </div>14    </a>15  </li>16  <li>17    <a href="#" data-item data-variant="outline" role="listitem">18      <div data-item-media data-variant="image">19        <img src="https://avatar.vercel.sh/coffee-shop-conversations" alt="" />20      </div>21      <div data-item-content>22        <div data-item-title>Coffee Shop Conversations</div>23        <p data-item-description>The Morning Brew</p>24      </div>25      <div data-item-content>26        <p data-item-description>4:05</p>27      </div>28    </a>29  </li>30  <li>31    <a href="#" data-item data-variant="outline" role="listitem">32      <div data-item-media data-variant="image">33        <img src="https://avatar.vercel.sh/digital-rain" alt="" />34      </div>35      <div data-item-content>36        <div data-item-title>Digital Rain</div>37        <p data-item-description>Cyber Symphony</p>38      </div>39      <div data-item-content>40        <p data-item-description>3:30</p>41      </div>42    </a>43  </li>44</ul>45

Group

S

shadcn

[email protected]
M

maxleiter

[email protected]
E

evilrabbit

[email protected]

1<ul data-item-group role="list">2  <li>3    <div data-item data-variant="outline" role="listitem">4      <div data-item-media>5        <figure data-variant="avatar">S</figure>6      </div>7      <div data-item-content>8        <div data-item-title>shadcn</div>9        <p data-item-description>[email protected]</p>10      </div>11      <div data-item-actions>12        <button type="button" class="ghost icon" aria-label="Invite shadcn">13          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">14            <path d="M5 12h14" />15            <path d="M12 5v14" />16          </svg>17        </button>18      </div>19    </div>20  </li>21  <li>22    <div data-item data-variant="outline" role="listitem">23      <div data-item-media>24        <figure data-variant="avatar">M</figure>25      </div>26      <div data-item-content>27        <div data-item-title>maxleiter</div>28        <p data-item-description>[email protected]</p>29      </div>30      <div data-item-actions>31        <button type="button" class="ghost icon" aria-label="Invite maxleiter">32          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">33            <path d="M5 12h14" />34            <path d="M12 5v14" />35          </svg>36        </button>37      </div>38    </div>39  </li>40  <li>41    <div data-item data-variant="outline" role="listitem">42      <div data-item-media>43        <figure data-variant="avatar">E</figure>44      </div>45      <div data-item-content>46        <div data-item-title>evilrabbit</div>47        <p data-item-description>[email protected]</p>48      </div>49      <div data-item-actions>50        <button type="button" class="ghost icon" aria-label="Invite evilrabbit">51          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">52            <path d="M5 12h14" />53            <path d="M12 5v14" />54          </svg>55        </button>56      </div>57    </div>58  </li>59</ul>60

Outline group

Item 1

First item with icon.
Item 2

Second item with icon.
Item 3

Third item with icon.

1<ul data-item-group role="list">2  <li>3    <div data-item data-variant="outline" role="listitem">4      <div data-item-media data-variant="icon">5        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">6          <path d="M22 12h-6l-2 3h-4l-2-3H2" />7          <path d="M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z" />8        </svg>9      </div>10      <div data-item-content>11        <div data-item-title>Item 1</div>12        <p data-item-description>First item with icon.</p>13      </div>14    </div>15  </li>16  <li>17    <div data-item data-variant="outline" role="listitem">18      <div data-item-media data-variant="icon">19        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">20          <path d="M22 12h-6l-2 3h-4l-2-3H2" />21          <path d="M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z" />22        </svg>23      </div>24      <div data-item-content>25        <div data-item-title>Item 2</div>26        <p data-item-description>Second item with icon.</p>27      </div>28    </div>29  </li>30  <li>31    <div data-item data-variant="outline" role="listitem">32      <div data-item-media data-variant="icon">33        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">34          <path d="M22 12h-6l-2 3h-4l-2-3H2" />35          <path d="M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z" />36        </svg>37      </div>38      <div data-item-content>39        <div data-item-title>Item 3</div>40        <p data-item-description>Third item with icon.</p>41      </div>42    </div>43  </li>44</ul>45

Muted group

Item 1

First item in muted group.
Item 2

Second item in muted group.
Item 3

Third item in muted group.

1<ul data-item-group role="list">2  <li>3    <div data-item data-variant="muted" role="listitem">4      <div data-item-content>5        <div data-item-title>Item 1</div>6        <p data-item-description>First item in muted group.</p>7      </div>8      <div data-item-actions>9        <button type="button" class="outline small">Action</button>10      </div>11    </div>12  </li>13  <li>14    <div data-item data-variant="muted" role="listitem">15      <div data-item-content>16        <div data-item-title>Item 2</div>17        <p data-item-description>Second item in muted group.</p>18      </div>19      <div data-item-actions>20        <button type="button" class="outline small">Action</button>21      </div>22    </div>23  </li>24  <li>25    <div data-item data-variant="muted" role="listitem">26      <div data-item-content>27        <div data-item-title>Item 3</div>28        <p data-item-description>Third item in muted group.</p>29      </div>30      <div data-item-actions>31        <button type="button" class="outline small">Action</button>32      </div>33    </div>34  </li>35</ul>36

Header cards

v0-1.5-sm

Everyday tasks and UI generation.

v0-1.5-lg

Advanced thinking or reasoning.

v0-2.0-mini

Open source model for everyone.

1<div class="row">2  <div class="col-4">3    <div data-item data-variant="outline" role="listitem">4      <div data-item-header>5        <img src="https://images.unsplash.com/photo-1650804068570-7fb2e3dbf888?q=80&w=640&auto=format&fit=crop" alt="Abstract gradient artwork" />6      </div>7      <div data-item-content>8        <div data-item-title>v0-1.5-sm</div>9        <p data-item-description>Everyday tasks and UI generation.</p>10      </div>11    </div>12  </div>13  <div class="col-4">14    <div data-item data-variant="outline" role="listitem">15      <div data-item-header>16        <img src="https://images.unsplash.com/photo-1610280777472-54133d004c8c?q=80&w=640&auto=format&fit=crop" alt="Light trails at night" />17      </div>18      <div data-item-content>19        <div data-item-title>v0-1.5-lg</div>20        <p data-item-description>Advanced thinking or reasoning.</p>21      </div>22    </div>23  </div>24  <div class="col-4">25    <div data-item data-variant="outline" role="listitem">26      <div data-item-header>27        <img src="https://images.unsplash.com/photo-1602146057681-08560aee8cde?q=80&w=640&auto=format&fit=crop" alt="Starry sky over mountains" />28      </div>29      <div data-item-content>30        <div data-item-title>v0-2.0-mini</div>31        <p data-item-description>Open source model for everyone.</p>32      </div>33    </div>34  </div>35</div>36

With dropdown menu

Evil Rabbit

[email protected]

1<div data-item data-variant="outline" role="listitem">2  <div data-item-media>3    <figure data-variant="avatar">ER</figure>4  </div>5  <div data-item-content>6    <div data-item-title>Evil Rabbit</div>7    <p data-item-description>[email protected]</p>8  </div>9  <div data-item-actions>10    <mo-dropdown>11      <button type="button" class="outline icon small" popovertarget="item-dd" aria-label="Open member menu">12        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">13          <path d="M5 12h14" />14          <path d="M12 5v14" />15        </svg>16      </button>17      <menu popover id="item-dd">18        <button role="menuitem" type="button">View profile</button>19        <button role="menuitem" type="button">Send message</button>20        <hr />21        <button role="menuitem" type="button" data-variant="danger">Remove</button>22      </menu>23    </mo-dropdown>24  </div>25</div>26

USAGE

1<ul data-item-group role="list">2  <li>3    <div data-item>4      <div data-item-media data-variant="icon"><svg … /></div>5      <div data-item-content>6        <div data-item-title>Title</div>7        <p data-item-description>Description.</p>8      </div>9      <div data-item-actions><button class="outline small">Open</button></div>10    </div>11  </li>12</ul>

API

NAMEKINDDESCRIPTION

[data-item-group]attributeGap-based list on ul/ol/div

[data-item]attributeBordered row; link items get hover

[data-variant]attributeoutline · muted surface

[data-size="sm"]attributeCompact padding/gap

[data-item-media]attributeLeading slot; icon/image variants

[data-item-content] / [data-item-title] / [data-item-description]attributeText anatomy

[data-item-actions]attributeRight-side action row

FILES

src/css/item.css

Install:mo add item

THEMING · PLAYGROUND

This is the exact component from the examples above, wearing a completely different theme. Edit the tokens and --mo-* hooks in the editor — autocomplete knows them all — and the preview obeys in real time. Your CSS always wins.

Global tokens

--accent--border--muted--muted-foreground--primary--radius

Component hooks

--mo-item-gap--mo-item-group-gap--mo-item-media-icon-size--mo-item-media-image-size--mo-item-padding--mo-item-padding-sm--mo-item-radius

Preview

Sealer head 02

Calibrated 3 days ago — drift within tolerance.

Your CSS

Try it: type --mo- for the component hooks, or edit any value — the preview obeys in real time.