Photonix

ActivityWidget

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

Preview

Recent activity

Workspace events

  • Deployment completed

    Docs production build finished successfully.

    2 minutes ago

  • Review requested

    Component examples need final sign-off.

    18 minutes ago

Showing latest 2 events

Usage
"use client";

import { ActivityWidget } from '@photonix/ultimate';
import { CheckCircleFilled, WarningFilled } from '@photonix/icons';

const items = [
    {
        id: 'deploy',
        title: 'Deployment completed',
        description: 'Docs production build finished successfully.',
        timestamp: '2 minutes ago',
        variant: 'success' as const,
        icon: <CheckCircleFilled size={14} />,
    },
    {
        id: 'review',
        title: 'Review requested',
        description: 'Component examples need final sign-off.',
        timestamp: '18 minutes ago',
        variant: 'warning' as const,
        icon: <WarningFilled size={14} />,
    },
];

export default function ActivityWidgetBasicExample() {
    return (
        <ActivityWidget
            title="Recent activity"
            subtitle="Workspace events"
            items={items}
            footer="Showing latest 2 events"
            appearance="elevated"
        />
    );
}

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.

Activity

  • New project created

    Dashboard redesign project was started by Alex

    2 hours ago

  • Document updated

    Design system guidelines.pdf was updated

    5 hours ago

  • New member joined

    Sarah Jenkins joined the marketing team

    Yesterday

  • Comment on task

    Alex commented on "Finalize colors"

    2 days ago

  • System alert

    Server storage is reaching 90% capacity

    3 days ago

Standard Feed
"use client";

import { ActivityWidget } from '@photonix/ultimate';
import { AddOutline, DocumentOutline, InformationOutline, SettingsOutline, UserOutline } from '@photonix/icons';

const items = [
    { id: '1', title: 'New project created', description: 'Dashboard redesign project was started by Alex', timestamp: '2 hours ago', icon: <AddOutline />, variant: 'primary' as const },
    { id: '2', title: 'Document updated', description: 'Design system guidelines.pdf was updated', timestamp: '5 hours ago', icon: <DocumentOutline />, variant: 'success' as const },
    { id: '3', title: 'New member joined', description: 'Sarah Jenkins joined the marketing team', timestamp: 'Yesterday', icon: <UserOutline />, variant: 'default' as const },
    { id: '4', title: 'Comment on task', description: 'Alex commented on "Finalize colors"', timestamp: '2 days ago', icon: <InformationOutline />, variant: 'warning' as const },
    { id: '5', title: 'System alert', description: 'Server storage is reaching 90% capacity', timestamp: '3 days ago', icon: <SettingsOutline />, variant: 'error' as const },
];

export default function ActivityWidgetStandardExample() {
    return <ActivityWidget title="Activity" items={items} />;
}

Loading State

Displays a skeleton preview while data is being fetched.

Recent Activity

Loading State
"use client";

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

export default function ActivityWidgetLoadingExample() {
    return <ActivityWidget title="Recent Activity" items={[]} loading />;
}

Limited Items

Limit the number of displayed items using the maxItems prop.

Latest 3 Events

  • New project created

    Dashboard redesign project was started by Alex

    2 hours ago

  • Document updated

    Design system guidelines.pdf was updated

    5 hours ago

  • New member joined

    Sarah Jenkins joined the marketing team

    Yesterday

Limited Items
"use client";

import { ActivityWidget } from '@photonix/ultimate';
import { AddOutline, DocumentOutline, InformationOutline, SettingsOutline, UserOutline } from '@photonix/icons';

const items = [
    { id: '1', title: 'New project created', description: 'Dashboard redesign project was started by Alex', timestamp: '2 hours ago', icon: <AddOutline />, variant: 'primary' as const },
    { id: '2', title: 'Document updated', description: 'Design system guidelines.pdf was updated', timestamp: '5 hours ago', icon: <DocumentOutline />, variant: 'success' as const },
    { id: '3', title: 'New member joined', description: 'Sarah Jenkins joined the marketing team', timestamp: 'Yesterday', icon: <UserOutline />, variant: 'default' as const },
    { id: '4', title: 'Comment on task', description: 'Alex commented on "Finalize colors"', timestamp: '2 days ago', icon: <InformationOutline />, variant: 'warning' as const },
    { id: '5', title: 'System alert', description: 'Server storage is reaching 90% capacity', timestamp: '3 days ago', icon: <SettingsOutline />, variant: 'error' as const },
];

export default function ActivityWidgetMaxItemsExample() {
    return <ActivityWidget title="Latest 3 Events" items={items} maxItems={3} />;
}

On this page

Preview
Component API
Variants
Standard Feed
Loading State
Limited Items
Photonix UI - React Components, Templates & Figma Design System