Timeline

List of elements displayed in chronological order.

Import

import { Timeline } from "reshaped";
import type { TimelineProps, TimelineItemProps } from "reshaped";

Storybook

Timeline stories

Esther Naomi
·
Yesterday
For a dedicated Design System, we need consistent ui regardless how we compose it. Here the Slots pattern solve those problem perfectly, we can compose our components with both flexibility and consistency.
Paul Farell
·
30 minutes ago
I think it would be worth bringing this example into this RFC pretty much verbatim.

Usage

Timeline is a compound component that works directly with its children by default and automatically wraps them with Timeline.Item. Therefore, each child component you pass to it is treated as a separate item.

<Timeline>
  <View backgroundColor="neutral-faded" height={10} />
  <View backgroundColor="neutral-faded" height={10} />
</Timeline>

You can also wrap children items with Timeline.Item manually in case you want to change any of its props. For example, you can change the default marker to any other content. One of the most popular options is to use it for rendering icons.

function Component() {
  const marker = <Icon svg={<ActivityIcon />} size={5} color="neutral-faded" />;

  return (
    <Timeline>
      <Timeline.Item markerSlot={marker}>
        <View backgroundColor="neutral-faded" height={10} />
      </Timeline.Item>
      <Timeline.Item markerSlot={marker}>
        <View backgroundColor="neutral-faded" height={10} />
      </Timeline.Item>
    </Timeline>
  );

<Timeline>
  <Timeline.Item markerSlot={null}>
    <Card>
      <View backgroundColor="neutral-faded" height={10} />
    </Card>
  </Timeline.Item>
  <Timeline.Item markerSlot={null}>
    <Card>
      <View backgroundColor="neutral-faded" height={10} />
    </Card>
  </Timeline.Item>
</Timeline>

Text field

Toast