Product Shipped
13th May 2021
We shipped your product via FedEx and it should arrive within 3-5 business days.
Order Confirmed
18th May 2021
Order Delivered
20th May 2021, 10:30am
'use client'
import { Text } from '@chakra-ui/react'
import { Timeline } from '@saas-ui/react'
import { LuCheck, LuPackage, LuShip } from 'react-icons/lu'
export const TimelineBasic = () => {
return (
<Timeline.Root maxW="400px">
<Timeline.Item>
<Timeline.Connector>
<LuShip />
</Timeline.Connector>
<Timeline.Content>
<Timeline.Title>Product Shipped</Timeline.Title>
<Timeline.Description>13th May 2021</Timeline.Description>
<Text textStyle="sm">
We shipped your product via <strong>FedEx</strong> and it should
arrive within 3-5 business days.
</Text>
</Timeline.Content>
</Timeline.Item>
<Timeline.Item>
<Timeline.Connector>
<LuCheck />
</Timeline.Connector>
<Timeline.Content>
<Timeline.Title textStyle="sm">Order Confirmed</Timeline.Title>
<Timeline.Description>18th May 2021</Timeline.Description>
</Timeline.Content>
</Timeline.Item>
<Timeline.Item>
<Timeline.Connector>
<LuPackage />
</Timeline.Connector>
<Timeline.Content>
<Timeline.Title textStyle="sm">Order Delivered</Timeline.Title>
<Timeline.Description>20th May 2021, 10:30am</Timeline.Description>
</Timeline.Content>
</Timeline.Item>
</Timeline.Root>
)
}
import { Timeline } from '@saas-ui/react/timeline'<Timeline.Root>
<Timeline.Item />
<Timeline.Item />
</Timeline.Root>Use the size prop to change the size of the timeline.
S
sagecreated a new project
sagechanged status from In progress to Completed
S
sagecreated a new project
sagechanged status from In progress to Completed
S
sagecreated a new project
sagechanged status from In progress to Completed
S
sagecreated a new project
sagechanged status from In progress to Completed
'use client'
import { Badge, For, Span, Stack } from '@chakra-ui/react'
import { Avatar, Timeline } from '@saas-ui/react'
import { LuCheck } from 'react-icons/lu'
export const TimelineWithSizes = () => {
return (
<Stack gap="8">
<For each={['sm', 'md', 'lg', 'xl']}>
{(size) => (
<Timeline.Root key={size} size={size}>
<Timeline.Item>
<Timeline.Connector>
<Avatar
size="full"
name="Sage"
src="https://bit.ly/sage-adebayo"
/>
</Timeline.Connector>
<Timeline.Content textStyle="xs">
<Timeline.Title>
<Span fontWeight="medium">sage</Span>
created a new project
</Timeline.Title>
</Timeline.Content>
</Timeline.Item>
<Timeline.Item>
<Timeline.Connector>
<LuCheck />
</Timeline.Connector>
<Timeline.Content textStyle="xs">
<Timeline.Title mt={size === 'sm' ? '-2px' : undefined}>
<Span fontWeight="medium">sage</Span>
changed status from <Badge size="sm">
In progress
</Badge> to{' '}
<Badge colorPalette="teal" size="sm">
Completed
</Badge>
</Timeline.Title>
</Timeline.Content>
</Timeline.Item>
</Timeline.Root>
)}
</For>
</Stack>
)
}
Use the variant prop to change the variant of the timeline.
S
sagecreated a new project
sagechanged status from In progress to Completed
S
sagecreated a new project
sagechanged status from In progress to Completed
S
sagecreated a new project
sagechanged status from In progress to Completed
S
sagecreated a new project
sagechanged status from In progress to Completed
'use client'
import { Badge, For, Span, Stack } from '@chakra-ui/react'
import { Avatar, Timeline } from '@saas-ui/react'
import { LuCheck } from 'react-icons/lu'
export const TimelineWithVariants = () => {
return (
<Stack gap="16">
<For each={['subtle', 'solid', 'outline', 'plain']}>
{(variant) => (
<Timeline.Root variant={variant} key={variant}>
<Timeline.Item>
<Timeline.Connector>
<Avatar
size="full"
name="Sage"
src="https://bit.ly/sage-adebayo"
/>
</Timeline.Connector>
<Timeline.Content>
<Timeline.Title>
<Span fontWeight="medium">sage</Span>
created a new project
</Timeline.Title>
</Timeline.Content>
</Timeline.Item>
<Timeline.Item>
<Timeline.Connector>
<LuCheck />
</Timeline.Connector>
<Timeline.Content>
<Timeline.Title>
<Span fontWeight="medium">sage</Span>
changed status from <Badge>In progress</Badge> to{' '}
<Badge colorPalette="teal">Completed</Badge>
</Timeline.Title>
</Timeline.Content>
</Timeline.Item>
</Timeline.Root>
)}
</For>
</Stack>
)
}
Here's an example of a timeline with content before the timeline indicator.
Nov 1994
1
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Nov 2010
2
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Nov 1994
1
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Nov 2010
2
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Nov 1994
1
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Nov 2010
2
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
'use client'
import { For, Stack } from '@chakra-ui/react'
import { Timeline } from '@saas-ui/react'
export const TimelineWithContentBefore = () => {
return (
<Stack gap="8">
<For each={['sm', 'md', 'lg']}>
{(size) => (
<Timeline.Root size={size} key={size}>
<Timeline.Item>
<Timeline.Content width="auto">
<Timeline.Title whiteSpace="nowrap">Nov 1994</Timeline.Title>
</Timeline.Content>
<Timeline.Connector>1</Timeline.Connector>
<Timeline.Content>
<Timeline.Title>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</Timeline.Title>
</Timeline.Content>
</Timeline.Item>
<Timeline.Item>
<Timeline.Content width="auto">
<Timeline.Title whiteSpace="nowrap">Nov 2010</Timeline.Title>
</Timeline.Content>
<Timeline.Connector>2</Timeline.Connector>
<Timeline.Content>
<Timeline.Title>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</Timeline.Title>
</Timeline.Content>
</Timeline.Item>
</Timeline.Root>
)}
</For>
</Stack>
)
}
Here's an example of a timeline with alternating content.
Placed Order
Prepared Order
Order Delivered
'use client'
import { Timeline } from '@saas-ui/react'
export const TimelineAlternating = () => {
return (
<Timeline.Root size="sm" variant="outline">
<Timeline.Item>
<Timeline.Content flex="1" />
<Timeline.Connector />
<Timeline.Content flex="1">
<Timeline.Title>Placed Order</Timeline.Title>
</Timeline.Content>
</Timeline.Item>
<Timeline.Item>
<Timeline.Content flex="1" alignItems="flex-end">
<Timeline.Title>Prepared Order</Timeline.Title>
</Timeline.Content>
<Timeline.Connector />
<Timeline.Content flex="1" />
</Timeline.Item>
<Timeline.Item>
<Timeline.Content flex="1" />
<Timeline.Connector />
<Timeline.Content flex="1">
<Timeline.Title>Order Delivered</Timeline.Title>
</Timeline.Content>
</Timeline.Item>
</Timeline.Root>
)
}
| Prop | Default | Type |
|---|---|---|
colorPalette | 'gray' | 'gray' | 'red' | 'orange' | 'yellow' | 'green' | 'teal' | 'blue' | 'cyan' | 'purple' | 'pink' | 'accent'The color palette of the component |
variant | 'solid' | 'subtle' | 'solid' | 'outline' | 'plain'The variant of the component |
size | 'md' | 'sm' | 'md'The size of the component |