Timeline
Display dated activity and milestones with readable descriptions and optional actions.
Installation
Import from @gaudi/design-system. Load @gaudi/design-system/global.css once and add transpilePackages: ['@gaudi/design-system'] in Next.js.
Copy an example into your project with the shadcn CLI: npx shadcn@latest add https://design.gaudi.site/r/timeline-activity-stream.json.
Usage
Examples
Activity stream
Alternating milestones
Release changelog
Horizontal releases
Pipeline steps
Vertical progress
API
3 props
Accessibility
Use machine-readable dateTime values with visible dates. Icons supplement the text and are decorative.
Related
AttachmentFile attachments with metadata, previews, actions and upload states.4 examplesAvatarProfile images, resilient initials, presence, verification, account menus and collaborator groups. The existing Avatar API and curated patterns share the same image and fallback primitives.10 examplesDropdownMenuAction menus with keyboard navigation, checkbox choices and destructive actions.8 examplesPillPill renders compact category and status labels.4 examplesAccordionRich disclosure for FAQs, settings, member directories, nested help, and guided setup. Eleven patterns use Gaudi tokens, icons, avatars, cards, and pills.12 examplesCardCard frames reusable content with title, subtitle, and optional children.8 examples