XiodUI
HomeDocs
OverviewComponentsStyling & CustomizationChangelog

Components

  • Accordion
  • Agent Steps
  • Alert
  • Alert Dialog
  • Aspect Ratio
  • Autocomplete
  • Avatar
  • Badge
  • Breadcrumb
  • Button
  • Button Group
  • Button Split
  • Calendar
  • Card
  • Carousel
  • Checkbox
  • Circular Progress
  • Collapsible
  • Color Picker
  • Combobox
  • Command
  • Context Menu
  • Copy To Clipboard
  • Corner Badge
  • Dashboard Grid
  • Date Picker
  • Dialog
  • Dot Matrix
  • Draggable
    Updated
  • Drawer
  • Empty
  • Field
  • Fieldset
  • File Upload
    Updated
  • Form
  • Frame
  • Gauge
  • Grid
  • Group
  • Input
  • Input Group
  • Input OTP
  • Input Payment
  • Input Phone
    Updated
  • Input Sensitive
  • Kbd
  • Kinetic Click
  • Label
  • List Box
    Updated
  • Loader
  • Marker
  • Menu
  • Menubar
  • Message
  • Meter
  • Morphic Toast
  • Navigation Menu
  • Number Field
  • Option Picker
  • Orb
  • Pagination
  • Popover
  • Preview Card
    Updated
  • Progress
  • Radio
  • Resizable
  • Ruler Picker
  • Scroll Area
  • Scroll Bar
  • Select
  • Separator
  • Sidebar
  • Skeleton
  • Slider
  • Sortable
  • Switch
  • Table
  • Tabs
  • Text
  • Textarea
  • Timeline
  • Toast
  • Toggle
  • Toggle Group
  • Toolbar
  • Tooltip
  • Waveform
  • Wheel Picker

Loading...

Preview Skeleton

Installation Skeleton

Usage Skeleton

API Reference Skeleton

Sponsors

Support the development of XiodUI and help us build the best component library on Earth.

+++
Sponsor on GitHub

Timeline

Previous: TextareaNext: Toast

Events or steps in order, vertical or horizontal, that can also track progress as a stepper.

Preview

Loading Preview...

Installation

bun add xiod-ui

Usage

Imports

1import {2  Timeline,3  TimelineItem,4  TimelineHeader,5  TimelineTitle,6  TimelineDate,7  TimelineContent,8  TimelineIndicator,9  TimelineSeparator,10  TimelineContext11} from "xiod-ui/timeline";

Anatomy

1<Timeline>2  <TimelineItem>3    <TimelineSeparator />4    <TimelineIndicator />5    <TimelineHeader>6      <TimelineTitle />7      <TimelineDate />8    </TimelineHeader>9    <TimelineContent />10  </TimelineItem>11</Timeline>

API Reference

Detailed documentation of properties and options.

Timeline

Accepts render, plus every native <div> attribute.

PropTypeDefaultDescription
defaultValue
number
–

The step that is active at first, when it isn't controlled. Items before it show as completed and items after it as pending.

labels
Partial<TimelineLabels>
TextareaToast
–

Replaces the built-in text for this instance. See LabelsProvider to change it everywhere.

onValueChange
((value: number) => void)
–

Called with the new step when the active step changes through setActiveStep from useTimeline.

orientation
"horizontal"|"vertical"
"vertical"

The direction the items run in.

value
number
–

The active step. Items before it show as completed and items after it as pending.

TimelineItem

Accepts render, plus every native <div> attribute.

PropTypeDefaultDescription
status
"completed"|"active"|"pending"
–

The item's status. Overrides the one worked out from step.

step
number
–

The item's position in the timeline, compared with the Timeline's value to work out its status.

TimelineHeader

Accepts render, plus every native <div> attribute.

TimelineTitle

Accepts render, plus every native <h3> attribute.

TimelineDate

Accepts render, plus every native <time> attribute.

TimelineContent

Accepts render, plus every native <div> attribute.

TimelineIndicator

Accepts render, plus every native <div> attribute.

PropTypeDefaultDescription
size
"lg"|"sm"|"default"
default

The size of the component.

variant
"default"|"solid"
default

The visual style of the component.

TimelineSeparator

Accepts render, plus every native <div> attribute.

TimelineContext

Accepts every native attribute of the element it renders.