Display

Timeline

Stagger-animated spatial line indicating item chronologies and status updates.

Basic Timeline

Standard chronological sequence rendering item status changes with fine spatial outline grids.

10:00 AM

Project Created

Initial codebase scaffold initialized on server.

11:30 AM

Testing Complete

Unit test suite passed successfully with 100% test coverage.

01:15 PM

Deployed to Staging

Static assets uploaded to staging edge nodes.

'use client'

import React from 'react'
import { Timeline } from 'biibaos'

export default function TimelineDemo() {
  const steps = [
    { title: 'Project Created', description: 'Initial codebase scaffold initialized on server.', timestamp: '10:00 AM', active: true },
    { title: 'Testing Complete', description: 'Unit test suite passed successfully with 100% test coverage.', timestamp: '11:30 AM', active: true },
    { title: 'Deployed to Staging', description: 'Static assets uploaded to staging edge nodes.', timestamp: '01:15 PM' },
  ]

  return (
    <div style={{ maxWidth: 500, width: '100%' }}>
      <Timeline items={steps} />
    </div>
  )
}

Alternating Nodes

Splits timeline items left and right for high-end editorial layouts (automatically aligns left on mobile).

Monday

Idea Generated

Initial concept brainstorm with stakeholders.

Wednesday

MVP Design

Interface mockups built using Tahoe primitives.

Friday

V2 Launch

Production bundle successfully deployed to live users.

'use client'

import React from 'react'
import { Timeline, Icon } from 'biibaos'
import { Flame, Check, Award } from 'lucide-react'

export default function AlternatingTimelineDemo() {
  const steps = [
    { title: 'Idea Generated', description: 'Initial concept brainstorm.', timestamp: 'Monday', active: true, icon: <Icon icon={Flame} size={14} /> },
    { title: 'MVP Design', description: 'Interface mockups built.', timestamp: 'Wednesday', active: true, icon: <Icon icon={Check} size={14} /> },
    { title: 'V2 Launch', description: 'Production bundle deployed.', timestamp: 'Friday', icon: <Icon icon={Award} size={14} /> },
  ]

  return (
    <div style={{ maxWidth: 700, width: '100%' }}>
      <Timeline align="alternate" items={steps} />
    </div>
  )
}

Properties

Prop	Type	Default	Description
`items`	`TimelineItem[]`	—	Array of timeline items with title, timestamp, active status, and custom icon slots
`align`	`'left' \| 'alternate'`	'left'	Central alignment pattern for timeline cards on large screens

Tooltip

Pagination