We shipped your product via FedEx and it should arrive within 3-5 business days.
Usage
import { Timeline } from "chakra-ui-solid";<Timeline.Root>
<Timeline.Item>
<Timeline.Connector>
<Timeline.Separator />
<Timeline.Indicator />
</Timeline.Connector>
<Timeline.Content>
<Timeline.Title />
<Timeline.Description />
</Timeline.Content>
</Timeline.Item>
</Timeline.Root>Examples
Sizes
Use the size prop to change the size of the timeline.
Variants
Use the variant prop to change the variant of the timeline.
Content Before
Here’s an example of a timeline with content before the timeline indicator.
Alternating Content
Here’s an example of a timeline with alternating content.
Composition
Here’s an example of how to compose the timeline with other components to create a consistent-looking timeline.
Props
Root
| Prop | Default | Type |
|---|---|---|
showLastSeparator | false | ConditionalValue<boolean>Whether the line continues past the last item. It sets `--timeline-separator-display` on the last item, which is the only thing that hides that item's separator. |
size | 'md' | ConditionalValue<'sm' | 'md' | 'lg' | 'xl' | PresetVariant<'timeline', 'size'>>The diameter of the indicator, the glyph inside it, and the title's type scale. |
variant | 'solid' | ConditionalValue<'subtle' | 'solid' | 'outline' | 'plain' | PresetVariant<'timeline', 'variant'>>How the indicator is filled — `solid` and `subtle` tint it, `outline` rings it, `plain` leaves it bare. |
Plus HTMLChakraProps<"div"> — the whole style-prop surface and the DOM attributes of the element it renders, several hundred names listed as their sources rather than expanded — and the three every component takes: as, render and unstyled.