> ## 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 Primitives

> Standalone primitive components for building custom Activity Logs interfaces.

<Note>
  We recommend that you familiarize yourselves with [UI Customization Concepts](/ui-customization/overview) before attempting to modify any components.
</Note>

## Overview

The Activity Logs Primitives API provides granular components that can be used independently to build fully custom activity log interfaces. Each primitive accepts `defaultCondition` to control its render visibility.

## Common Inputs

All Activity Logs primitive components accept the following input.

| React Prop         | HTML Attribute      | Type      | Default | Description                                                              |
| ------------------ | ------------------- | --------- | ------- | ------------------------------------------------------------------------ |
| `defaultCondition` | `default-condition` | `boolean` | `true`  | When `false`, the component always renders regardless of internal state. |

***

## Components

### VeltActivityLog

Root container for the Activity Log. Wraps all sub-components and provides shared context.

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

    **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-activity-log></velt-activity-log>
    ```

    **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).
  </Tab>
</Tabs>

***

### VeltActivityLogHeader

Header bar containing the title, close button, and filter controls.

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

    **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-activity-log-header></velt-activity-log-header>
    ```

    **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).
  </Tab>
</Tabs>

***

### VeltActivityLogHeaderTitle

Text title displayed in the header.

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

    **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-activity-log-header-title></velt-activity-log-header-title>
    ```

    **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).
  </Tab>
</Tabs>

***

### VeltActivityLogHeaderCloseButton

Button that dismisses or closes the Activity Log panel.

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

    **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-activity-log-header-close-button></velt-activity-log-header-close-button>
    ```

    **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).
  </Tab>
</Tabs>

***

### VeltActivityLogHeaderFilter

Filter control container in the header. Composes the Trigger and Content sub-components.

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

    **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-activity-log-header-filter></velt-activity-log-header-filter>
    ```

    **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).
  </Tab>
</Tabs>

***

### VeltActivityLogHeaderFilterTrigger

Clickable button that opens the filter dropdown.

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

    **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-activity-log-header-filter-trigger></velt-activity-log-header-filter-trigger>
    ```

    **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).
  </Tab>
</Tabs>

***

### VeltActivityLogHeaderFilterTriggerIcon

Icon displayed inside the filter trigger button.

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

    **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-activity-log-header-filter-trigger-icon></velt-activity-log-header-filter-trigger-icon>
    ```

    **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).
  </Tab>
</Tabs>

***

### VeltActivityLogHeaderFilterTriggerLabel

Text label displayed inside the filter trigger button.

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

    **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-activity-log-header-filter-trigger-label></velt-activity-log-header-filter-trigger-label>
    ```

    **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).
  </Tab>
</Tabs>

***

### VeltActivityLogHeaderFilterContent

Dropdown panel listing available filter options.

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

    **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-activity-log-header-filter-content></velt-activity-log-header-filter-content>
    ```

    **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).
  </Tab>
</Tabs>

***

### VeltActivityLogHeaderFilterContentItem

A single selectable row inside the filter dropdown.

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

    **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-activity-log-header-filter-content-item></velt-activity-log-header-filter-content-item>
    ```

    **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).
  </Tab>
</Tabs>

***

### VeltActivityLogHeaderFilterContentItemIcon

Icon for a single filter dropdown row.

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

    **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-activity-log-header-filter-content-item-icon></velt-activity-log-header-filter-content-item-icon>
    ```

    **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).
  </Tab>
</Tabs>

***

### VeltActivityLogHeaderFilterContentItemLabel

Text label for a single filter dropdown row.

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

    **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-activity-log-header-filter-content-item-label></velt-activity-log-header-filter-content-item-label>
    ```

    **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).
  </Tab>
</Tabs>

***

### VeltActivityLogLoading

Loading state shown while activity data is being fetched.

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

    **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-activity-log-loading></velt-activity-log-loading>
    ```

    **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).
  </Tab>
</Tabs>

***

### VeltActivityLogEmpty

Empty state shown when there are no activity entries to display.

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

    **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-activity-log-empty></velt-activity-log-empty>
    ```

    **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).
  </Tab>
</Tabs>

***

### VeltActivityLogList

Scrollable list container for all activity entries and date groups.

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

    **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-activity-log-list></velt-activity-log-list>
    ```

    **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).
  </Tab>
</Tabs>

***

### VeltActivityLogListDateGroup

Groups activity entries under a shared date label.

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

    **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-activity-log-list-date-group></velt-activity-log-list-date-group>
    ```

    **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).
  </Tab>
</Tabs>

***

### VeltActivityLogListDateGroupLabel

Text label displaying the date for a group of activity entries.

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

    **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-activity-log-list-date-group-label></velt-activity-log-list-date-group-label>
    ```

    **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).
  </Tab>
</Tabs>

***

### VeltActivityLogListItem

A single activity entry row in the list.

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

    **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-activity-log-list-item></velt-activity-log-list-item>
    ```

    **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).
  </Tab>
</Tabs>

***

### VeltActivityLogListItemIcon

Icon representing the activity type for a list entry.

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

    **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-activity-log-list-item-icon></velt-activity-log-list-item-icon>
    ```

    **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).
  </Tab>
</Tabs>

***

### VeltActivityLogListItemAvatar

User avatar for the actor who performed the activity.

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

    **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-activity-log-list-item-avatar></velt-activity-log-list-item-avatar>
    ```

    **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).
  </Tab>
</Tabs>

***

### VeltActivityLogListItemTime

Relative or absolute timestamp for an activity entry.

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

    **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-activity-log-list-item-time></velt-activity-log-list-item-time>
    ```

    **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).
  </Tab>
</Tabs>

***

### VeltActivityLogListItemContent

Content container for the descriptive text of an activity entry.

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

    **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-activity-log-list-item-content></velt-activity-log-list-item-content>
    ```

    **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).
  </Tab>
</Tabs>

***

### VeltActivityLogListItemContentUser

Displays the name of the user who performed the activity.

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

    **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-activity-log-list-item-content-user></velt-activity-log-list-item-content-user>
    ```

    **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).
  </Tab>
</Tabs>

***

### VeltActivityLogListItemContentAction

Describes the action verb (e.g., "commented", "resolved") for an activity entry.

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

    **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-activity-log-list-item-content-action></velt-activity-log-list-item-content-action>
    ```

    **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).
  </Tab>
</Tabs>

***

### VeltActivityLogListItemContentTarget

Displays the target object of the activity (e.g., document or element name).

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

    **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-activity-log-list-item-content-target></velt-activity-log-list-item-content-target>
    ```

    **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).
  </Tab>
</Tabs>

***

### VeltActivityLogListItemContentDetail

Additional detail or preview text for the activity entry.

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

    **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-activity-log-list-item-content-detail></velt-activity-log-list-item-content-detail>
    ```

    **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).
  </Tab>
</Tabs>

***

### VeltActivityLogListShowMore

Button to load additional activity entries beyond the initial page.

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

    **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-activity-log-list-show-more></velt-activity-log-list-show-more>
    ```

    **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).
  </Tab>
</Tabs>