Uranus Design System

ActivityFeed renderiza uma <ol> de eventos (actor + action + opcional target + timestamp). Cada item compõe o primitivo Avatar e suporta um pequeno ícone decorativo no canto inferior direito do avatar. A composição usa ActivityFeed.Item como children — sem array de configuração.

AC
Alice Costa criou Projeto Apollo
há 2 minutos
BL
Bruno Lima aprovou PR #142
há 1 hora
CS
Camila Souza abriu PR #141
há 3 horas
SY
Sistema completou o deploy de main
há 6 horas

'use client';
import { ActivityFeed } from '@uranus-workspace/blocks';
import { CheckCircle2, GitPullRequest, Plus } from 'lucide-react';

export default function ActivityFeedDefault() {
  return (
    <ActivityFeed className="w-full max-w-md">
      <ActivityFeed.Item
        actor={{ name: 'Alice Costa' }}
        action="criou"
        target="Projeto Apollo"
        timestamp="há 2 minutos"
        icon={<Plus className="size-2.5" />}
      />
      <ActivityFeed.Item
        actor={{ name: 'Bruno Lima' }}
        action="aprovou"
        target="PR #142"
        timestamp="há 1 hora"
        icon={<CheckCircle2 className="size-2.5" />}
      />
      <ActivityFeed.Item
        actor={{ name: 'Camila Souza' }}
        action="abriu"
        target="PR #141"
        timestamp="há 3 horas"
        icon={<GitPullRequest className="size-2.5" />}
      />
      <ActivityFeed.Item
        actor={{ name: 'Sistema', initials: 'SY' }}
        action="completou o deploy de"
        target="main"
        timestamp="há 6 horas"
      />
    </ActivityFeed>
  );
}

Uso

import { ActivityFeed } from '@uranus-workspace/blocks';
import { CheckCircle2, Plus } from 'lucide-react';

<ActivityFeed>
  <ActivityFeed.Item
    actor={{ name: 'Alice Costa' }}
    action="criou"
    target="Projeto Apollo"
    timestamp="há 2 minutos"
    icon={<Plus className="size-2.5" />}
  />
  <ActivityFeed.Item
    actor={{ name: 'Bruno Lima' }}
    action="aprovou"
    target="PR #142"
    timestamp="há 1 hora"
    icon={<CheckCircle2 className="size-2.5" />}
  />
</ActivityFeed>

Estado vazio

Quando não houver itens, renderize ActivityFeed.Empty no lugar da lista:

<ActivityFeed.Empty>
  <p className="text-sm text-muted-foreground">Sem atividades ainda.</p>
</ActivityFeed.Empty>

Subcomponentes

ActivityFeed.Item — <li> com actor, action, target?, timestamp, icon?.
ActivityFeed.Empty — role="status" para anunciar a lista vazia.

Acessibilidade

A lista é uma <ol> para que tecnologias assistivas anunciem ordem cronológica.
Avatares mostram iniciais derivadas do nome quando avatarUrl ausente. Você pode passar initials explícito para overrides.

ActivityFeed

Uso

Estado vazio

Subcomponentes

Acessibilidade

On this page