Photonix UI - React Components, Templates & Figma Design System

ActivityWidget

A chronological feed of events and activities using the Timeline component.

Preview

Usage

import { ActivityWidget } from '@photonix/ultimate';
import { AddOutline } from '@photonix/icons';

const activities = [
  {
    id: '1',
    title: 'New project created',
    timestamp: '2 hours ago',
    icon: <AddOutline />,
    variant: 'primary'
  },
  // ...
];

<ActivityWidget
  title="Recent Activity"
  items={activities}
/>

Component API

ActivityWidget

Prop	Type	Default	Description
title	`string`	`-`
subtitle	`string`	`-`
actions	`React.ReactNode`	`-`
items	`ActivityItem[]`	`[]`
loading	`boolean`	`false`
maxItems	`number`	`-`
footer	`React.ReactNode`	`-`
appearance	`WidgetAppearance`	`'outlined'`	Widget appearance
padding	`string \| number`	`-`	Widget padding (default: 16px)
className	`string`	`-`
style	`React.CSSProperties`	`-`

ActivityItem

Prop	Type	Default	Description
id	`string`	`-`	Unique identifier.
title	`string`	`-`	Activity title.
description	`string`	`-`	Optional detailed description.
timestamp	`string`	`-`	Time of activity.
icon	`ReactNode`	`-`	Optional icon for the timeline dot.
variant	`'default' \| 'primary' \| 'success' \| 'warning' \| 'error'`	`'default'`	Color variant of the dot.

Variants

Standard Feed

The default appearance showing a list of activity items with metadata.

Standard Feed

<ActivityWidget
  title="Activity"
  items={MOCK_ACTIVITIES}
/>

Loading State

Displays a skeleton preview while data is being fetched.

Loading State

<ActivityWidget
  title="Recent Activity"
  items={[]}
  loading
/>

Limited Items

Limit the number of displayed items using the maxItems prop.

Limited Items

<ActivityWidget
  title="Latest 3 Events"
  items={MOCK_ACTIVITIES}
  maxItems={3}
/>

ActivityWidget

Preview

Recent Activity

Component API

ActivityWidget

ActivityItem

Variants

Standard Feed

Activity

Loading State

Recent Activity

Limited Items

Latest 3 Events

On this page