Lit 기반 웹 컴포넌트 라이브러리.
데모 사이트에서 모든 컴포넌트를 직접 확인할 수 있습니다.
npm install @iyulab/components// 전체 import
import '@iyulab/components';
// 개별 import
import '@iyulab/components/u-button';
import '@iyulab/components/u-input';LLM 코딩 에이전트(Claude Code, GitHub Copilot, Cursor 등)를 위한 스킬을 제공합니다.
# GitHub에서 설치
npx skills add iyulab/node-components
# 패키지 설치 후 로컬에서 참조
npx skills add ./node_modules/@iyulab/componentsFeedback — u-alert, u-badge, u-spinner, u-skeleton, u-progress-bar, u-progress-ring
Buttons & Actions — u-button, u-button-group, u-icon-button, u-chip
Form Controls — u-input, u-textarea, u-select, u-checkbox, u-radio, u-switch, u-slider, u-rating, u-field, u-form, u-option
Overlay & Floating — u-dialog, u-drawer, u-popover, u-tooltip
Navigation — u-menu, u-menu-item, u-tab-panel, u-breadcrumb, u-breadcrumb-item, u-tree, u-tree-item
Layout & Display — u-avatar, u-card, u-carousel, u-divider, u-icon, u-panel, u-split-panel, u-tag
import { Theme } from '@iyulab/components';
await Theme.init({
default: 'system', // 'light' | 'dark' | 'system'
useBuiltIn: true, // 내장 light/dark CSS 사용
store: { type: 'localStorage', prefix: 'my-app' },
});
Theme.set('dark');
Theme.set('system');모든 CSS 변수는 --u- 접두사를 사용하며 :root에서 재정의할 수 있습니다.
:root {
--u-blue-600: #3B82F6;
--u-font-base: 'Pretendard', sans-serif;
}자세한 내용은 docs/theming.md를 참고하세요.
| 문서 | 내용 |
|---|---|
| docs/architecture.md | 패키지 구조 및 클래스 계층 |
| docs/guidelines.md | 컴포넌트 개발 가이드라인 |
| docs/events.md | 이벤트 시스템 카탈로그 |
| docs/theming.md | 테마 및 CSS 변수 |
| docs/form-controls.md | 폼 연동 및 검증 API |
| docs/icons.md | 아이콘 등록 및 사용 |
MIT © iyulab