uix-uiTimeline
Activity feed + timeline. 3 statuses.
Order placed
Nusrat Jahan, Mirpur
Packing
Wrapped in the gift box
Out for delivery
import { Timeline, TimelineItem } from "@/components/ui/timeline";
export default function Example() {
return (
<Timeline style={{ width: 320, maxWidth: "100%" }}>
<TimelineItem status="done" title="Order placed" description="Nusrat Jahan, Mirpur" time="Mon 10:20 am" />
<TimelineItem status="current" title="Packing" description="Wrapped in the gift box" time="Mon 2:00 pm" />
<TimelineItem status="upcoming" title="Out for delivery" last />
</Timeline>
);
}
Installation
$ npx uix-ui@latest add timelineThis copies the file into components/ui/timeline.tsx in your project. npx shadcn@latest add @uix/timeline works too.
Usage
import { Timeline, TimelineItem } from "@/components/ui/timeline";
<Timeline style={{ width: 320, maxWidth: "100%" }}>
<TimelineItem status="done" title="Order placed" description="Nusrat Jahan, Mirpur" time="Mon 10:20 am" />
<TimelineItem status="current" title="Packing" description="Wrapped in the gift box" time="Mon 2:00 pm" />
<TimelineItem status="upcoming" title="Out for delivery" last />
</Timeline>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
status | done | current | upcoming | "done" | |
title | React.ReactNode | – | |
description | React.ReactNode | – | |
time | React.ReactNode | – | |
last | boolean | false | Hides the line below the dot (set it on the final item). |
Everything else is passed to the root element, so className, aria-* and event handlers work as usual.
Dependencies
Installed for you by the CLI.
class-variance-authorityclsxtailwind-merge
lib/utils.tscomponents/ui/icons.tsx
This file exports 2 parts: Timeline, TimelineItem. Use only the ones you need.