본문으로 건너뛰기

패턴

여러 컴포넌트를 조합해 목록·표·탭 같은 화면 패턴을 만든다.

패턴

상태
활성
소유자
Design Platform
설명 목록

용어와 값을 시맨틱 description list로 정렬해 세부 정보를 읽기 쉽게 만든다.

결과가 없어요

검색어를 바꿔 보세요

빈 상태

결과·데이터가 없을 때 이유와 다음 행동을 안내하는 표시.

페이지네이션

긴 목록 하단에서 이전·다음 페이지 이동과 현재 범위를 표시한다.

이름수량
항목 A12건
항목 B3건
테이블

읽기 위주 데이터를 시맨틱 table 로 보여주는 단순 표.

이름
상태
알파
활성
베타
대기
데이터 그리드

많은 행과 열을 고정 헤더와 스크롤 영역 안에서 탐색하는 데이터 표.

이름수량
항목 A12
항목 B3
데이터 테이블

직접 쓴 thead·tbody 에 간격, hover, 선택 줄 스타일을 입히는 표 그릇.

품목금액
볼트 M8₩96,000
너트 M8₩40,000
선택 · 일괄 처리

표의 줄을 체크박스로 골라, 목록 아래에 떠오르는 바에서 한 번에 처리한다.

입고 #1024

3개 품목 · 검수 완료

입고 #1025

2개 품목

펼침 행

목록의 한 줄을 눌러 그 자리에서 상세를 펼치는 details 행.

탭

한 화면 안에서 관련 콘텐츠 섹션을 전환하는 밑줄 탭.

Composable components for developer collaboration products.

Stars
1.2k
Forks
86
License
MIT
RepositoryHeader

저장소 정체성, 공개 범위, 주요 액션과 핵심 메타데이터를 한곳에 모읍니다.

FileTree

파일 이름, 최근 커밋 메시지와 수정 시각을 저장소 루트 목록으로 표시합니다.

src/index.ts3 lines
src/index.ts
1export { Button } from "./button";
2export { Dialog } from "./dialog";
3export { FileTree } from "./file-tree";
CodeView

파일명, 줄 번호, 강조와 복사 액션을 갖춘 읽기 전용 코드 화면입니다.

CommitRow

커밋 메시지, 작성자, 시각, 검사 상태와 짧은 SHA를 한 행에 배치합니다.

IssueRow

이슈 상태, 제목, 라벨, 작성 정보, 담당자와 댓글 수를 스캔 가능한 행으로 만듭니다.

PullRequestRow

변경 요청의 수명주기, 리뷰와 자동 검사 결과를 함께 요약합니다.

apps/docs/src/app/lyra/page.tsx
+2-1
Diff for apps/docs/src/app/lyra/page.tsx
Old lineNew lineChangeContent
1212 <Section title="Components">
13- <LegacyLinks />
13+ <CatalogLinks />
14+ <PatternLinks />
DiffView

추가·삭제 통계와 구·신 줄 번호를 포함한 통합 diff를 표시합니다.

Composable components for developer collaboration products.

Language
TypeScript
Stars
1.2k
Forks
86
Updated
Updated 2 hours ago
RepositoryCard

검색과 프로필 화면에서 저장소 설명, 언어, 인기도와 최근 활동을 요약합니다.