SvelteKit

SvelteKit 프로젝트에서 shadcn-svelte를 설정하는 방법.

프로젝트 생성

SvelteKit CLI를 사용하여 TailwindCSS가 포함된 새 프로젝트를 생성합니다

pnpm dlx sv create my-app --add tailwindcss

npx sv create my-app --add tailwindcss

npx sv create my-app --add tailwindcss

bun x sv create my-app --add tailwindcss

경로 별칭 설정

기본 별칭인 $lib를 사용하지 않는 경우, svelte.config.js 파일에 해당 별칭을 추가해야 합니다.

svelte.config.js

const config = {
  // ... other config
  kit: {
    // ... other config
    alias: {
      "@/*": "./path/to/lib/*",
    },
  },
};

CLI 실행

pnpm dlx shadcn-svelte@latest init

npx shadcn-svelte@latest init

npx shadcn-svelte@latest init

bun x shadcn-svelte@latest init

components.json 설정

components.json을 설정하기 위한 몇 가지 질문이 표시됩니다:

Which base color would you like to use? › Slate
Where is your global CSS file? (this file will be overwritten) › src/routes/layout.css
Configure the import alias for lib: › $lib
Configure the import alias for components: › $lib/components
Configure the import alias for utils: › $lib/utils
Configure the import alias for hooks: › $lib/hooks
Configure the import alias for ui: › $lib/components/ui

완료

이제 프로젝트에 컴포넌트를 추가할 수 있습니다.

pnpm dlx shadcn-svelte@latest add button

npx shadcn-svelte@latest add button

npx shadcn-svelte@latest add button

bun x shadcn-svelte@latest add button

위 명령어는 프로젝트에 Button 컴포넌트를 추가합니다. 다음과 같이 가져올 수 있습니다:

<script lang="ts">
  import { Button } from "$lib/components/ui/button/index.js";
</script>
 
<Button>Click me</Button>

설치 Vite