<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
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.jsonFollow the one-time layout setup. 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.
{% 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.
Variants
image, muted, outline.
Sizes
sm, xs.