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

# WidgetFile

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

> The root stays transparent so the field shell provides the surface.

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

| Slot | Default classes | Description |
| --- | --- | --- |
| [root](/v3/reference/theming/keys/WidgetFile.md#theme-key-WidgetFile-root) |  | The root stays transparent so the field shell provides the surface. |
| [inner](/v3/reference/theming/keys/WidgetFile.md#theme-key-WidgetFile-inner) | `flex flex-col` | The inner column stacks the current file row with any file controls. |
| [file](/v3/reference/theming/keys/WidgetFile.md#theme-key-WidgetFile-file) | `flex flex-wrap justify-between` | The file row wraps metadata and actions without forcing horizontal overflow. |
| [link](/v3/reference/theming/keys/WidgetFile.md#theme-key-WidgetFile-link) | `font-semibold text-ellipsis max-w-60 whitespace-nowrap overflow-hidden` | The file link is emphasized and truncated to keep long filenames inside the row. |
| [buttonGroup](/v3/reference/theming/keys/WidgetFile.md#theme-key-WidgetFile-buttonGroup) | `flex gap-4` | The action group spaces file commands as separate controls. |

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

## root

> The root stays transparent so the field shell provides the surface.

Source: `client/lib/theme/vueda-tailwind/widgets/WidgetFile.theme.js:17`

<a id="theme-key-WidgetFile-inner"></a>

## inner

> The inner column stacks the current file row with any file controls.

Default classes:

`flex flex-col`

Source: `client/lib/theme/vueda-tailwind/widgets/WidgetFile.theme.js:21`

<a id="theme-key-WidgetFile-file"></a>

## file

> The file row wraps metadata and actions without forcing horizontal overflow.

Default classes:

`flex flex-wrap justify-between`

Source: `client/lib/theme/vueda-tailwind/widgets/WidgetFile.theme.js:25`

<a id="theme-key-WidgetFile-link"></a>

## link

> The file link is emphasized and truncated to keep long filenames inside the row.

Default classes:

`font-semibold text-ellipsis max-w-60 whitespace-nowrap overflow-hidden`

Source: `client/lib/theme/vueda-tailwind/widgets/WidgetFile.theme.js:29`

<a id="theme-key-WidgetFile-buttonGroup"></a>

## buttonGroup

> The action group spaces file commands as separate controls.

Default classes:

`flex gap-4`

Source: `client/lib/theme/vueda-tailwind/widgets/WidgetFile.theme.js:33`