Theme

Timeline

display @dryui/ui Compound

Vertical timeline for activity feeds and history

timelineactivityfeedhistoryevents

Start Here

Start from the smallest working snippet, then move to interactive examples and the full API contract below.

Styled quick start

Copy this entrypoint first. It includes the imports required to get the component on screen.

svelte
<script lang="ts">
  import '@dryui/ui/themes/default.css';
  import '@dryui/ui/themes/dark.css';
  import { Timeline } from '@dryui/ui';
</script>

<Timeline.Root>
  <Timeline.Item>...</Timeline.Item>
  <Timeline.Icon>...</Timeline.Icon>
  <Timeline.Content>...</Timeline.Content>
  <Timeline.Title>...</Timeline.Title>
  <Timeline.Description>...</Timeline.Description>
  <Timeline.Time>...</Timeline.Time>
</Timeline.Root>

Import options

Root package

ts
import { Timeline } from '@dryui/ui'

Per-component subpath

ts
import { Timeline } from '@dryui/ui/timeline'

Customize

Use the interactive examples to see common variants, states, and composition patterns before building your own.

Default

1

Project Started

Initial commit and project setup.

2

Beta Release

First public beta with core features.

3

v1.0 Launch

Stable release with full documentation.

svelte
<Timeline.Root>
  <Timeline.Item>
    <Timeline.Icon>1</Timeline.Icon>
    <Timeline.Content>
      <Timeline.Title>Project Started</Timeline.Title>
      <Timeline.Description>Initial commit and project setup.</Timeline.Description>
      <Timeline.Time datetime="2024-01-15">Jan 15, 2024</Timeline.Time>
    </Timeline.Content>
  </Timeline.Item>
  <Timeline.Item>
    <Timeline.Icon>2</Timeline.Icon>
    <Timeline.Content>
      <Timeline.Title>Beta Release</Timeline.Title>
      <Timeline.Description>First public beta with core features.</Timeline.Description>
      <Timeline.Time datetime="2024-03-01">Mar 1, 2024</Timeline.Time>
    </Timeline.Content>
  </Timeline.Item>
  <Timeline.Item>
    <Timeline.Icon>3</Timeline.Icon>
    <Timeline.Content>
      <Timeline.Title>v1.0 Launch</Timeline.Title>
      <Timeline.Description>Stable release with full documentation.</Timeline.Description>
      <Timeline.Time datetime="2024-06-01">Jun 1, 2024</Timeline.Time>
    </Timeline.Content>
  </Timeline.Item>
</Timeline.Root>

Structure

Compound components always start with Timeline.Root. Use this structure block to understand required wrappers before you wire state or styling.

Timeline.Root
  Timeline.Item
  Timeline.Icon
  Timeline.Content
  Timeline.Title
  Timeline.Description
  Timeline.Time
Timeline.Root Timeline.ItemTimeline.IconTimeline.ContentTimeline.TitleTimeline.DescriptionTimeline.Time

Compose

The full API contract lives here: props, CSS variables, and the public data attributes you can target when styling.

Compound component. Start with Timeline.Root, then add only the parts you need.

Timeline.ItemTimeline.IconTimeline.ContentTimeline.TitleTimeline.DescriptionTimeline.Time

Timeline.Root

Prop Type Default Required Bindable
orientation
verticalhorizontal
 'vertical' — —
children
Snippet
— ✓ —

Forwards <div> attributes via rest props. Common examples: id, style, role.

Timeline.Item

Prop Type Default Required Bindable
children
Snippet
— ✓ —

Forwards <div> attributes via rest props. Common examples: id, style, role.

Timeline.Icon

Prop Type Default Required Bindable
children
Snippet
— — —

Forwards <div> attributes via rest props. Common examples: id, style, role.

Timeline.Content

Prop Type Default Required Bindable
children
Snippet
— ✓ —

Forwards <div> attributes via rest props. Common examples: id, style, role.

Timeline.Title

Prop Type Default Required Bindable
level
123456
 3 — —
children
Snippet
— ✓ —

Forwards <h*> attributes via rest props. Common examples: id, style, aria-label.

Timeline.Description

Prop Type Default Required Bindable
children
Snippet
— ✓ —

Forwards <p> attributes via rest props. Common examples: id, style, aria-describedby.

Timeline.Time

Prop Type Default Required Bindable
datetime
string
— — —
children
Snippet
— ✓ —

Forwards <time> attributes via rest props. Common examples: datetime, id, aria-label.