Soon UI Design

Layout
Navigation
Input
Select
Display
Feedback

Timeline

수직 시간 순서 표시 컴포넌트입니다.

import { Timeline } from 'sud-ui';

GitHub에서 소스코드 보기

사용할 때

일련의 데이터를 수직 시간 순서로 표시할 때 사용합니다.

데이터 흐름을 시각화할 때 사용합니다.

사용예제

[2025-03-13] Soon UI Design Planning

[2025-03-25] sud-icons Design 50 icons

[2025-04-16] Theme System Draft

[2025-04-24] sud-ui First Phase Completion

[2025-05-11] Start docs page development

Basic Usage

기본적인 사용 방법입니다.

import { Timeline } from "sud-ui";

export default function App() {
  return (
    <Timeline
      items={[
        {
          key: "1",
          content: "[2025-03-13] Soon UI Design Planning"
        },
        {
          key: "2",
          content: "[2025-03-25] sud-icons Design 50 icons"
        },
        {
          key: "3",
          content: "[2025-04-16] Theme System Draft"
        },
        {
          key: "4",
          content: "[2025-04-24] sud-ui First Phase Completion"
        },
        {
          key: "5",
          content: "[2025-05-11] Start docs page development"
        }
      ]}
    />
  )
}

left

right

alternate

[2025-05-07] Soon UI Design Npm Package Release

[2025-05-20] Start English translation of docs page

[2025-05-27] Add mobile version to docs page

[2025-06-05] Bulk update of common props types for components

Mode

모드를 변경할 수 있습니다.

import { Timeline, Card, Radio } from "sud-ui";
import { useState } from "react";

export default function App() {
  const [mode, setMode] = useState("left");
  const modeOptions = [
    { label: "left", value: "left" },
    { label: "right", value: "right" },
    { label: "alternate", value: "alternate" }
  ];

  return (
    <div className="flex flex-col gap-[20px]">
      <Card style={{ width: "100%" }} shadow="none" colorType="sub">
        <div className="flex justify-center">
          <Radio.Group
            direction="horizontal"
            options={modeOptions}
            value={mode}
            onChange={setMode}
          />
        </div>
      </Card>
      <Timeline
        mode={mode}
        items={[
          {
            key: "1",
            content: "[2025-05-07] Soon UI Design Npm Package Release"
          },
          {
            key: "2",
            content: "[2025-05-20] Start English translation of docs page"
          },
          {
            key: "3",
            content: "[2025-05-27] Add mobile version to docs page"
          },
          {
            key: "4",
            content: "[2025-06-05] Bulk update of common props types for components"
          }
        ]}
      />
    </div>
  )
}

Blue represents trust, loyalty, and stability in design systems.

Volcano color is often used to indicate warnings or important alerts.

Forest green symbolizes growth, harmony, and environmental awareness.

Orange color is often used to indicate warmth, energy, and creativity.

Custom Dot Color

도트 색상을 커스텀할 수 있습니다.

import { Timeline } from "sud-ui";

export default function App() {
  return (
    <Timeline
      mode="alternate"
      items={[
        {
          key: "1",
          color: "blue",
          content: "Blue represents trust, loyalty, and stability in design systems."
        },
        {
          key: "2",
          color: "volcano",
          content: "Volcano color is often used to indicate warnings or important alerts."
        },
        {
          key: "3",
          color: "forest",
          content: "Forest green symbolizes growth, harmony, and environmental awareness."
        },
        {
          key: "4",
          color: "orange",
          content: "Orange color is often used to indicate warmth, energy, and creativity."
        }
      ]}
    />
  )
}

2025-05-07

Soon UI Design Npm Package Release

2025-05-20

Start English translation of docs page

2025-05-27

Add mobile version to docs page

2025-06-05

Bulk update of common props types for components

Use Label

레이블을 사용한 사용 방법입니다.

import { Timeline } from "sud-ui";

export default function App() {
  return (
    <Timeline
      items={[
        {
          key: "1",
          label: "2025-05-07",
          content: "Soon UI Design Npm Package Release"
        },
        {
          key: "2",
          label: "2025-05-20",
          content: "Start English translation of docs page"
        },
        {
          key: "3",
          label: "2025-05-27",
          content: "Add mobile version to docs page"
        },
        {
          key: "4",
          label: "2025-06-05",
          content: "Bulk update of common props types for components"
        }
      ]}
    />
  )
}

Next.js is a React framework for building server-side rendered (SSR) web applications.

FastAPI is a modern, fast (high-performance), web framework for building APIs with Python 3.8+.

MongoDB is a source-available cross-platform document-oriented database program. Classified as a NoSQL database program, MongoDB uses JSON-like documents with optional schemas.

Docker is a set of platform as a service products that use OS-level virtualization to deliver software in packages called containers.

Sud-ui is a React UI library that provides a set of components for building web applications.

Custom Dot

도트를 커스텀할 수 있습니다.

import { Timeline } from "sud-ui";
import { LogoNextjs, LogoFastAPI, LogoMongoDB, LogoDocker, LogoSud } from "sud-icons";

export default function App() {
  return (
    <Timeline
      items={[
        {
          key: "1",
          dot: <LogoNextjs />,
          content: "Next.js is a React framework for building server-side rendered (SSR) web applications."
        },
        {
          key: "2",
          dot: <LogoFastAPI />,
          content: "FastAPI is a modern, fast (high-performance), web framework for building APIs with Python 3.8+."
        },
        {
          key: "3",
          dot: <LogoMongoDB />,
          content: "MongoDB is a source-available cross-platform document-oriented database program. Classified as a NoSQL database program, MongoDB uses JSON-like documents with optional schemas."
        },
        {
          key: "4",
          dot: <LogoDocker />,
          content: "Docker is a set of platform as a service products that use OS-level virtualization to deliver software in packages called containers."
        },
        {
          key: "5",
          dot: <LogoSud />,
          content: "Sud-ui is a React UI library that provides a set of components for building web applications."
        }
      ]}
    />
  )
}

사용 방법

컴포넌트의 props를 설정하는 방법입니다.

items

타임라인 아이템 배열

TimelineItem[]

[]

mode

타임라인 모드

left

right

alternate

left

className

추가 클래스명

string

style

추가 스타일

CSSProperties

{}

TimelineItem

key

아이템의 고유 키

string | number

label

아이템 레이블

ReactNode

content

아이템 내용

ReactNode | ReactNode[]

dot

아이템 도트 아이콘

ReactNode

color

아이템 색상(palette값 또는 HEX code)

string

className

아이템 클래스명

string

개인정보 처리방침

서비스 약관