Skip to content
Mizen UI
Docs

IntroductionInstallationCLIStylingFoundationsThemingCompositionIntegrationsAccessibilityFor agents

useCopyToClipboard

AccordionAspect RatioCardCollapsibleFrameGridGroupInlineScroll AreaSectionSeparatorSpacerStack

BlockquoteCitationCodeHeadingKbdLabelLinkTextVisually Hidden

ButtonButton GroupToggleToggle groupToolbar

CalendarCheckboxCheckbox groupComboboxDate pickerDate range pickerDate-Time InputFieldFieldsetFile UploadFormInputInput groupNumber fieldOTP FieldRadio groupSelectSliderSwitchTextareaTime Input

BreadcrumbMenubarNavigation MenuPaginationSegmented ControlStepperTabs

Alert dialogCommandContext MenuDialogDrawerMenuPopoverPreview CardSheetTooltip

AlertBadgeEmptyError StateMeterProgressSkeletonSpinnerStatus dotToast

Activity FeedAvatarAvatar GroupData TableListMetricOverflow ListProperty ListTableTokenTree

Area ChartBar ListCalendar HeatmapCategory ComparisonChart FrameChart LegendChart TooltipDistributionFunnelHeatmapMetric TrendPart-to-WholeProgress RingsRadar ChartRadial BarsSankey ChartScatter ChartScore GaugeTime Series

Diagram

AttachmentCarouselCode BlockLightboxMarkdownThumbnailTimestamp

Agent ThinkingApproval CardComposerConversationInline CitationMessageMessage ScrollerQuestion CardSourcesStreaming TextSuggestionTask ListTerminalTool Call

On this page

  • Preview
  • Usage
  • Anatomy
  • Examples
  • Compact activity
  • Grouped by day
  • Review request
  • Empty activity
  • Loading activity
  • Load failure and recovery
  • Recommendations
  • Usage boundaries
  • API reference

Data

Activity Feed

Displays chronological events with native list and time semantics.

idle

Usage

import {
	ActivityFeed,
	ActivityFeedContent,
	ActivityFeedDescription,
	ActivityFeedDetails,
	ActivityFeedHeader,
	ActivityFeedItem,
	ActivityFeedMedia,
	ActivityFeedSummary,
	ActivityFeedTime,
} from "@mizen-labs/ui";

Anatomy

The parts and how they nest, taken from the preview above.

<ActivityFeed>
	<ActivityFeedItem>
		<ActivityFeedMedia />
		<ActivityFeedContent>
			<ActivityFeedHeader>
				<ActivityFeedSummary />
				<ActivityFeedTime />
			</ActivityFeedHeader>
			<ActivityFeedDetails />
			<ActivityFeedDescription />
		</ActivityFeedContent>
	</ActivityFeedItem>
</ActivityFeed>

Examples

Compact activity

People, actions, and timestamps in aligned rows.

Grouped by day

Date headings separate chronological event groups.

Review request

Rich details and a working acknowledgement action.

Empty activity

A clear starting point before events arrive.

Loading activity

A named loading state with hidden placeholder rows.

Load failure and recovery

An application-owned error state with a working retry using sample events.

Recommendations

GuidancePractice
Do

Use a consistent chronological order. Include the actor, action, and a meaningful timestamp.

Usage boundaries

GuidanceBoundary
Scope

Use Task List for progress through planned work. The application supplies and orders events.

API reference

Public props from @mizen-labs/ui. Use exported prop types for the complete TypeScript contract.

PropTypeDefaultDescription
ActivityFeedActivityFeedProps<ol>Ordered event list.
ActivityFeedItemActivityFeedItemProps<li>Responsive event row with optional media, content, and a timestamp.
ActivityFeedContentActivityFeedContentProps<div>A wrapping content column for summary, description, details, and actions.
variant'default' | 'timeline'defaultUses divided rows or a continuous thread behind optional media.
ActivityFeedHeaderActivityFeedHeaderProps<div>Aligns the summary and time while allowing rich content to use the full column below.
ActivityFeedMediaActivityFeedMediaProps<div>36px avatar or decorative event icon, aligned with the summary.
ActivityFeedSummaryActivityFeedSummaryProps<p>Primary event text at body size.
ActivityFeedDescriptionActivityFeedDescriptionProps<p>Muted supporting event text.
ActivityFeedDetailsActivityFeedDetailsProps<div>Inset surface for comments, attachments, and supporting content.
ActivityFeedTimeActivityFeedTimeProps<time>Requires dateTime and caller-formatted text.
PreviousToastNextAvatar

Activity log

Tuesday, 13 October

  1. Maya Chen changed Input states to Completed

    09:42 UTC

  2. Alex Rivera commented on Input states

    09:31 UTC
    The focus treatment feels much clearer now. Let’s use this spacing across the remaining controls, and check the disabled states in both themes before release.

  3. Lina Park added tags

    09:18 UTC

    Accessibility Keyboard

  4. Theo Martin uploaded input-state-review.csv

    09:04 UTC

    CSV · 4 review checks

  5. Maya Chen mentioned you in Release review

    08:47 UTC
    @Sam The keyboard pass is ready for review. Could you check the focus order and disabled controls before we publish?

  6. Alex Rivera assigned MIZ-142

    08:30 UTC

    Assigned to Lina Park

Monday, 12 October

  1. Lina Park commented on Mobile navigation

    16:24 UTC
    The narrower layout reads well. We should keep the same alignment when the labels wrap to a second line.

  2. Theo Martin changed Mobile navigation to In progress

    15:10 UTC

  1. Maya Chen

    deployed v0.8 to production

    09:42 UTC

  2. Alex Rivera

    merged fix/input-focus into main

    09:31 UTC

  3. Lina Park

    opened Mobile navigation review

    08:10 UTC

13 October

  1. Alex Rivera merged the focus fix

    Input · Reviewed by Maya Chen

    09:31 UTC

12 October

  1. Maya Chen started a design review

    Check the latest component changes before release.

    16:00 UTC

  1. Maya Chen requested your review

    Component accessibility and keyboard states.

    The changes are ready. Please check the disabled states and keyboard focus.

    Open input documentation

    Waiting for your review.

    09:42 UTC

No activity yet

Updates will appear here when your team starts working on this project.

Loading recent activity…

Activity couldn’t load

Your project is safe. Try loading the recent updates again.