@likelion-design/ui

React UI 컴포넌트 라이브러리

설치

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

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

빠른 시작

1. CSS import (필수)

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

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

2. 컴포넌트 사용

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 사용 (선택)

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

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

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

Tailwind 통합 (선택)

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

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

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

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

② Tailwind 설정 (tailwind.config.js)

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 변수만 사용하는 경우:

import "@likelion-design/ui/colors.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에서 확인하세요.

개발

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

라이선스

MIT