# Item A versatile component that you can use to display any content. The `Item` component is a straightforward flex container that can house nearly any type of content. Use it to display a title, description, and actions. Group it with the `ItemGroup` component to create a list of items. You can pretty much achieve the same result with the `div` element and some classes, but I've built this so many times that I decided to create a component for it. Now I use it all the time. ```svelte

Basic Item A simple item with title and description. {#snippet child({ props })} Your profile has been verified. {/snippet}

``` ## Installation ```bash pnpm dlx shadcn-svelte@latest add item ``` ```bash npx shadcn-svelte@latest add item ``` ```bash bun x shadcn-svelte@latest add item ``` ## Usage ```svelte Item Header Item Item Item Footer ``` ## Item vs Field Use Field if you need to display a form input such as a checkbox, input, radio, or select. If you only need to display content such as a title, description, and actions, use `Item`. ## Examples ### Variants ```svelte

Default Variant Standard styling with subtle background and borders. Outline Variant Outlined style with clear borders and transparent background. Muted Variant Subdued appearance with muted colors for secondary content.

``` ### Size The `Item` component has different sizes for different use cases. For example, you can use the `sm` size for a compact item or the default size for a standard item. ```svelte

Basic Item A simple item with title and description. {#snippet child({ props })} Your profile has been verified. {/snippet}

``` ### Icon ```svelte

Security Alert New login detected from unknown device.

``` ### Avatar ```svelte

ER Evil Rabbit Last seen 5 months ago

CN LR ER

No Team Members Invite your team to collaborate on this project.

``` ### Image ```svelte

{#each music as song (song)} {#snippet child({ props })}

{song.title} - {song.album} {song.artist} {song.duration} {/snippet} {/each}

``` ### Group ```svelte

{#each people as person, index (person.username)} {person.username.charAt(0)} {person.username} {person.email} {#if index !== people.length - 1} {/if} {/each}

``` ### Header ```svelte

{#each models as model (model.name)} {model.name}

{model.name} {model.description} {/each}

``` ### Link To render an item as a link, use the the `child` snippet. The hover and focus states will be applied to the anchor element. ```svelte

{#snippet child({ props })} Visit our documentation Learn how to get started with our components. {/snippet} {#snippet child({ props })} External resource Opens in a new tab with security attributes. {/snippet}

``` ### Dropdown ```svelte

{#snippet child({ props })} {/snippet} {#each people as person (person.username)} {person.username.charAt(0)} {person.username} {person.email} {/each}

```