---
type: doc
title: Item
description: Native Liquid item with readable CSS and shared data-slot parts.
---

> Native Liquid and CSS. Install from `https://ui.full.dev/r/liquid/{name}.json`; see [layout setup](/liquid/docs/installation.md). No Tailwind or consuming build.

```liquid title="liquid/examples/item.liquid"
<ul data-slot='item-group'>
  <li data-slot='item' data-variant='outline'>
    <div data-slot='item-media'>
      <svg
        class='icon'
        data-slot='icon'
        viewBox='0 0 24 24'
        fill='none'
        stroke='currentColor'
        stroke-width='2'
        stroke-linecap='round'
        stroke-linejoin='round'
        aria-hidden='true'
        focusable='false'
      >
        <path d='m7.5 4.3 9 5.1'/><path d='M21 8a2 2 0 0 0-1-1.7l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.7l7 4a2 2 0 0 0 2 0l7-4a2 2 0 0 0 1-1.7Z'/><path d='m3.3 7 8.7 5 8.7-5'/><path d='M12 22V12'/>
      </svg>
    </div>
    <div data-slot='item-content'>
      <p data-slot='item-title'>Item title</p>
      <p data-slot='item-description'>Add a short description of this item.</p>
    </div>
    <div data-slot='item-actions'>
      <a
        href='{{ routes.all_products_collection_url }}'
        data-slot='button'
        data-variant='outline'
        data-size='sm'
        >View products</a
      >
    </div>
  </li>
  <li>
    <a href='{{ routes.cart_url }}' data-slot='item' data-variant='muted' data-size='sm'>
      <span data-slot='item-media'>
        <svg
          class='icon'
          data-slot='icon'
          viewBox='0 0 24 24'
          fill='none'
          stroke='currentColor'
          stroke-width='2'
          stroke-linecap='round'
          stroke-linejoin='round'
          aria-hidden='true'
          focusable='false'
        >
          <path d='M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4Z'/><path d='M3 6h18'/><path d='M16 10a4 4 0 0 1-8 0'/>
        </svg>
      </span>
      <span data-slot='item-content'>
        <span data-slot='item-title'>Cart</span>
      </span>
      <span data-slot='item-actions'>
        <svg
          class='icon'
          data-slot='icon'
          viewBox='0 0 24 24'
          fill='none'
          stroke='currentColor'
          stroke-width='2'
          stroke-linecap='round'
          stroke-linejoin='round'
          aria-hidden='true'
          focusable='false'
        >
          <path d='m9 18 6-6-6-6'/>
        </svg>
      </span>
    </a>
  </li>
</ul>
```

## Installation

```bash
npx shadcn@latest add https://ui.full.dev/r/liquid/item.json https://ui.full.dev/r/liquid/button.json https://ui.full.dev/r/liquid/icon.json
```

Follow the [one-time layout setup](/liquid/docs/installation/). A full `components` install already includes this item.

## Usage

After this install, render these once in the layout head before theme overrides and other modules. The full `ui` hook already includes them. The command also installs the parts used in this example.

```liquid
{% render 'ui-init' %}
{% render 'ui-item' %}
{% render 'ui-button' %}
{% render 'ui-icon' %}
```

The preview and its Usage tab render the same native Liquid source. Use `data-slot` for parts, `data-variant` for variants and `data-size` for sizes. Keep your store's labels, translations and Shopify data in your theme.

## Parts

`item`, `item-actions`, `item-content`, `item-description`, `item-footer`, `item-group`, `item-header`, `item-media`, `item-title`.

[Component source](https://github.com/fulldotdev/ui/tree/main/liquid/components/item.liquid) · [Theming](/liquid/docs/theming/)

## Variants

`image`, `muted`, `outline`.

## Sizes

`sm`, `xs`.

## Install what this page shows

```bash
npx shadcn@latest add https://ui.full.dev/r/liquid/item.json https://ui.full.dev/r/liquid/button.json https://ui.full.dev/r/liquid/icon.json
```