@lumir-company/prototype-ui-sdk NPM

루미르 UI SDK

루미르 UI SDK는 React와 Tailwind CSS를 기반으로 구축된 현대적이고 접근성이 뛰어난 UI 컴포넌트 라이브러리입니다. 모든 컴포넌트는 기업용 애플리케이션에 맞게 디자인되었으며, 일관성 있는 사용자 경험을 제공합니다.

특징

💎 아름다운 디자인: 세련된 컬러 팔레트와 현대적인 UI
🌙 다크 모드 지원: 완벽한 다크 모드 통합
🧩 모듈식 구조: 필요한 컴포넌트만 가져와서 사용
♿ 접근성 중심: WCAG 가이드라인 준수
📱 반응형: 모든 화면 크기에 최적화
🎨 테마 커스터마이징: 손쉬운 테마 및 스타일 조정

설치

npm을 사용하여 패키지를 설치하세요:

npm install @lumir-company/prototype-ui-sdk

또는 yarn을 사용:

yarn add @lumir-company/prototype-ui-sdk

Tailwind CSS 설정

이 라이브러리는 Tailwind CSS를 기반으로 하므로, 프로젝트에 Tailwind 설정이 필요합니다.

// tailwind.config.js
const { tailwindConfig } = require("@lumir-company/prototype-ui-sdk");
module.exports = {
  // 기본 설정 확장
  ...tailwindConfig,
  // 필요에 따라 사용자 설정 추가
  content: [...tailwindConfig.content, "./src//.{js,ts,jsx,tsx}"],
  theme: {
    ...tailwindConfig.theme,
    extend: {
      ...tailwindConfig.theme.extend,
      // 커스텀 테마 확장
    },
  },
};

기본 사용법

React 애플리케이션에서 컴포넌트를 가져와 사용하세요:

import { Button, Card, TextField } from "@lumir-company/prototype-ui-sdk";
import "@lumir-company/prototype-ui-sdk/dist/styles.css"; // 스타일 임포트
function App() {
  return (
    <Card className="p-6 max-w-md mx-auto">
      <h2 className="text-xl font-semibold mb-4">로그인</h2>
      <TextField label="이메일" placeholder="이메일을 입력하세요" className="mb-3" />
      <TextField label="비밀번호" type="password" placeholder="비밀번호를 입력하세요" className="mb-4" />
      <Button className="w-full">로그인</Button>
    </Card>
  );
}

테마 시스템

다크 모드 및 커스텀 테마를 쉽게 적용할 수 있습니다:

import { applyTheme } from "@lumir-company/prototype-ui-sdk";
// 어디서든 호출 가능 (주로 앱 진입점에서)
applyTheme({
  mode: "dark", // 'light' 또는 'dark'
  primaryColor: "#6366f1", // 주요 색상 커스터마이징
  fontFamily: "Pretendard, sans-serif", // 폰트 변경
});

스크롤바 커스터마이징

SDK에는 테마에 맞는 세련된 스크롤바 디자인이 포함되어 있습니다:

// 스타일 파일을 가져오면 자동으로 적용됩니다
import "@lumir-company/prototype-ui-sdk/dist/styles.css";
// 스크롤이 필요한 컨테이너에 클래스 추가
<div className="content-scrollable">{/ 컨텐츠 /}</div>;