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

> Customize Velt Activity Log components with props, classes, wireframes, hooks, and known limitations.

A chronological timeline of activity (comments, resolves, reactions, …), grouped by date with a filter dropdown. **Fully wireframed**: the richest non-comment customization surface. All four layers apply; the same model as comments ([`Decision tree`](https://velt.dev/docs/ui-customization/decision-tree)).

## Components

**Full examples:** the per-component pages have complete tabbed code examples and screenshots: [Activity log wireframes](https://velt.dev/docs/ui-customization/features/async/activity-logs/activity-logs-wireframes.md), [Activity log wireframe variables](https://velt.dev/docs/ui-customization/features/async/activity-logs/activity-logs-wireframe-variables.md), and [Activity log primitives](https://velt.dev/docs/ui-customization/features/async/activity-logs/activity-logs-primitives.md).

| | Primitive | Wireframe |
| - | - | - |
| Activity log | `VeltActivityLog` | `VeltActivityLogWireframe` |

## Config props

None feature-specific: Activity Log has no dedicated config props. Primitive props on `VeltActivityLog`:

| Prop | Type | What it does |
| - | - | - |
| `darkMode` | `boolean` | Dark theme |
| `shadowDom` | `boolean` | Toggle shadow-DOM isolation |
| `variant` | `string` | Wireframe variant to render |
| `useDummyData` | `boolean` | Render sample data while styling |

## CSS: stateful classes

(Override with `!important` because Velt's own styles are high-specificity; see [CSS](https://velt.dev/docs/ui-customization/styling.md#override-classes).) Theme with `--velt-*` as usual; state-dependent styling is done with `velt-class` toggles in the wireframe (there's no large built-in stateful-class set for this feature).

| Class | Applies to |
| - | - |
| `velt-activity-log--container` | Root container |
| `velt-activity-log-loading--container` | Loading state container |
| `velt-activity-log-empty--container` | Empty state container |

## Wireframes: slot trees + tokens

```
VeltActivityLogWireframe
├── .Loading                      (shows while allActivities === null)
├── .Empty                        (filteredActivities.length === 0)
├── .Header
│   ├── .Title   .CloseButton
│   └── .Filter
│       ├── .Trigger → .Icon / .Label
│       └── .Content → .Item → .Icon / .Label
└── .List
    ├── .DateGroup → .Label
    ├── .ShowMore                 (dateGroup.totalCount > defaultVisibleCount)
    └── .Item
        ├── .Icon  .Avatar  .Time
        └── .Content → .User / .Action / .Target / .Detail
```

**Key tokens** (read with `velt-if`/`velt-class`/`velt-data`): `{isEnabled}`, `{isOpen}`, `{darkMode}`, `{allActivities}` (null = loading), `{filteredActivities}`, `{groupedActivities}`, `{activeFilter}` (`'all'` | a feature type), `{availableFilters}`, `{expandedGroups}`, `{defaultVisibleCount}` (default 5), `{filterDropdownOpen}`. Inside iteration: `{dateGroup}` (`.dateKey`/`.displayLabel`/`.totalCount`), `{activity}` (alias `{activityRecord}`: `.user`/`.timestamp`/`.featureType`/`.action`/`.target`/`.detail`), `{filter}` (alias `{filterOption}`), `{isActive}`, `{isExpanded}`, `{remainingCount}`. (See [`Template Variables`](https://velt.dev/docs/ui-customization/template-variables).)

## Headless hooks

| Hook | Returns |
| - | - |
| `useAllActivities(config?)` | `ActivityRecord[] \| null` (reactive; `null` = still loading) |
| `useActivityUtils()` | The activity element for imperative control |

Build a fully custom timeline by mapping `useAllActivities()` and rendering your own rows.

## Limitations

None notable: full slot coverage + data hooks. The [interactivity rule](https://velt.dev/docs/ui-customization/layout.md#the-interactivity-rule) still applies inside slots.


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