Skip to content
Docs

Timeline

@hua-labs/ui/advanced
v1.1.0

bash
npm install @hua-labs/hua
tsx
import { Timeline } from "@hua-labs/ui/advanced";

Pro

  1. Project Started완료

    Initial project setup and planning phase completed

  2. Development Phase진행 중

    Core features implementation in progress

  3. Testing대기

    Quality assurance and bug fixes

  4. Launch대기

    Production deployment

  1. Completed Task완료

    This task is done

  2. Active Task진행 중

    Working on this now

  3. Pending Task대기

    Not started yet

  4. Error Task오류

    Something went wrong

  5. Warning경고

    Needs attention

  6. Info정보

    For your information

align="left"

  1. Step 1완료
  2. Step 2진행 중
  3. Step 3대기

align="alternate"

  1. Step 1완료
  2. Step 2진행 중
  3. Step 3대기

items*TimelineItem[]-Array of timeline items
orientation"vertical" | "horizontal""vertical"Timeline orientation
align"left" | "right" | "alternate""left"Item alignment
size"sm" | "md" | "lg""md"Timeline size
showConnectorbooleantrueShow connector line between items
highlightedIdstring-ID of highlighted item
localestring"ko-KR"Locale for date formatting
emptyStateReact.ReactNode-Custom empty state

TimelineItem

id*string-Unique identifier
title*string-Item title
descriptionstring-Item description
datestring | Date-Item date
iconIconName | React.ReactNode-Item icon
status"pending" | "active" | "completed" | "error" | "warning" | "info""pending"Item status
metastring-Additional meta information
contentReact.ReactNode-Custom content

docs:common.basicUsagetsx
1import { Timeline } from '@hua-labs/ui/advanced';
2 
3const items = [
4  {
5    id: "1",
6    title: "시작",
7    description: "프로젝트 시작",
8    date: "2024-01-01",
9    status: "completed",
10  },
11  {
12    id: "2",
13    title: "진행 중",
14    description: "개발 진행",
15    date: "2024-01-15",
16    status: "active",
17  },
18  {
19    id: "3",
20    title: "완료 예정",
21    description: "배포 예정",
22    date: "2024-02-01",
23    status: "pending",
24  },
25];
26 
27<Timeline items={items} />
docs:components.timeline.examples.withIconstsx
1import { Timeline } from '@hua-labs/ui/advanced';
2import { CheckCircle, Clock, Rocket } from "@phosphor-icons/react";
3 
4const items = [
5  {
6    id: "1",
7    title: "Launched",
8    icon: <Rocket weight="fill" />,
9    status: "completed",
10  },
11  {
12    id: "2",
13    title: "In Progress",
14    icon: <Clock weight="fill" />,
15    status: "active",
16  },
17];
18 
19<Timeline items={items} />
docs:components.timeline.examples.alternatetsx
1<Timeline
2  items={items}
3  align="alternate"
4  size="lg"
5/>

  • •docs:components.timeline.accessibility.semanticHtml: docs:components.timeline.accessibility.semanticHtmlDesc
  • •docs:components.timeline.accessibility.statusColors: docs:components.timeline.accessibility.statusColorsDesc
CodeBlockNavigation