UI

Command Palette

Search for a command...

Timeline

A component to display a timeline of events.

  1. Eat
    Because you need strength
  2. Code
    Because it's awesome!
  3. Sleep
    Because you need rest
  4. Repeat
    Because this is the life you love!
import {
  Timeline,
  TimelineConnector,
  TimelineContent,
  TimelineDescription,
  TimelineDot,
  TimelineItem,
  TimelineSeparator,
  TimelineTitle,
} from "@/components/ui/timeline";

export default function TimelineDemo() {
  return (
    <Timeline>
      <TimelineItem>
        <TimelineSeparator>
          <TimelineDot />
          <TimelineConnector />
        </TimelineSeparator>
        <TimelineContent>
          <TimelineTitle>Eat</TimelineTitle>
          <TimelineDescription>Because you need strength</TimelineDescription>
        </TimelineContent>
      </TimelineItem>
      <TimelineItem>
        <TimelineSeparator>
          <TimelineDot />
          <TimelineConnector />
        </TimelineSeparator>
        <TimelineContent>
          <TimelineTitle>Code</TimelineTitle>
          <TimelineDescription>Because it&apos;s awesome!</TimelineDescription>
        </TimelineContent>
      </TimelineItem>
      <TimelineItem>
        <TimelineSeparator>
          <TimelineDot />
          <TimelineConnector />
        </TimelineSeparator>
        <TimelineContent>
          <TimelineTitle>Sleep</TimelineTitle>
          <TimelineDescription>Because you need rest</TimelineDescription>
        </TimelineContent>
      </TimelineItem>
      <TimelineItem>
        <TimelineSeparator>
          <TimelineDot />
        </TimelineSeparator>
        <TimelineContent>
          <TimelineTitle>Repeat</TimelineTitle>
          <TimelineDescription>Because this is the life you love!</TimelineDescription>
        </TimelineContent>
      </TimelineItem>
    </Timeline>
  );
}

Installation

npx nore-ui-cli@latest add timeline

Usage

import {
  Timeline,
  TimelineConnector,
  TimelineContent,
  TimelineDescription,
  TimelineDot,
  TimelineItem,
  TimelineSeparator,
  TimelineTitle,
} from "@/components/ui/timeline";

<Timeline>
  <TimelineItem>
    <TimelineSeparator>
      <TimelineDot />
      <TimelineConnector />
    </TimelineSeparator>
    <TimelineContent>
      <TimelineTitle>Eat</TimelineTitle>
      <TimelineDescription>Because you need strength</TimelineDescription>
    </TimelineContent>
  </TimelineItem>
  <TimelineItem>
    <TimelineSeparator>
      <TimelineDot />
      <TimelineConnector />
    </TimelineSeparator>
    <TimelineContent>
      <TimelineTitle>Code</TimelineTitle>
      <TimelineDescription>Because it's awesome!</TimelineDescription>
    </TimelineContent>
  </TimelineItem>
  <TimelineItem>
    <TimelineSeparator>
      <TimelineDot />
      <TimelineConnector />
    </TimelineSeparator>
    <TimelineContent>
      <TimelineTitle>Sleep</TimelineTitle>
      <TimelineDescription>Because you need rest</TimelineDescription>
    </TimelineContent>
  </TimelineItem>
  <TimelineItem>
    <TimelineSeparator>
      <TimelineDot />
    </TimelineSeparator>
    <TimelineContent>
      <TimelineTitle>Repeat</TimelineTitle>
      <TimelineDescription>Because this is the life you love!</TimelineDescription>
    </TimelineContent>
  </TimelineItem>
</Timeline>

Examples

Alternate

  1. Eat
    Because you need strength
  2. Code
    Because it's awesome!
  3. Sleep
    Because you need rest
  4. Repeat
    Because this is the life you love!
import {
  Timeline,
  TimelineConnector,
  TimelineContent,
  TimelineDescription,
  TimelineDot,
  TimelineItem,
  TimelineSeparator,
  TimelineTitle,
} from "@/components/ui/timeline";

export default function TimelineAlternate() {
  return (
    <Timeline>
      <TimelineItem css={{ _before: { content: "''", flex: "1" } }}>
        <TimelineSeparator>
          <TimelineDot variant="outline" />
          <TimelineConnector />
        </TimelineSeparator>
        <TimelineContent>
          <TimelineTitle>Eat</TimelineTitle>
          <TimelineDescription>Because you need strength</TimelineDescription>
        </TimelineContent>
      </TimelineItem>
      <TimelineItem css={{ _after: { content: "''", flex: "1" } }}>
        <TimelineContent>
          <TimelineTitle>Code</TimelineTitle>
          <TimelineDescription>Because it&apos;s awesome!</TimelineDescription>
        </TimelineContent>
        <TimelineSeparator>
          <TimelineDot variant="outline" />
          <TimelineConnector />
        </TimelineSeparator>
      </TimelineItem>
      <TimelineItem css={{ _before: { content: "''", flex: "1" } }}>
        <TimelineSeparator>
          <TimelineDot variant="outline" />
          <TimelineConnector />
        </TimelineSeparator>
        <TimelineContent>
          <TimelineTitle>Sleep</TimelineTitle>
          <TimelineDescription>Because you need rest</TimelineDescription>
        </TimelineContent>
      </TimelineItem>
      <TimelineItem css={{ _after: { content: "''", flex: "1" } }}>
        <TimelineContent>
          <TimelineTitle>Repeat</TimelineTitle>
          <TimelineDescription>Because this is the life you love!</TimelineDescription>
        </TimelineContent>
        <TimelineSeparator>
          <TimelineDot variant="outline" />
        </TimelineSeparator>
      </TimelineItem>
    </Timeline>
  );
}

