Item

A row of content with media, text and actions. Use it for lists, settings and pickers.

Search the docs

Find a component by name or description.

Installation

uvx django_shadcn@latest add item

Usage

<c-item variant="outline">
  <c-item.media variant="icon">
    <c-icon name="search" />
  </c-item.media>
  <c-item.content>
    <c-item.title>Title</c-item.title>
    <c-item.description>Description</c-item.description>
  </c-item.content>
  <c-item.actions>
    <c-button variant="outline" size="sm">Open</c-button>
  </c-item.actions>
</c-item>

Media

media boxes the icon by default: variant="icon" draws a bordered square around it, exactly as upstream. Leave the variant out for a bare icon.

Bare icon

No variant, no box.

Boxed icon

variant="icon", bordered and filled.

<c-item.media>
  <c-icon name="check" class="size-5" />
</c-item.media>

<c-item.media variant="icon">
  <c-icon name="check" />
</c-item.media>

Examples

Variants

Default

No background, no border.

Outline

Bordered on every side.

Muted

Filled with a muted background.

<c-item variant="outline">...</c-item> <c-item variant="muted">...</c-item>

Sizes

Default

Small

<c-item variant="outline" size="sm">...</c-item>

Group

Notifications

Get notified when someone replies.

Search history

Keep the last 30 days of searches.

<c-item.group>
  <c-item>...</c-item>
  <c-item.separator />
  <c-item>...</c-item>
</c-item.group>

With an image

Marcelo Machado

Maintainer of django-shadcn.

<c-item.media variant="image">
  <img src="/avatar.png" alt="" />
</c-item.media>

Header and footer

PROJECT

Active

django-shadcn

shadcn/ui components for Django templates.

Updated today

<c-item variant="outline">
  <c-item.header>...</c-item.header>
  <c-item.content>...</c-item.content>
  <c-item.footer>...</c-item.footer>
</c-item>