open-index/open-npm huggingface dataset:
npm package: @likelion-design/ui
Description: React UI 컴포넌트 라이브러리
Latest version: 1.0.26

# @likelion-design/ui

React UI 컴포넌트 라이브러리

## 설치

```bash
npm install @likelion-design/ui
# or
yarn add @likelion-design/ui
```

**Peer 의존성:** `react`, `react-dom`, `@remixicon/react`, `@heroicons/react`

---

## 빠른 시작

### 1. CSS import (필수)

컴포넌트 사용 전에 반드시 스타일을 import하세요.

```tsx
// App.tsx, layout.tsx 등 최상위 파일
import "@likelion-design/ui/styles.css";
```

### 2. 컴포넌트 사용

```tsx
import { ActionButton, Text } from "@likelion-design/ui";
import "@likelion-design/ui/styles.css";

function App() {
  return (
    <>
      <Text variant="heading-h1">제목</Text>
      <ActionButton size="large" color="primary" type="solid" label="클릭" />
    </>
  );
}
```

필요한 컴포넌트만 import하면 번들러가 tree-shaking 합니다.

### 3. Logo 사용 (선택)

```tsx
import { Logo } from "@likelion-design/ui";

<Logo size="medium" type="likelion-kr" color="primary" />;
```

로고 SVG는 패키지 번들에 포함되어 있어 별도 설정 없이 사용할 수 있습니다.

---

## Tailwind 통합 (선택)

기존 Tailwind 프로젝트에 통합하려면 아래 설정을 권장합니다.

### ① 전역 스타일 (`styles/globals.css`)

디자인 시스템 스타일을 **먼저** 로드한 뒤 Tailwind를 적용합니다.

```css
@import "@likelion-design/ui/styles.css";
@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";
```

### ② Tailwind 설정 (`tailwind.config.js`)

```javascript
module.exports = {
  presets: [require("@likelion-design/ui/tailwind-preset")],
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
    "./node_modules/@likelion-design/ui/**/*.js",
  ],
  theme: {
    extend: {
      // 프로젝트 커스텀 설정 (preset과 병합됨)
    },
  },
};
```

이제 `bg-primary-500`, `text-fg-primary` 등 토큰 기반 클래스를 사용할 수 있습니다.

---

## 색상 토큰만 사용 (선택)

컴포넌트 없이 CSS 변수만 사용하는 경우:

```tsx
import "@likelion-design/ui/colors.css";
```

```css
.my-box {
  background-color: var(--color-primary-500);
  color: var(--color-semantic-fg-primary);
}
```

---

## 패키지 구조

| Export                                | 용도               |
| ------------------------------------- | ------------------ |
| `@likelion-design/ui`                 | 컴포넌트 및 유틸   |
| `@likelion-design/ui/styles.css`      | 전체 스타일 (필수) |
| `@likelion-design/ui/colors.css`      | 색상 토큰만        |
| `@likelion-design/ui/tailwind-preset` | Tailwind preset    |

---

## 제공 컴포넌트

- **Foundation:** Text, Logo, useBreakpoint, useMediaQuery, BreakpointProvider 등
- **Components:** ActionButton, IconButton, Tab, Chip, Dialog, Toggle, Checkbox, SelectMenu, SelectHeader, Pagination, RadioButton, Badge, Tag, Tooltip, Toast 등

상세 사용법은 [Storybook](https://likelion-design.github.io/ui/)에서 확인하세요.

---

## 개발

```bash
npm run storybook   # Storybook 실행
npm run build       # 패키지 빌드 (토큰 빌드 포함)
```

## 라이선스

MIT