설치 및 사용 가이드

@ure0126/basic-ui-components는 다양한 UI 컴포넌트를 npm으로 설치해 바로 사용할 수 있는 React UI 컴포넌트 라이브러리입니다.

설치

1. 설치

npm i @ure0126/basic-ui-components

2. 스타일 불러오기

import '@ure0126/basic-ui-components/dist/styles/main.css';

3. 필수 환경

  • Node.js: >=18 권장
  • React / ReactDOM: >=18

4. Peer Dependencies

npm i react react-dom

5. Next.js 사용 시 주의

  • 인터랙티브 컴포넌트는 'use client' 환경에서 사용하세요.
  • App Router: 페이지/섹션 상단에 'use client' 선언 또는 클라이언트 컴포넌트에서 임포트

테마 커스터마이징

이 라이브러리는 CSS 변수(:root)와 SCSS map 토큰으로 스타일을 관리합니다.

1. CSS 변수 재정의 (런타임)

:root {
  --color-point: #ff6600;
  --font-size-base: 18px;
  --spacing-base: 20px;
  --color-gray-100: #f0f0f0;
  --color-gray-600: #666666;
  --border-radius-md: 16px;
}

2. SCSS map override (빌드 타임)

@use '@ure0126/basic-ui-components/src/styles/abstracts/variables' with (
  $breakpoints: ('MO': 767px, 'TAB': 1024px, 'PC': 1280px),
  $height: (sm: 32px, md: 40px, lg: 48px),
  $gap-map: (none: 0, sm: 4px, md: 8px, lg: 16px, xl: 32px)
);

사용 예시

import '@ure0126/basic-ui-components/dist/styles/main.css';
import { Button } from '@ure0126/basic-ui-components';

export default function Example() {
  return <Button>Click Me</Button>;
}

컴포넌트 카테고리

  1. Foundation

  2. Action

  3. Form

  4. Data Display

사용 라이브러리

  • clsx: MIT 라이선스 - Luke Edwards (lukeed.com)
    조건부 클래스명 결합 유틸리티
    GitHub | MIT License

아이콘 출처

CC BY 조건에 따라, 저작자 표시를 위해 위와 같이 출처를 명시합니다.

라이선스

이 프로젝트는 MIT License를 따릅니다.
단, 포함된 아이콘 및 외부 리소스는 각 리소스의 라이선스를 따릅니다.