ELIO UI

ELIO 디자인 시스템을 위한 React UI 컴포넌트 라이브러리입니다.

📚 문서

• 📖 개발자 가이드 - 설치, 설정, 컴포넌트 사용법
• 🎨 Storybook - 모든 컴포넌트와 사용 예시
• 🖼️ Figma - 디자인 시스템

📝 로컬에서 문서 확인: npm run docs:dev 실행 후 http://localhost:5173 접속

🤖 AI 연동 (MCP)

AI 에이전트(Claude Code·Cursor·Copilot)가 정확한 props 로 화면을 짜도록 MCP 서버를 함께 배포합니다. 추가 설치 없이 .mcp.json 한 줄이면 붙습니다.

{
  "mcpServers": {
    "elio-ui": {
      "command": "node",
      "args": ["./node_modules/@elio_it/elio-ui/dist/mcp/server.cjs"]
    }
  }
}

컴포넌트 API·디자인 토큰·사용 가이드·화면 패턴·프로젝트 초기 셋업을 조회할 수 있습니다.

조회만 하는 것이 아니라 내 PC 에 프로젝트를 만들고 띄우는 것까지 맡길 수 있습니다. 개발 환경이 없는 사람도 "바탕화면에 폴더 만들어서 화면 띄워줘" 한마디면 끝납니다.

check_environment  →  create_project  →  install_and_run
   환경 점검            폴더·파일 생성      설치 후 localhost 주소 반환

설치와 사용법은 AI 연동 (MCP) 가이드 를 참고하세요.

⚡ 빠른 시작

ELIO UI는 npmjs.com의 공개 패키지입니다. 토큰 없이 바로 설치됩니다. → 설치 및 설정 가이드

npm install @elio_it/elio-ui styled-components

import { ThemeProvider } from 'styled-components';
import { theme, GlobalStyle } from '@elio_it/elio-ui/styles';
import { ElioOverlayProvider } from '@elio_it/elio-ui/Overlay';
import { TextButton } from '@elio_it/elio-ui/Button';

function App() {
  return (
    <ThemeProvider theme={theme}>
      <GlobalStyle />
      <ElioOverlayProvider>
        <TextButton text="확인" variant="primary" color="blue" />
      </ElioOverlayProvider>
    </ThemeProvider>
  );
}

⚠️ GlobalStyle 을 빼지 마세요. html { font-size: 10px } 를 깔아주는 곳이라, 없으면 에러 없이 모든 치수가 1.6배로 커집니다. Next.js 셋업은 설치 및 설정 참고.

🎨 컴포넌트

📝 스크립트

📄 라이선스

MIT License