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

# SidebarUserBlock

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

> Horizontal account row for the sidebar footer.

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

| Slot | Default classes | Description |
| --- | --- | --- |
| [root](/v3/reference/theming/keys/SidebarUserBlock.md#theme-key-SidebarUserBlock-root) | 3 classes | Horizontal account row for the sidebar footer. |
| [text](/v3/reference/theming/keys/SidebarUserBlock.md#theme-key-SidebarUserBlock-text) | `flex min-w-0 flex-1 flex-col group-data-[collapsible=icon]:hidden` | Min-width guard for truncating name and role text beside the avatar and action button. |
| [name](/v3/reference/theming/keys/SidebarUserBlock.md#theme-key-SidebarUserBlock-name) | `truncate text-[length:var(--vueda-text-body)] font-medium leading-tight text-sidebar-foreground` | Display-name text. Tight leading and truncation keep long names inside the dense footer row. |
| [role](/v3/reference/theming/keys/SidebarUserBlock.md#theme-key-SidebarUserBlock-role) | `truncate text-[length:var(--vueda-text-micro)] font-normal leading-tight text-muted-foreground` | Secondary role text using the same micro scale as [SidebarGroupLabel.root](/v3/reference/theming/keys/SidebarGroupLabel.md#theme-key-SidebarGroupLabel-root). |
| [kebab](/v3/reference/theming/keys/SidebarUserBlock.md#theme-key-SidebarUserBlock-kebab) | `contents group-data-[collapsible=icon]:hidden` | Slot wrapper for the optional account-menu trigger. Hidden in the icon-collapsed rail. |

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

## root

> Horizontal account row for the sidebar footer.

Default classes:

```text
flex w-full items-center gap-2
group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:justify-center group-data-[collapsible=icon]:gap-0
group-data-[collapsible=icon]:overflow-hidden group-data-[collapsible=icon]:p-0!
```

Source: `client/lib/theme/vueda-tailwind/navigation/SidebarUserBlock.theme.js:16`

<a id="theme-key-SidebarUserBlock-text"></a>

## text

> Min-width guard for truncating name and role text beside the avatar and action button.

Default classes:

`flex min-w-0 flex-1 flex-col group-data-[collapsible=icon]:hidden`

Source: `client/lib/theme/vueda-tailwind/navigation/SidebarUserBlock.theme.js:27`

<a id="theme-key-SidebarUserBlock-name"></a>

## name

> Display-name text. Tight leading and truncation keep long names inside the dense footer row.

Default classes:

`truncate text-[length:var(--vueda-text-body)] font-medium leading-tight text-sidebar-foreground`

Source: `client/lib/theme/vueda-tailwind/navigation/SidebarUserBlock.theme.js:31`

<a id="theme-key-SidebarUserBlock-role"></a>

## role

> Secondary role text using the same micro scale as [SidebarGroupLabel.root](/v3/reference/theming/keys/SidebarGroupLabel.md#theme-key-SidebarGroupLabel-root).

Default classes:

`truncate text-[length:var(--vueda-text-micro)] font-normal leading-tight text-muted-foreground`

Source: `client/lib/theme/vueda-tailwind/navigation/SidebarUserBlock.theme.js:38`

<a id="theme-key-SidebarUserBlock-kebab"></a>

## kebab

> Slot wrapper for the optional account-menu trigger. Hidden in the icon-collapsed rail.

Default classes:

`contents group-data-[collapsible=icon]:hidden`

Source: `client/lib/theme/vueda-tailwind/navigation/SidebarUserBlock.theme.js:45`