uitissue-ui
llms.txt

소개 · 시작하기

@tissue-ui/layout은 화면의 뼈대와 기본 컴포넌트를 함께 담은 디자인 시스템입니다. 목록·상세·폼처럼 자주 만드는 화면마다 “어디에 무엇이 들어가는지”를 미리 정해 뒀기 때문에, 정해진 자리에 컴포넌트를 넣기만 하면 반듯한 화면이 됩니다.

무엇이 좋은가

  • 자주 쓰는 화면 6가지(목록·상세·대시보드·폼 …)의 골격을 미리 만들어 뒀습니다. 빈 자리(슬롯)에 요소를 넣기만 하면 됩니다.
  • 버튼·표·입력칸 같은 컴포넌트 23개가 함께 들어 있습니다. 각 컴포넌트가 어떤 옵션을 받는지 한곳에 정리돼 있어, 이 문서와 llms.txt 가 그 정보에서 저절로 만들어집니다.
  • 사람이 보는 문서와 에이전트가 읽는 llms.txt 가 같은 자료에서 나오므로, 문서와 실제 코드가 어긋날 일이 없습니다.

세 개의 패키지

  • @tissue-ui/layout-core — 화면·컴포넌트 정의와 그걸 꺼내 보는 함수들. React 없이도 씁니다.
  • @tissue-ui/layout-react — 화면 골격 컴포넌트와 기본 컴포넌트 (React 17 이상 필요).
  • @tissue-ui/layout-themes — 색·간격을 담은 CSS 와 테마.

두 가지로 시작

① 지금 바로 만져보기

설치하지 않아도 됩니다. 컴포넌트의 값을 바꿔 보고, 마음에 들면 코드를 복사하세요.

버튼 만져보기 →
② 내 프로젝트에 설치

바로 가져다 쓰려면 이쪽입니다. npm·pnpm·yarn 모두 됩니다.

설치 가이드 →

빠른 시작 (코드)

테마 CSS 를 한 번 불러오고, 필요한 컴포넌트를 가져다 쓰면 됩니다. 설치 방법은 설치 문서에 있습니다.

tsx
// app/layout.tsx — 테마 CSS 를 한 번만 불러옵니다
import "@tissue-ui/layout-themes/base.css";

// 어떤 페이지든
import { Button, PageHeader, Badge } from "@tissue-ui/layout-react";

export default function Page() {
  return (
    <div className="tissue-layout">
      <PageHeader
        title="사용자"
        titleSuffix={<Badge tone="blue">12</Badge>}
        actions={<Button variant="primary">초대</Button>}
      />
    </div>
  );
}

버튼 같은 컴포넌트를 낱개로 쓸 때는 .tissue-layout 으로 감싼 안쪽에 두세요. 색과 간격 값이 그 안에서 정해지기 때문입니다.

다음 단계

문서 버전: 패키지 v0.7.7 · 매니페스트 v0.11.0