@baneung-pack/ui

Install

바능 디자인 시스템의 npm 패키지 설치 가이드. 필요한 패키지만 골라서 설치하세요.

패키지

  • @baneung-pack/tokens — CSS / JSON / TS 디자인 토큰 (SSOT). 가장 기본.
  • @baneung-pack/ui — 58개 React 컴포넌트 (Radix 기반).

Grid 패키지(@baneung-pack/grid) 설치는 별도 — 좌측 메뉴의 패키지 > Grid > Install 참조.

전체 설치

# pnpm
pnpm add @baneung-pack/ui @baneung-pack/tokens

# npm
npm install @baneung-pack/ui @baneung-pack/tokens

# yarn
yarn add @baneung-pack/ui @baneung-pack/tokens

Peer dependencies

  • React ^18 || ^19
  • React DOM ^18 || ^19

스타일 임포트

// app/layout.tsx — 한 번만 로드
import '@baneung-pack/ui/styles.css';

ui의 styles는 @layer baneung에 격리됩니다. Grid를 함께 쓰면 layer가 자동 머지되니 별도 설정 불필요.

CSS 격리 (소비자 Tailwind 사용 시)

// 소비자 globals.css — preflight 제외하고 utilities만 import
@import 'tailwindcss/theme';
@import 'tailwindcss/utilities';
/* @import 'tailwindcss/preflight'; ← 의도적으로 제외 (라이브러리가 이미 제공) */

@source "./app/**/*.{ts,tsx}";

소비자가 Tailwind를 자체 임포트할 때 preflight↔라이브러리 utility 충돌을 회피하는 권장 패턴.

다음 단계