Text List

문장형 안내, 순서 목록, 보조 설명을 일관된 간격과 마커로 표시하는 텍스트 목록 컴포넌트입니다.

examples/krds/text-list-demo.tsx

import { TextList, TextListItem } from "@/components/ui/text-list"

export default function TextListDemo() {

설치

pnpm dlx shadcn@latest add https://krdscn.gwlee.kr/r/text-list.json

import { TextList, TextListItem } from "@/components/ui/text-list"

<TextList>
  <TextListItem>필수 항목을 모두 입력하세요.</TextListItem>
  <TextListItem>첨부 가능한 파일 형식을 확인하세요.</TextListItem>
</TextList>

TextList는 안내문/절차 목록을 semantic ul/ol로 유지하면서 KRDS bullet, dash, ordered 스타일을 제공합니다. 텍스트 콘텐츠 구조를 컴포넌트로 감싸되 list semantics는 유지합니다.

다음 조합으로 TextList를 사용할 수 있습니다.

TextList
├── TextListItem

문장형 안내, 순서 목록, 보조 설명을 일관된 간격과 마커로 표시하는 텍스트 목록 컴포넌트입니다.

examples/krds/text-list-demo.tsx

import { TextList, TextListItem } from "@/components/ui/text-list"

export default function TextListDemo() {