@plaidlabs/ui

• Plaid React 디자인 시스템 UI 라이브러리입니다.
  접근성과 일관성을 중심으로 여러 서비스에서 공통 사용하기 위해 설계되었습니다.
• TypeScript, vanilla-extract, react-aria-components 기반으로 구성되어 있습니다.

문서 (Storybook)

• Storybook Docs

설치

# npm
npm install @plaidlabs/ui

# pnpm
pnpm add @plaidlabs/ui

# yarn
yarn add @plaidlabs/ui

설정 (CSS) — 중요

이 라이브러리는 vanilla-extract로 생성된 CSS 번들(style.css)을 포함합니다.

• 기본 동작(권장): @plaidlabs/ui를 import 하면 패키지 엔트리에서 style.css가 함께 로드되도록 구성되어 있어, 보통 별도 설정 없이 스타일이 적용됩니다.
• 스타일이 적용되지 않는 경우(특수한 번들러 설정 / 커스텀 빌드 파이프라인 / 강한 트리셰이킹 등)에는 앱 진입점에서 CSS를 1회 import 해주세요.

// main.tsx / App.tsx / layout.tsx
import '@plaidlabs/ui/style.css';

⚠️ @plaidlabs/ui/dist/style.css 와 같은 deep import는
패키지 exports 설정에 의해 동작하지 않을 수 있습니다.
반드시 @plaidlabs/ui/style.css 를 사용해주세요.

사용법

import { Button, Tab, Modal } from '@plaidlabs/ui';

export function Example() {
  return (
    <div style={{ padding: 20 }}>
      <Button variant="filled" color="blue">
        버튼
      </Button>

      <Modal.Trigger>
        <Button>모달 열기</Button>
        <Modal>
          <Modal.Title>제목</Modal.Title>
          <Modal.Content>내용</Modal.Content>
          <Modal.ButtonArea>
            <Button>닫기</Button>
          </Modal.ButtonArea>
        </Modal>
      </Modal.Trigger>

      <Tab
        aria-label="탭"
        defaultSelectedKey="menu1"
        items={[
          { id: 'menu1', label: '메뉴 1', content: '컨텐츠 1' },
          { id: 'menu2', label: '메뉴 2', content: '컨텐츠 2' },
        ]}
      />
    </div>
  );
}

요구사항

• React: (^18.0.0 || ^19.0.0)
• React DOM: (^18.0.0 || ^19.0.0)

제공 컴포넌트

패키지 엔트리에서 컴포넌트와 타입을 제공합니다.

• Basic (폴더 이름순) Avatar, BottomTab, Button, Checkbox, Chip, Close, GuideText, Link, LnbItem, Loading, Notice, PageHeader, Pagination, Stepper, Tab, TextArea, TextField, Toggle

• Complex (폴더 이름순) Dropdown, Modal, Popup

라이선스

MIT