> ## 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](/ui-customization/overview) before attempting to modify any components.
</Note>

## Overview

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltActivityLogWireframe>
            <VeltActivityLogWireframe.Header />
            <VeltActivityLogWireframe.Loading />
            <VeltActivityLogWireframe.List />
            <VeltActivityLogWireframe.Empty />
        </VeltActivityLogWireframe>
    </VeltWireframe>
    ```
  </Tab>

  <Tab title="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>
    ```
  </Tab>
</Tabs>

## Header

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltActivityLogWireframe.Header>
            <VeltActivityLogWireframe.Header.Title />
            <VeltActivityLogWireframe.Header.CloseButton />
            <VeltActivityLogWireframe.Header.Filter />
        </VeltActivityLogWireframe.Header>
    </VeltWireframe>
    ```
  </Tab>

  <Tab title="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>
    ```
  </Tab>
</Tabs>

### Title

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltActivityLogWireframe.Header.Title />
    </VeltWireframe>
    ```
  </Tab>

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

### CloseButton

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltActivityLogWireframe.Header.CloseButton />
    </VeltWireframe>
    ```
  </Tab>

  <Tab title="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>
    ```
  </Tab>
</Tabs>

### Filter

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltActivityLogWireframe.Header.Filter>
            <VeltActivityLogWireframe.Header.Filter.Trigger />
            <VeltActivityLogWireframe.Header.Filter.Content />
        </VeltActivityLogWireframe.Header.Filter>
    </VeltWireframe>
    ```
  </Tab>

  <Tab title="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>
    ```
  </Tab>
</Tabs>

#### Filter Trigger

<Tabs>
  <Tab title="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>

  <Tab title="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>
    ```
  </Tab>
</Tabs>

#### Filter Trigger Icon

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltActivityLogWireframe.Header.Filter.Trigger.Icon />
    </VeltWireframe>
    ```
  </Tab>

  <Tab title="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>
    ```
  </Tab>
</Tabs>

#### Filter Trigger Label

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltActivityLogWireframe.Header.Filter.Trigger.Label />
    </VeltWireframe>
    ```
  </Tab>

  <Tab title="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>
    ```
  </Tab>
</Tabs>

#### Filter Content

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltActivityLogWireframe.Header.Filter.Content>
            <VeltActivityLogWireframe.Header.Filter.Content.Item />
        </VeltActivityLogWireframe.Header.Filter.Content>
    </VeltWireframe>
    ```
  </Tab>

  <Tab title="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>
    ```
  </Tab>
</Tabs>

#### Filter Content Item

<Tabs>
  <Tab title="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>

  <Tab title="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>
    ```
  </Tab>
</Tabs>

#### Filter Content Item Icon

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltActivityLogWireframe.Header.Filter.Content.Item.Icon />
    </VeltWireframe>
    ```
  </Tab>

  <Tab title="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>
    ```
  </Tab>
</Tabs>

#### Filter Content Item Label

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltActivityLogWireframe.Header.Filter.Content.Item.Label />
    </VeltWireframe>
    ```
  </Tab>

  <Tab title="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>
    ```
  </Tab>
</Tabs>

## Loading

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltActivityLogWireframe.Loading />
    </VeltWireframe>
    ```
  </Tab>

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

## Empty

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltActivityLogWireframe.Empty />
    </VeltWireframe>
    ```
  </Tab>

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

## List

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltActivityLogWireframe.List>
            <VeltActivityLogWireframe.List.DateGroup />
            <VeltActivityLogWireframe.List.Item />
            <VeltActivityLogWireframe.List.ShowMore />
        </VeltActivityLogWireframe.List>
    </VeltWireframe>
    ```
  </Tab>

  <Tab title="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>
    ```
  </Tab>
</Tabs>

### DateGroup

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltActivityLogWireframe.List.DateGroup>
            <VeltActivityLogWireframe.List.DateGroup.Label />
        </VeltActivityLogWireframe.List.DateGroup>
    </VeltWireframe>
    ```
  </Tab>

  <Tab title="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>
    ```
  </Tab>
</Tabs>

#### DateGroup Label

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltActivityLogWireframe.List.DateGroup.Label />
    </VeltWireframe>
    ```
  </Tab>

  <Tab title="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>
    ```
  </Tab>
</Tabs>

### Item

<Tabs>
  <Tab title="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>

  <Tab title="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>
    ```
  </Tab>
</Tabs>

#### Item Icon

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltActivityLogWireframe.List.Item.Icon />
    </VeltWireframe>
    ```
  </Tab>

  <Tab title="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>
    ```
  </Tab>
</Tabs>

#### Item Avatar

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltActivityLogWireframe.List.Item.Avatar />
    </VeltWireframe>
    ```
  </Tab>

  <Tab title="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>
    ```
  </Tab>
</Tabs>

#### Item Time

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltActivityLogWireframe.List.Item.Time />
    </VeltWireframe>
    ```
  </Tab>

  <Tab title="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>
    ```
  </Tab>
</Tabs>

#### Item Content

<Tabs>
  <Tab title="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>

  <Tab title="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>
    ```
  </Tab>
</Tabs>

#### Item Content User

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltActivityLogWireframe.List.Item.Content.User />
    </VeltWireframe>
    ```
  </Tab>

  <Tab title="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>
    ```
  </Tab>
</Tabs>

#### Item Content Action

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltActivityLogWireframe.List.Item.Content.Action />
    </VeltWireframe>
    ```
  </Tab>

  <Tab title="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>
    ```
  </Tab>
</Tabs>

#### Item Content Target

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltActivityLogWireframe.List.Item.Content.Target />
    </VeltWireframe>
    ```
  </Tab>

  <Tab title="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>
    ```
  </Tab>
</Tabs>

#### Item Content Detail

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltActivityLogWireframe.List.Item.Content.Detail />
    </VeltWireframe>
    ```
  </Tab>

  <Tab title="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>
    ```
  </Tab>
</Tabs>

### ShowMore

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltActivityLogWireframe.List.ShowMore />
    </VeltWireframe>
    ```
  </Tab>

  <Tab title="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>
    ```
  </Tab>
</Tabs>
