shadcn-svelte를 more-shadcn-svelte Components와 함께 확장하기

Source: Dev.to

Overview

more-shadcn-svelte는 shadcn-svelte에 핵심 레지스트리에는 포함되지 않은 고급 UI 컴포넌트를 추가하는 UI 컴포넌트 라이브러리입니다.

Key Features

• ⚡ Svelte 5 Runes 기반으로 $state, $props, $derived를 사용합니다.
• 📦 shadcn-svelte CLI를 통해 설치합니다 (별도의 npm 패키지가 필요 없습니다).
• 🔒 엄격한 prop 타입을 지원하는 TypeScript 전체 지원.
• ✨ 컴포넌트는 애니메이션 및 마이크로 인터랙션을 포함합니다.
• 🎨 소스 파일이 프로젝트에 직접 추가되어 손쉽게 커스터마이징할 수 있습니다.

Components Included

이 라이브러리는 약 20개의 컴포넌트를 제공하며, 주요 예시는 다음과 같습니다:

• 자동완성 (Autocomplete)
• 태그 입력 (Tag Input)
• 색상 선택기 (Color Picker)
• 스테퍼 (Stepper)
• 이미지 줌 (Image Zoom)
• 숫자 티커 (Number Ticker)

…그리고 더 많은 고급 UI 요소들이 포함되어 있습니다.

Installation

shadcn-svelte CLI를 사용하여 라이브러리를 설치합니다:

# Example command (replace with actual CLI syntax if different)
shadcn-svelte add more-shadcn-svelte

이 컴포넌트들은 기존 shadcn-svelte 설정과 원활하게 통합됩니다.

Resources

• Live Demo & Documentation: https://next.jqueryscript.net/svelte/advanced-more-shadcn-components/
• GitHub Repository: GitHub Repo (replace # with the actual URL)
• Live Demo: Live Demo (replace # with the actual URL)