Activity feed

Web and mobile — the same component for React and React Native. Beta: its API may still change in a minor version.

Installation

npm install @krizaka/ui @krizaka/tailwind @krizaka/tokens tailwindcss

@import "tailwindcss";
@import "@krizaka/tailwind";
@import "@krizaka/ui/tailwind.css";

import { ActivityFeed, Timeline } from "@krizaka/ui/activity-feed";

Examples

Props

Accessibility

• Days are headings; each time is a time with its full date.
• live announces how many new events arrived, politely, never each one.

Best practices

• Write each event as a sentence (“Mina tipped your video $5”), passed translated.
• Give actor and kind to fold repeated events.
• Pass now from the server to render the same “… ago” on both sides.

Related components

• ListRecords read top to bottom — a leading visual, a title and a line, details and actions beside — dense or comfortable, selectable, windowed when long.
• StepperThe steps of a journey or a job: done steps checked, the current one traced by the Krizaka glyph (growing to its value), failures crossed, connectors that fill — and every state said in words.
• ToastA short message that comes and goes — with the time it has left drawn and paused under the pointer, an undo that waits before an action is final, a long task updated in place, and repeats folded into one toast that counts.

Generated from the code of @krizaka/ui 3.5.0: its meta.ts, its examples and its types.Edit this documentation on GitHub