설치하기

React 프로젝트에 MBSW를 설치하고 컴포넌트를 사용해보세요.

Before you start

MBSW는 React 19와 React DOM 19를 사용하는 프로젝트에서 사용할 수 있습니다. 기존 프로젝트의 루트 디렉터리에서 시작하세요.

컴포넌트와 디자인 토큰 패키지를 함께 설치합니다.

패키지	제공하는 것
`@mbsw/ui`	Button, Input, Dialog 등 React 컴포넌트
`@mbsw/tokens`	색상, 타이포그래피, 간격 등 공통 스타일 값

아래 명령은 이 문서에서 사용하는 버전인 @mbsw/ui@1.1.0과 @mbsw/tokens@1.1.0을 설치합니다.

npm install @mbsw/ui@1.1.0 @mbsw/tokens@1.1.0 tailwindcss@4

위 명령에는 토큰 패키지의 peer dependency인 Tailwind CSS 4도 포함되어 있습니다. 컴포넌트 스타일은 이미 CSS로 제공되므로, 기본 사용을 위해 Tailwind 빌드 설정을 추가할 필요는 없습니다.

앱의 전역 CSS 파일에 아래 스타일을 순서대로 추가합니다. 이 파일은 앱 진입점에서 한 번 불러옵니다.

@import '@mbsw/tokens/styles.css';
@import '@mbsw/tokens/motion.css';
@import '@mbsw/ui/styles.css';

토큰은 공통 디자인 값을, UI 스타일은 컴포넌트의 모양을 적용합니다. Motion 스타일은 사용자의 모션 줄이기 설정을 반영합니다. 문서 전체의 애니메이션과 전환 시간을 줄이는 선택적 스타일이므로, 앱에서 별도로 모션을 관리한다면 생략할 수 있습니다.

사용할 컴포넌트를 @mbsw/ui에서 가져와 화면에 배치합니다.

import { Button } from '@mbsw/ui';

export default function App() {
  return <Button>시작하기</Button>;
}

각 컴포넌트 페이지에서 실행 가능한 예제와 옵션을 확인하고, Code 탭의 코드를 복사해 사용할 수 있습니다.