- Plaid React 디자인 시스템 UI 라이브러리입니다. 접근성과 일관성을 중심으로 여러 서비스에서 공통 사용하기 위해 설계되었습니다. - **TypeScript**, **vanilla-extract**, **react-aria-components** 기반으로 구성되어 있습니다.
npm install @plaidlabs/ui- Plaid React 디자인 시스템 UI 라이브러리입니다.
접근성과 일관성을 중심으로 여러 서비스에서 공통 사용하기 위해 설계되었습니다.
- TypeScript, vanilla-extract, react-aria-components 기반으로 구성되어 있습니다.
---
---
``bashnpm
npm install @plaidlabs/ui
---
설정 (CSS) — 중요
이 라이브러리는 vanilla-extract로 생성된 CSS 번들(
)을 포함합니다.- 기본 동작(권장):
@plaidlabs/ui를 import 하면 패키지 엔트리에서 style.css가 함께 로드되도록 구성되어 있어, 보통 별도 설정 없이 스타일이 적용됩니다.
- 스타일이 적용되지 않는 경우(특수한 번들러 설정 / 커스텀 빌드 파이프라인 / 강한 트리셰이킹 등)에는 앱 진입점에서 CSS를 1회 import 해주세요.`tsx
// main.tsx / App.tsx / layout.tsx
import '@plaidlabs/ui/style.css';`
⚠️ 와 같은 deep import는
패키지 exports 설정에 의해 동작하지 않을 수 있습니다.
반드시 @plaidlabs/ui/style.css 를 사용해주세요.---
사용법
`tsx
import { Button, Tab, Modal } from '@plaidlabs/ui';export function Example() {
return (
제목
내용
defaultSelectedKey="menu1"
items={[
{ id: 'menu1', label: '메뉴 1', content: '컨텐츠 1' },
{ id: 'menu2', label: '메뉴 2', content: '컨텐츠 2' },
]}
/>
);
}
`---
요구사항
- React: \(^18.0.0 \|\| ^19.0.0\)
- React DOM: \(^18.0.0 \|\| ^19.0.0\)
---
제공 컴포넌트
패키지 엔트리에서 컴포넌트와 타입을 제공합니다.
- Basic (폴더 이름순)
, BottomTab, Button, Checkbox, Chip, Close,
GuideText, Link, LnbItem, Loading, Notice,
PageHeader, Pagination, Stepper, Tab,
TextArea, TextField, Toggle - Complex (폴더 이름순)
, Modal, Popup`---
MIT