Timeline

Vertical event timeline.

import { Timeline } from '@ybouhjira/hyperkit';

#Playground

Edit the code — the preview recompiles and re-renders as you type.

Loading preview…

#More Examples

Horizontal

<Timeline
  steps={[
      { title: 'Order placed', status: 'completed' },
      { title: 'Processing', status: 'active' },
      { title: 'Shipped', status: 'pending' },
      { title: 'Delivered', status: 'pending' }
    ]}
  orientation="horizontal"
/>

With Meta

<Timeline
  steps={[
      {
        title: 'Account created',
        status: 'completed',
        meta: 'Jan 1, 2024'
      },
      {
        title: 'Email verified',
        status: 'completed',
        meta: 'Jan 2, 2024'
      },
      {
        title: 'Profile completed',
        status: 'active',
        meta: 'Just now'
      },
      { title: 'Start using app', status: 'pending' }
    ]}
/>

#Props

Prop	Type	Default	Description
`steps` *	`TimelineStep[]`	—	Array of timeline steps.
`orientation`	`'vertical' \| 'horizontal'`	`'vertical'`	Timeline orientation.
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Size preset.
`class`	`string`	—	Additional CSS classes.
`style`	`JSX.CSSProperties`	—	Custom styles.

* required prop.

#Design Tokens

This component reads the following CSS custom properties. Override them globally or per-instance to restyle it — see the CSS Variables guide.

--sk-accent
--sk-accent-muted
--sk-bg-tertiary
--sk-border
--sk-font-size-base
--sk-font-size-sm
--sk-font-size-xs
--sk-space-lg
--sk-space-md
--sk-space-xs
--sk-success
--sk-text-muted
--sk-text-primary
--sk-text-secondary