---
url: "https://vueda.dev/v3/reference/theming/keys/Item.md"
title: "Item"
---

# Item

Source: `client/lib/theme/vueda-tailwind/shell/index.js`

> The row-like item wrapper. It carries the default, outline, and muted variants, size spacing, anchor hover behavior, and focus treatment.

Vue component: [Item](/v3/reference/api/vue/Item.md)

| Slot | Default classes | Description |
| --- | --- | --- |
| [root](/v3/reference/theming/keys/Item.md#theme-key-Item-root) | callback | The row-like item wrapper. It carries the default, outline, and muted variants, size spacing, anchor hover behavior, and focus treatment. |

<a id="theme-key-Item-root"></a>

## root

> The row-like item wrapper. It carries the default, outline, and muted variants, size spacing, anchor hover behavior, and focus treatment.

Callback:

```javascript
({ variant, size }) => {
            // Default and outline items share the transparent base border.
            const variantClass = variant === "muted" ? "bg-muted/50 text-foreground" : "bg-transparent";
            const sizeClass = size === "sm" ? "py-3 px-4 gap-2.5" : "p-4 gap-4";
            return {
                class: [
                    // Layout and base shape.
                    "group/item flex items-center border border-transparent text-sm rounded-md",

                    // Interactive states.
                    "transition-colors [a]:hover:bg-accent/50 [a]:active:bg-accent [a]:transition-colors duration-100",

                    // Wrapping and focus.
                    "flex-wrap focus-visible:focus-ring",

                    variantClass,
                    sizeClass,
                ],
            };
        }
```

Source: `client/lib/theme/vueda-tailwind/shell/Item.theme.js:18`