> ## Documentation Index
> Fetch the complete documentation index at: https://velt.dev/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Activity Logs Wireframes

> The Activity Logs displays a chronological feed of user actions. Customize the layout using VeltActivityLogWireframe and its sub-components.

> [!NOTE]
>
> We recommend that you familiarize yourselves with [UI Customization Concepts](https://velt.dev/docs/ui-customization/overview.md) before attempting to modify any components.

## Overview

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltWireframe>
>     <VeltActivityLogWireframe>
>         <VeltActivityLogWireframe.Header />
>         <VeltActivityLogWireframe.Loading />
>         <VeltActivityLogWireframe.List />
>         <VeltActivityLogWireframe.Empty />
>     </VeltActivityLogWireframe>
> </VeltWireframe>
> ```

> [tab] Other Frameworks
>
> ```html theme={null}
> <velt-wireframe style="display:none;">
>     <velt-activity-log-wireframe>
>         <velt-activity-log-header-wireframe></velt-activity-log-header-wireframe>
>         <velt-activity-log-loading-wireframe></velt-activity-log-loading-wireframe>
>         <velt-activity-log-list-wireframe></velt-activity-log-list-wireframe>
>         <velt-activity-log-empty-wireframe></velt-activity-log-empty-wireframe>
>     </velt-activity-log-wireframe>
> </velt-wireframe>
> ```

## Header

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltWireframe>
>     <VeltActivityLogWireframe.Header>
>         <VeltActivityLogWireframe.Header.Title />
>         <VeltActivityLogWireframe.Header.CloseButton />
>         <VeltActivityLogWireframe.Header.Filter />
>     </VeltActivityLogWireframe.Header>
> </VeltWireframe>
> ```

> [tab] Other Frameworks
>
> ```html theme={null}
> <velt-wireframe style="display:none;">
>     <velt-activity-log-header-wireframe>
>         <velt-activity-log-header-title-wireframe></velt-activity-log-header-title-wireframe>
>         <velt-activity-log-header-close-button-wireframe></velt-activity-log-header-close-button-wireframe>
>         <velt-activity-log-header-filter-wireframe></velt-activity-log-header-filter-wireframe>
>     </velt-activity-log-header-wireframe>
> </velt-wireframe>
> ```

### Title

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltWireframe>
>     <VeltActivityLogWireframe.Header.Title />
> </VeltWireframe>
> ```

> [tab] Other Frameworks
>
> ```html theme={null}
> <velt-wireframe style="display:none;">
>     <velt-activity-log-header-title-wireframe></velt-activity-log-header-title-wireframe>
> </velt-wireframe>
> ```

### CloseButton

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltWireframe>
>     <VeltActivityLogWireframe.Header.CloseButton />
> </VeltWireframe>
> ```

> [tab] Other Frameworks
>
> ```html theme={null}
> <velt-wireframe style="display:none;">
>     <velt-activity-log-header-close-button-wireframe></velt-activity-log-header-close-button-wireframe>
> </velt-wireframe>
> ```

### Filter

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltWireframe>
>     <VeltActivityLogWireframe.Header.Filter>
>         <VeltActivityLogWireframe.Header.Filter.Trigger />
>         <VeltActivityLogWireframe.Header.Filter.Content />
>     </VeltActivityLogWireframe.Header.Filter>
> </VeltWireframe>
> ```

> [tab] Other Frameworks
>
> ```html theme={null}
> <velt-wireframe style="display:none;">
>     <velt-activity-log-header-filter-wireframe>
>         <velt-activity-log-header-filter-trigger-wireframe></velt-activity-log-header-filter-trigger-wireframe>
>         <velt-activity-log-header-filter-content-wireframe></velt-activity-log-header-filter-content-wireframe>
>     </velt-activity-log-header-filter-wireframe>
> </velt-wireframe>
> ```

#### Filter Trigger

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltWireframe>
>     <VeltActivityLogWireframe.Header.Filter.Trigger>
>         <VeltActivityLogWireframe.Header.Filter.Trigger.Icon />
>         <VeltActivityLogWireframe.Header.Filter.Trigger.Label />
>     </VeltActivityLogWireframe.Header.Filter.Trigger>
> </VeltWireframe>
> ```

> [tab] Other Frameworks
>
> ```html theme={null}
> <velt-wireframe style="display:none;">
>     <velt-activity-log-header-filter-trigger-wireframe>
>         <velt-activity-log-header-filter-trigger-icon-wireframe></velt-activity-log-header-filter-trigger-icon-wireframe>
>         <velt-activity-log-header-filter-trigger-label-wireframe></velt-activity-log-header-filter-trigger-label-wireframe>
>     </velt-activity-log-header-filter-trigger-wireframe>
> </velt-wireframe>
> ```

#### Filter Trigger Icon

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltWireframe>
>     <VeltActivityLogWireframe.Header.Filter.Trigger.Icon />
> </VeltWireframe>
> ```

> [tab] Other Frameworks
>
> ```html theme={null}
> <velt-wireframe style="display:none;">
>     <velt-activity-log-header-filter-trigger-icon-wireframe></velt-activity-log-header-filter-trigger-icon-wireframe>
> </velt-wireframe>
> ```

#### Filter Trigger Label

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltWireframe>
>     <VeltActivityLogWireframe.Header.Filter.Trigger.Label />
> </VeltWireframe>
> ```

> [tab] Other Frameworks
>
> ```html theme={null}
> <velt-wireframe style="display:none;">
>     <velt-activity-log-header-filter-trigger-label-wireframe></velt-activity-log-header-filter-trigger-label-wireframe>
> </velt-wireframe>
> ```

#### Filter Content

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltWireframe>
>     <VeltActivityLogWireframe.Header.Filter.Content>
>         <VeltActivityLogWireframe.Header.Filter.Content.Item />
>     </VeltActivityLogWireframe.Header.Filter.Content>
> </VeltWireframe>
> ```

> [tab] Other Frameworks
>
> ```html theme={null}
> <velt-wireframe style="display:none;">
>     <velt-activity-log-header-filter-content-wireframe>
>         <velt-activity-log-header-filter-content-item-wireframe></velt-activity-log-header-filter-content-item-wireframe>
>     </velt-activity-log-header-filter-content-wireframe>
> </velt-wireframe>
> ```

#### Filter Content Item

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltWireframe>
>     <VeltActivityLogWireframe.Header.Filter.Content.Item>
>         <VeltActivityLogWireframe.Header.Filter.Content.Item.Icon />
>         <VeltActivityLogWireframe.Header.Filter.Content.Item.Label />
>     </VeltActivityLogWireframe.Header.Filter.Content.Item>
> </VeltWireframe>
> ```

> [tab] Other Frameworks
>
> ```html theme={null}
> <velt-wireframe style="display:none;">
>     <velt-activity-log-header-filter-content-item-wireframe>
>         <velt-activity-log-header-filter-content-item-icon-wireframe></velt-activity-log-header-filter-content-item-icon-wireframe>
>         <velt-activity-log-header-filter-content-item-label-wireframe></velt-activity-log-header-filter-content-item-label-wireframe>
>     </velt-activity-log-header-filter-content-item-wireframe>
> </velt-wireframe>
> ```

#### Filter Content Item Icon

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltWireframe>
>     <VeltActivityLogWireframe.Header.Filter.Content.Item.Icon />
> </VeltWireframe>
> ```

> [tab] Other Frameworks
>
> ```html theme={null}
> <velt-wireframe style="display:none;">
>     <velt-activity-log-header-filter-content-item-icon-wireframe></velt-activity-log-header-filter-content-item-icon-wireframe>
> </velt-wireframe>
> ```

#### Filter Content Item Label

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltWireframe>
>     <VeltActivityLogWireframe.Header.Filter.Content.Item.Label />
> </VeltWireframe>
> ```

> [tab] Other Frameworks
>
> ```html theme={null}
> <velt-wireframe style="display:none;">
>     <velt-activity-log-header-filter-content-item-label-wireframe></velt-activity-log-header-filter-content-item-label-wireframe>
> </velt-wireframe>
> ```

## Loading

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltWireframe>
>     <VeltActivityLogWireframe.Loading />
> </VeltWireframe>
> ```

> [tab] Other Frameworks
>
> ```html theme={null}
> <velt-wireframe style="display:none;">
>     <velt-activity-log-loading-wireframe></velt-activity-log-loading-wireframe>
> </velt-wireframe>
> ```

## Empty

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltWireframe>
>     <VeltActivityLogWireframe.Empty />
> </VeltWireframe>
> ```

> [tab] Other Frameworks
>
> ```html theme={null}
> <velt-wireframe style="display:none;">
>     <velt-activity-log-empty-wireframe></velt-activity-log-empty-wireframe>
> </velt-wireframe>
> ```

## List

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltWireframe>
>     <VeltActivityLogWireframe.List>
>         <VeltActivityLogWireframe.List.DateGroup />
>         <VeltActivityLogWireframe.List.Item />
>         <VeltActivityLogWireframe.List.ShowMore />
>     </VeltActivityLogWireframe.List>
> </VeltWireframe>
> ```

> [tab] Other Frameworks
>
> ```html theme={null}
> <velt-wireframe style="display:none;">
>     <velt-activity-log-list-wireframe>
>         <velt-activity-log-list-date-group-wireframe></velt-activity-log-list-date-group-wireframe>
>         <velt-activity-log-list-item-wireframe></velt-activity-log-list-item-wireframe>
>         <velt-activity-log-list-show-more-wireframe></velt-activity-log-list-show-more-wireframe>
>     </velt-activity-log-list-wireframe>
> </velt-wireframe>
> ```

### DateGroup

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltWireframe>
>     <VeltActivityLogWireframe.List.DateGroup>
>         <VeltActivityLogWireframe.List.DateGroup.Label />
>     </VeltActivityLogWireframe.List.DateGroup>
> </VeltWireframe>
> ```

> [tab] Other Frameworks
>
> ```html theme={null}
> <velt-wireframe style="display:none;">
>     <velt-activity-log-list-date-group-wireframe>
>         <velt-activity-log-list-date-group-label-wireframe></velt-activity-log-list-date-group-label-wireframe>
>     </velt-activity-log-list-date-group-wireframe>
> </velt-wireframe>
> ```

#### DateGroup Label

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltWireframe>
>     <VeltActivityLogWireframe.List.DateGroup.Label />
> </VeltWireframe>
> ```

> [tab] Other Frameworks
>
> ```html theme={null}
> <velt-wireframe style="display:none;">
>     <velt-activity-log-list-date-group-label-wireframe></velt-activity-log-list-date-group-label-wireframe>
> </velt-wireframe>
> ```

### Item

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltWireframe>
>     <VeltActivityLogWireframe.List.Item>
>         <VeltActivityLogWireframe.List.Item.Icon />
>         <VeltActivityLogWireframe.List.Item.Avatar />
>         <VeltActivityLogWireframe.List.Item.Time />
>         <VeltActivityLogWireframe.List.Item.Content />
>     </VeltActivityLogWireframe.List.Item>
> </VeltWireframe>
> ```

> [tab] Other Frameworks
>
> ```html theme={null}
> <velt-wireframe style="display:none;">
>     <velt-activity-log-list-item-wireframe>
>         <velt-activity-log-list-item-icon-wireframe></velt-activity-log-list-item-icon-wireframe>
>         <velt-activity-log-list-item-avatar-wireframe></velt-activity-log-list-item-avatar-wireframe>
>         <velt-activity-log-list-item-time-wireframe></velt-activity-log-list-item-time-wireframe>
>         <velt-activity-log-list-item-content-wireframe></velt-activity-log-list-item-content-wireframe>
>     </velt-activity-log-list-item-wireframe>
> </velt-wireframe>
> ```

#### Item Icon

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltWireframe>
>     <VeltActivityLogWireframe.List.Item.Icon />
> </VeltWireframe>
> ```

> [tab] Other Frameworks
>
> ```html theme={null}
> <velt-wireframe style="display:none;">
>     <velt-activity-log-list-item-icon-wireframe></velt-activity-log-list-item-icon-wireframe>
> </velt-wireframe>
> ```

#### Item Avatar

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltWireframe>
>     <VeltActivityLogWireframe.List.Item.Avatar />
> </VeltWireframe>
> ```

> [tab] Other Frameworks
>
> ```html theme={null}
> <velt-wireframe style="display:none;">
>     <velt-activity-log-list-item-avatar-wireframe></velt-activity-log-list-item-avatar-wireframe>
> </velt-wireframe>
> ```

#### Item Time

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltWireframe>
>     <VeltActivityLogWireframe.List.Item.Time />
> </VeltWireframe>
> ```

> [tab] Other Frameworks
>
> ```html theme={null}
> <velt-wireframe style="display:none;">
>     <velt-activity-log-list-item-time-wireframe></velt-activity-log-list-item-time-wireframe>
> </velt-wireframe>
> ```

#### Item Content

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltWireframe>
>     <VeltActivityLogWireframe.List.Item.Content>
>         <VeltActivityLogWireframe.List.Item.Content.User />
>         <VeltActivityLogWireframe.List.Item.Content.Action />
>         <VeltActivityLogWireframe.List.Item.Content.Target />
>         <VeltActivityLogWireframe.List.Item.Content.Detail />
>     </VeltActivityLogWireframe.List.Item.Content>
> </VeltWireframe>
> ```

> [tab] Other Frameworks
>
> ```html theme={null}
> <velt-wireframe style="display:none;">
>     <velt-activity-log-list-item-content-wireframe>
>         <velt-activity-log-list-item-content-user-wireframe></velt-activity-log-list-item-content-user-wireframe>
>         <velt-activity-log-list-item-content-action-wireframe></velt-activity-log-list-item-content-action-wireframe>
>         <velt-activity-log-list-item-content-target-wireframe></velt-activity-log-list-item-content-target-wireframe>
>         <velt-activity-log-list-item-content-detail-wireframe></velt-activity-log-list-item-content-detail-wireframe>
>     </velt-activity-log-list-item-content-wireframe>
> </velt-wireframe>
> ```

#### Item Content User

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltWireframe>
>     <VeltActivityLogWireframe.List.Item.Content.User />
> </VeltWireframe>
> ```

> [tab] Other Frameworks
>
> ```html theme={null}
> <velt-wireframe style="display:none;">
>     <velt-activity-log-list-item-content-user-wireframe></velt-activity-log-list-item-content-user-wireframe>
> </velt-wireframe>
> ```

#### Item Content Action

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltWireframe>
>     <VeltActivityLogWireframe.List.Item.Content.Action />
> </VeltWireframe>
> ```

> [tab] Other Frameworks
>
> ```html theme={null}
> <velt-wireframe style="display:none;">
>     <velt-activity-log-list-item-content-action-wireframe></velt-activity-log-list-item-content-action-wireframe>
> </velt-wireframe>
> ```

#### Item Content Target

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltWireframe>
>     <VeltActivityLogWireframe.List.Item.Content.Target />
> </VeltWireframe>
> ```

> [tab] Other Frameworks
>
> ```html theme={null}
> <velt-wireframe style="display:none;">
>     <velt-activity-log-list-item-content-target-wireframe></velt-activity-log-list-item-content-target-wireframe>
> </velt-wireframe>
> ```

#### Item Content Detail

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltWireframe>
>     <VeltActivityLogWireframe.List.Item.Content.Detail />
> </VeltWireframe>
> ```

> [tab] Other Frameworks
>
> ```html theme={null}
> <velt-wireframe style="display:none;">
>     <velt-activity-log-list-item-content-detail-wireframe></velt-activity-log-list-item-content-detail-wireframe>
> </velt-wireframe>
> ```

### ShowMore

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltWireframe>
>     <VeltActivityLogWireframe.List.ShowMore />
> </VeltWireframe>
> ```

> [tab] Other Frameworks
>
> ```html theme={null}
> <velt-wireframe style="display:none;">
>     <velt-activity-log-list-show-more-wireframe></velt-activity-log-list-show-more-wireframe>
> </velt-wireframe>
> ```


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.