# Item

Flexible container for list items with media, content, and actions

## Item

Flexible container for list items with media, content, and actions

**Source:** [`packages/appkit-ui/src/react/ui/item.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/item.tsx)

### Props

| Prop | Type | Required | Default | Description |
|------|------|----------|---------|-------------|
| `variant` | `"default" \| "outline" \| "muted" \| null` |  | `default` | - |
| `size` | `"default" \| "sm" \| null` |  | `default` | - |
| `asChild` | `boolean` |  | `false` | - |

### Usage

```tsx
import { Item } from '@databricks/appkit-ui';

```

## ItemActions

**Source:** [`packages/appkit-ui/src/react/ui/item.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/item.tsx)

### Props

This component extends standard HTML element attributes.

### Usage

```tsx
import { ItemActions } from '@databricks/appkit-ui';

```

## ItemContent

**Source:** [`packages/appkit-ui/src/react/ui/item.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/item.tsx)

### Props

This component extends standard HTML element attributes.

### Usage

```tsx
import { ItemContent } from '@databricks/appkit-ui';

```

## ItemDescription

**Source:** [`packages/appkit-ui/src/react/ui/item.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/item.tsx)

### Props

This component extends standard HTML element attributes.

### Usage

```tsx
import { ItemDescription } from '@databricks/appkit-ui';

```

## ItemFooter

**Source:** [`packages/appkit-ui/src/react/ui/item.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/item.tsx)

### Props

This component extends standard HTML element attributes.

### Usage

```tsx
import { ItemFooter } from '@databricks/appkit-ui';

```

## ItemGroup

**Source:** [`packages/appkit-ui/src/react/ui/item.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/item.tsx)

### Props

This component extends standard HTML element attributes.

### Usage

```tsx
import { ItemGroup } from '@databricks/appkit-ui';

```

## ItemHeader

**Source:** [`packages/appkit-ui/src/react/ui/item.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/item.tsx)

### Props

This component extends standard HTML element attributes.

### Usage

```tsx
import { ItemHeader } from '@databricks/appkit-ui';

```

## ItemMedia

**Source:** [`packages/appkit-ui/src/react/ui/item.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/item.tsx)

### Props

| Prop | Type | Required | Default | Description |
|------|------|----------|---------|-------------|
| `variant` | `"image" \| "default" \| "icon" \| null` |  | `default` | - |

### Usage

```tsx
import { ItemMedia } from '@databricks/appkit-ui';

```

## ItemSeparator

**Source:** [`packages/appkit-ui/src/react/ui/item.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/item.tsx)

### Props

| Prop | Type | Required | Default | Description |
|------|------|----------|---------|-------------|
| `orientation` | `enum` |  | `vertical` | Either `vertical` or `horizontal`. Defaults to `horizontal`. |
| `decorative` | `boolean` |  | - | Whether or not the component is purely decorative. When true, accessibility-related attributes are updated so that that the rendered element is removed from the accessibility tree. |
| `asChild` | `boolean` |  | - | - |

### Usage

```tsx
import { ItemSeparator } from '@databricks/appkit-ui';

```

## ItemTitle

**Source:** [`packages/appkit-ui/src/react/ui/item.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/item.tsx)

### Props

This component extends standard HTML element attributes.

### Usage

```tsx
import { ItemTitle } from '@databricks/appkit-ui';

```