# Tree: Small

> `size="sm"` uses shorter rows and tighter indents, for sidebars. Rows grow on touch screens in both sizes.

Example: https://hextaui.com/docs/tree/examples/small
Component docs: https://hextaui.com/docs/tree.md

## Add this example

```bash
npx shadcn@latest add https://hextaui.com/r/tree-small.json
```

This adds `components/examples/tree/small.tsx` with the Tree component and the HextaUI theme tokens.

## Source

```tsx title="components/examples/tree/small.tsx"
import { IconHash, IconVolume } from "@tabler/icons-react"

import { Tree, TreeGroup, TreeItem, TreeItemLabel } from "@/components/ui/tree"

export function TreeSmall() {
  return (
    <Tree
      aria-label="Channels"
      size="sm"
      defaultExpandedValues={["text", "voice"]}
      defaultSelectedValues={["general"]}
      className="w-full max-w-56"
    >
      <TreeItem value="text">
        <TreeItemLabel>Text channels</TreeItemLabel>
        <TreeGroup>
          <TreeItem value="general">
            <TreeItemLabel icon={<IconHash />} meta="12">
              general
            </TreeItemLabel>
          </TreeItem>
          <TreeItem value="design">
            <TreeItemLabel icon={<IconHash />}>design</TreeItemLabel>
          </TreeItem>
          <TreeItem value="releases">
            <TreeItemLabel icon={<IconHash />} meta="3">
              releases
            </TreeItemLabel>
          </TreeItem>
        </TreeGroup>
      </TreeItem>
      <TreeItem value="voice">
        <TreeItemLabel>Voice channels</TreeItemLabel>
        <TreeGroup>
          <TreeItem value="lounge">
            <TreeItemLabel icon={<IconVolume />}>Lounge</TreeItemLabel>
          </TreeItem>
        </TreeGroup>
      </TreeItem>
    </Tree>
  )
}
```

## Props in this example

### Tree

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `size` | `"default" \| "sm"` | `"default"` |  |
| `defaultSelectedValues` | `string[]` | – |  |
| `defaultExpandedValues` | `string[]` | – |  |

### TreeItem

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `value` | `string` | – | Required. Unique within the tree. |

### TreeItemLabel

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `icon` | `ReactNode` | – | Shown before the label. |
| `meta` | `ReactNode` | – | Shown at the end of the row, such as a size, count or status. |

## More Tree examples

- [Indent guides](https://hextaui.com/docs/tree/examples/lines.md)
- [Connectors](https://hextaui.com/docs/tree/examples/connectors.md)
- [Checkboxes](https://hextaui.com/docs/tree/examples/checkboxes.md)
- [Navigation](https://hextaui.com/docs/tree/examples/navigation.md)
- [Multiple selection](https://hextaui.com/docs/tree/examples/multiple.md)
- [Controlled](https://hextaui.com/docs/tree/examples/controlled.md)
- [Lazy loading](https://hextaui.com/docs/tree/examples/lazy.md)
- [Disabled](https://hextaui.com/docs/tree/examples/disabled.md)
- [Long names](https://hextaui.com/docs/tree/examples/long-names.md)
- [Right to left](https://hextaui.com/docs/tree/examples/rtl.md)