With Icon

  1. Eat
    Because you need strength
  2. Code
    Because it's awesome!
  3. Sleep
    Because you need rest
  4. Repeat
    Because this is the life you love!
import { LuCode, LuHeart, LuMoon, LuPizza } from "react-icons/lu";
import {
  Timeline,
  TimelineConnector,
  TimelineContent,
  TimelineDescription,
  TimelineDot,
  TimelineItem,
  TimelineSeparator,
  TimelineTitle,
} from "@/components/ui/timeline";

export default function TimelineWithIcon() {
  return (
    <Timeline>
      <TimelineItem>
        <TimelineSeparator>
          <TimelineDot>
            <LuPizza />
          </TimelineDot>
          <TimelineConnector />
        </TimelineSeparator>
        <TimelineContent>
          <TimelineTitle>Eat</TimelineTitle>
          <TimelineDescription>Because you need strength</TimelineDescription>
        </TimelineContent>
      </TimelineItem>
      <TimelineItem>
        <TimelineSeparator>
          <TimelineDot>
            <LuCode />
          </TimelineDot>
          <TimelineConnector />
        </TimelineSeparator>
        <TimelineContent>
          <TimelineTitle>Code</TimelineTitle>
          <TimelineDescription>Because it&apos;s awesome!</TimelineDescription>
        </TimelineContent>
      </TimelineItem>
      <TimelineItem>
        <TimelineSeparator>
          <TimelineDot>
            <LuMoon />
          </TimelineDot>
          <TimelineConnector />
        </TimelineSeparator>
        <TimelineContent>
          <TimelineTitle>Sleep</TimelineTitle>
          <TimelineDescription>Because you need rest</TimelineDescription>
        </TimelineContent>
      </TimelineItem>
      <TimelineItem>
        <TimelineSeparator>
          <TimelineDot>
            <LuHeart />
          </TimelineDot>
        </TimelineSeparator>
        <TimelineContent>
          <TimelineTitle>Repeat</TimelineTitle>
          <TimelineDescription>Because this is the life you love!</TimelineDescription>
        </TimelineContent>
      </TimelineItem>
    </Timeline>
  );
}

Horizontal

  1. Ordered
    9.15 AM, January 1, 2024
  2. Shipped
    12:20 PM, January 4, 2024
  3. Out for Delivery
    07:00 AM, January 8, 2024
import { LuPackageCheck, LuShoppingCart, LuTruck } from "react-icons/lu";
import {
  Timeline,
  TimelineConnector,
  TimelineContent,
  TimelineDescription,
  TimelineDot,
  TimelineItem,
  TimelineSeparator,
  TimelineTitle,
} from "@/components/ui/timeline";

export default function TimelineHorizontal() {
  return (
    <Timeline orientation="horizontal" css={{ minH: "40" }}>
      <TimelineItem css={{ _before: { content: "''", flex: "1" } }}>
        <TimelineSeparator>
          <TimelineDot>
            <LuShoppingCart />
          </TimelineDot>
          <TimelineConnector />
        </TimelineSeparator>
        <TimelineContent>
          <TimelineTitle>Ordered</TimelineTitle>
          <TimelineDescription css={{ whiteSpace: "nowrap" }}>
            9.15 AM, January 1, 2024
          </TimelineDescription>
        </TimelineContent>
      </TimelineItem>
      <TimelineItem css={{ _after: { content: "''", flex: "1" } }}>
        <TimelineContent>
          <TimelineTitle>Shipped</TimelineTitle>
          <TimelineDescription css={{ whiteSpace: "nowrap" }}>
            12:20 PM, January 4, 2024
          </TimelineDescription>
        </TimelineContent>
        <TimelineSeparator>
          <TimelineDot>
            <LuPackageCheck />
          </TimelineDot>
          <TimelineConnector />
        </TimelineSeparator>
      </TimelineItem>
      <TimelineItem css={{ _before: { content: "''", flex: "1" } }}>
        <TimelineSeparator>
          <TimelineDot>
            <LuTruck />
          </TimelineDot>
          <TimelineConnector />
        </TimelineSeparator>
        <TimelineContent>
          <TimelineTitle>Out for Delivery</TimelineTitle>
          <TimelineDescription css={{ whiteSpace: "nowrap" }}>
            07:00 AM, January 8, 2024
          </TimelineDescription>
        </TimelineContent>
      </TimelineItem>
    </Timeline>
  );
}
TextareaToast