@jjackkun/svelte5-ui v0.1.0

@jjackkun/svelte5-ui

Svelte 5 UI components library with runes API and SCSS styling.

특징

• 🚀 Svelte 5의 새로운 runes API 사용
• 🎨 SCSS로 스타일링 (Tailwind 없음)
• 📦 기능별로 분리된 컴포넌트 구조
• 🔧 TypeScript 지원 (JavaScript 구현)
• ✨ 가벼운 ESLint & Prettier 설정

설치

npm install @jjackkun/svelte5-ui

사용법

<script>
  import { Button, Input, Card } from '@jjackkun/svelte5-ui';
  
  let inputValue = $state('');
</script>

<Card>
  {#snippet header()}
    <h2>로그인</h2>
  {/snippet}
  
  <Input 
    bind:value={inputValue}
    label="이메일"
    type="email"
    placeholder="이메일을 입력하세요"
  />
  
  <Button variant="primary" size="lg">
    로그인
  </Button>
</Card>

컴포넌트

Form Components

• Button - 다양한 스타일의 버튼
• Input - 입력 필드
• Select - 선택 박스
• Checkbox - 체크박스
• Radio - 라디오 버튼
• Textarea - 텍스트 영역

UI Components

• Card - 카드 레이아웃
• Modal - 모달 다이얼로그
• Loading - 로딩 스피너
• Badge - 배지
• Alert - 알림

Layout Components

• Container - 컨테이너
• Grid - 그리드 레이아웃
• Flex - 플렉스 레이아웃

개발

# 의존성 설치
npm install

# 개발 서버 시작
npm run dev

# 빌드
npm run build

# 패키징
npm run package

# 배포
npm publish

라이선스

MIT