> ## 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](https://velt.dev/docs/ui-customization/overview.md) before attempting to modify any components.

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

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltActivityLog />
> ```
>
> **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).

> [tab] Other Frameworks
>
> ```html theme={null}
> <velt-activity-log></velt-activity-log>
> ```
>
> **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).

***

### VeltActivityLogHeader

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

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltActivityLogHeader />
> ```
>
> **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).

> [tab] Other Frameworks
>
> ```html theme={null}
> <velt-activity-log-header></velt-activity-log-header>
> ```
>
> **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).

***

### VeltActivityLogHeaderTitle

Text title displayed in the header.

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltActivityLogHeaderTitle />
> ```
>
> **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).

> [tab] 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).

***

### VeltActivityLogHeaderCloseButton

Button that dismisses or closes the Activity Log panel.

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltActivityLogHeaderCloseButton />
> ```
>
> **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).

> [tab] 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).

***

### VeltActivityLogHeaderFilter

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

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltActivityLogHeaderFilter />
> ```
>
> **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).

> [tab] 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).

***

### VeltActivityLogHeaderFilterTrigger

Clickable button that opens the filter dropdown.

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltActivityLogHeaderFilterTrigger />
> ```
>
> **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).

> [tab] 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).

***

### VeltActivityLogHeaderFilterTriggerIcon

Icon displayed inside the filter trigger button.

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltActivityLogHeaderFilterTriggerIcon />
> ```
>
> **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).

> [tab] 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).

***

### VeltActivityLogHeaderFilterTriggerLabel

Text label displayed inside the filter trigger button.

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltActivityLogHeaderFilterTriggerLabel />
> ```
>
> **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).

> [tab] 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).

***

### VeltActivityLogHeaderFilterContent

Dropdown panel listing available filter options.

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltActivityLogHeaderFilterContent />
> ```
>
> **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).

> [tab] 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).

***

### VeltActivityLogHeaderFilterContentItem

A single selectable row inside the filter dropdown.

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltActivityLogHeaderFilterContentItem />
> ```
>
> **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).

> [tab] 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).

***

### VeltActivityLogHeaderFilterContentItemIcon

Icon for a single filter dropdown row.

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltActivityLogHeaderFilterContentItemIcon />
> ```
>
> **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).

> [tab] 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).

***

### VeltActivityLogHeaderFilterContentItemLabel

Text label for a single filter dropdown row.

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltActivityLogHeaderFilterContentItemLabel />
> ```
>
> **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).

> [tab] 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).

***

### VeltActivityLogLoading

Loading state shown while activity data is being fetched.

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltActivityLogLoading />
> ```
>
> **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).

> [tab] Other Frameworks
>
> ```html theme={null}
> <velt-activity-log-loading></velt-activity-log-loading>
> ```
>
> **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).

***

### VeltActivityLogEmpty

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

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltActivityLogEmpty />
> ```
>
> **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).

> [tab] Other Frameworks
>
> ```html theme={null}
> <velt-activity-log-empty></velt-activity-log-empty>
> ```
>
> **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).

***

### VeltActivityLogList

Scrollable list container for all activity entries and date groups.

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltActivityLogList />
> ```
>
> **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).

> [tab] Other Frameworks
>
> ```html theme={null}
> <velt-activity-log-list></velt-activity-log-list>
> ```
>
> **Attributes:** Common attributes only (see [Common Inputs](#common-inputs) section).

***

### VeltActivityLogListDateGroup

Groups activity entries under a shared date label.

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltActivityLogListDateGroup />
> ```
>
> **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).

> [tab] 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).

***

### VeltActivityLogListDateGroupLabel

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

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltActivityLogListDateGroupLabel />
> ```
>
> **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).

> [tab] 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).

***

### VeltActivityLogListItem

A single activity entry row in the list.

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltActivityLogListItem />
> ```
>
> **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).

> [tab] 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).

***

### VeltActivityLogListItemIcon

Icon representing the activity type for a list entry.

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltActivityLogListItemIcon />
> ```
>
> **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).

> [tab] 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).

***

### VeltActivityLogListItemAvatar

User avatar for the actor who performed the activity.

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltActivityLogListItemAvatar />
> ```
>
> **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).

> [tab] 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).

***

### VeltActivityLogListItemTime

Relative or absolute timestamp for an activity entry.

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltActivityLogListItemTime />
> ```
>
> **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).

> [tab] 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).

***

### VeltActivityLogListItemContent

Content container for the descriptive text of an activity entry.

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltActivityLogListItemContent />
> ```
>
> **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).

> [tab] 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).

***

### VeltActivityLogListItemContentUser

Displays the name of the user who performed the activity.

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltActivityLogListItemContentUser />
> ```
>
> **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).

> [tab] 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).

***

### VeltActivityLogListItemContentAction

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

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltActivityLogListItemContentAction />
> ```
>
> **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).

> [tab] 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).

***

### VeltActivityLogListItemContentTarget

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

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltActivityLogListItemContentTarget />
> ```
>
> **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).

> [tab] 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).

***

### VeltActivityLogListItemContentDetail

Additional detail or preview text for the activity entry.

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltActivityLogListItemContentDetail />
> ```
>
> **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).

> [tab] 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).

***

### VeltActivityLogListShowMore

Button to load additional activity entries beyond the initial page.

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltActivityLogListShowMore />
> ```
>
> **Props:** Common inputs only (see [Common Inputs](#common-inputs) section).

> [tab] 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).


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