Documentation Index
Fetch the complete documentation index at: https://docs.velt.dev/llms.txt
Use this file to discover all available pages before exploring further.
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.
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.
React / Next.js
Other Frameworks
Props: Common inputs only (see Common Inputs section). <velt-activity-log></velt-activity-log>
Attributes: Common attributes only (see Common Inputs section).
Header bar containing the title, close button, and filter controls.
React / Next.js
Other Frameworks
<VeltActivityLogHeader />
Props: Common inputs only (see Common Inputs section).<velt-activity-log-header></velt-activity-log-header>
Attributes: Common attributes only (see Common Inputs section).
Text title displayed in the header.
React / Next.js
Other Frameworks
<VeltActivityLogHeaderTitle />
Props: Common inputs only (see Common Inputs section).<velt-activity-log-header-title></velt-activity-log-header-title>
Attributes: Common attributes only (see Common Inputs section).
Button that dismisses or closes the Activity Log panel.
React / Next.js
Other Frameworks
<VeltActivityLogHeaderCloseButton />
Props: Common inputs only (see Common Inputs section).<velt-activity-log-header-close-button></velt-activity-log-header-close-button>
Attributes: Common attributes only (see Common Inputs section).
Filter control container in the header. Composes the Trigger and Content sub-components.
React / Next.js
Other Frameworks
<VeltActivityLogHeaderFilter />
Props: Common inputs only (see Common Inputs section).<velt-activity-log-header-filter></velt-activity-log-header-filter>
Attributes: Common attributes only (see Common Inputs section).
Clickable button that opens the filter dropdown.
React / Next.js
Other Frameworks
<VeltActivityLogHeaderFilterTrigger />
Props: Common inputs only (see Common Inputs section).<velt-activity-log-header-filter-trigger></velt-activity-log-header-filter-trigger>
Attributes: Common attributes only (see Common Inputs section).
Icon displayed inside the filter trigger button.
React / Next.js
Other Frameworks
<VeltActivityLogHeaderFilterTriggerIcon />
Props: Common inputs only (see Common Inputs section).<velt-activity-log-header-filter-trigger-icon></velt-activity-log-header-filter-trigger-icon>
Attributes: Common attributes only (see Common Inputs section).
Text label displayed inside the filter trigger button.
React / Next.js
Other Frameworks
<VeltActivityLogHeaderFilterTriggerLabel />
Props: Common inputs only (see Common Inputs section).<velt-activity-log-header-filter-trigger-label></velt-activity-log-header-filter-trigger-label>
Attributes: Common attributes only (see Common Inputs section).
Dropdown panel listing available filter options.
React / Next.js
Other Frameworks
<VeltActivityLogHeaderFilterContent />
Props: Common inputs only (see Common Inputs section).<velt-activity-log-header-filter-content></velt-activity-log-header-filter-content>
Attributes: Common attributes only (see Common Inputs section).
A single selectable row inside the filter dropdown.
React / Next.js
Other Frameworks
<VeltActivityLogHeaderFilterContentItem />
Props: Common inputs only (see Common Inputs section).<velt-activity-log-header-filter-content-item></velt-activity-log-header-filter-content-item>
Attributes: Common attributes only (see Common Inputs section).
Icon for a single filter dropdown row.
React / Next.js
Other Frameworks
<VeltActivityLogHeaderFilterContentItemIcon />
Props: Common inputs only (see Common Inputs section).<velt-activity-log-header-filter-content-item-icon></velt-activity-log-header-filter-content-item-icon>
Attributes: Common attributes only (see Common Inputs section).
Text label for a single filter dropdown row.
React / Next.js
Other Frameworks
<VeltActivityLogHeaderFilterContentItemLabel />
Props: Common inputs only (see Common Inputs section).<velt-activity-log-header-filter-content-item-label></velt-activity-log-header-filter-content-item-label>
Attributes: Common attributes only (see Common Inputs section).
VeltActivityLogLoading
Loading state shown while activity data is being fetched.
React / Next.js
Other Frameworks
<VeltActivityLogLoading />
Props: Common inputs only (see Common Inputs section).<velt-activity-log-loading></velt-activity-log-loading>
Attributes: Common attributes only (see Common Inputs section).
VeltActivityLogEmpty
Empty state shown when there are no activity entries to display.
React / Next.js
Other Frameworks
Props: Common inputs only (see Common Inputs section). <velt-activity-log-empty></velt-activity-log-empty>
Attributes: Common attributes only (see Common Inputs section).
VeltActivityLogList
Scrollable list container for all activity entries and date groups.
React / Next.js
Other Frameworks
Props: Common inputs only (see Common Inputs section). <velt-activity-log-list></velt-activity-log-list>
Attributes: Common attributes only (see Common Inputs section).
VeltActivityLogListDateGroup
Groups activity entries under a shared date label.
React / Next.js
Other Frameworks
<VeltActivityLogListDateGroup />
Props: Common inputs only (see Common Inputs section).<velt-activity-log-list-date-group></velt-activity-log-list-date-group>
Attributes: Common attributes only (see Common Inputs section).
VeltActivityLogListDateGroupLabel
Text label displaying the date for a group of activity entries.
React / Next.js
Other Frameworks
<VeltActivityLogListDateGroupLabel />
Props: Common inputs only (see Common Inputs section).<velt-activity-log-list-date-group-label></velt-activity-log-list-date-group-label>
Attributes: Common attributes only (see Common Inputs section).
VeltActivityLogListItem
A single activity entry row in the list.
React / Next.js
Other Frameworks
<VeltActivityLogListItem />
Props: Common inputs only (see Common Inputs section).<velt-activity-log-list-item></velt-activity-log-list-item>
Attributes: Common attributes only (see Common Inputs section).
VeltActivityLogListItemIcon
Icon representing the activity type for a list entry.
React / Next.js
Other Frameworks
<VeltActivityLogListItemIcon />
Props: Common inputs only (see Common Inputs section).<velt-activity-log-list-item-icon></velt-activity-log-list-item-icon>
Attributes: Common attributes only (see Common Inputs section).
VeltActivityLogListItemAvatar
User avatar for the actor who performed the activity.
React / Next.js
Other Frameworks
<VeltActivityLogListItemAvatar />
Props: Common inputs only (see Common Inputs section).<velt-activity-log-list-item-avatar></velt-activity-log-list-item-avatar>
Attributes: Common attributes only (see Common Inputs section).
VeltActivityLogListItemTime
Relative or absolute timestamp for an activity entry.
React / Next.js
Other Frameworks
<VeltActivityLogListItemTime />
Props: Common inputs only (see Common Inputs section).<velt-activity-log-list-item-time></velt-activity-log-list-item-time>
Attributes: Common attributes only (see Common Inputs section).
VeltActivityLogListItemContent
Content container for the descriptive text of an activity entry.
React / Next.js
Other Frameworks
<VeltActivityLogListItemContent />
Props: Common inputs only (see Common Inputs section).<velt-activity-log-list-item-content></velt-activity-log-list-item-content>
Attributes: Common attributes only (see Common Inputs section).
VeltActivityLogListItemContentUser
Displays the name of the user who performed the activity.
React / Next.js
Other Frameworks
<VeltActivityLogListItemContentUser />
Props: Common inputs only (see Common Inputs section).<velt-activity-log-list-item-content-user></velt-activity-log-list-item-content-user>
Attributes: Common attributes only (see Common Inputs section).
VeltActivityLogListItemContentAction
Describes the action verb (e.g., “commented”, “resolved”) for an activity entry.
React / Next.js
Other Frameworks
<VeltActivityLogListItemContentAction />
Props: Common inputs only (see Common Inputs section).<velt-activity-log-list-item-content-action></velt-activity-log-list-item-content-action>
Attributes: Common attributes only (see Common Inputs section).
VeltActivityLogListItemContentTarget
Displays the target object of the activity (e.g., document or element name).
React / Next.js
Other Frameworks
<VeltActivityLogListItemContentTarget />
Props: Common inputs only (see Common Inputs section).<velt-activity-log-list-item-content-target></velt-activity-log-list-item-content-target>
Attributes: Common attributes only (see Common Inputs section).
VeltActivityLogListItemContentDetail
Additional detail or preview text for the activity entry.
React / Next.js
Other Frameworks
<VeltActivityLogListItemContentDetail />
Props: Common inputs only (see Common Inputs section).<velt-activity-log-list-item-content-detail></velt-activity-log-list-item-content-detail>
Attributes: Common attributes only (see Common Inputs section).
VeltActivityLogListShowMore
Button to load additional activity entries beyond the initial page.
React / Next.js
Other Frameworks
<VeltActivityLogListShowMore />
Props: Common inputs only (see Common Inputs section).<velt-activity-log-list-show-more></velt-activity-log-list-show-more>
Attributes: Common attributes only (see Common Inputs section).