스벨트에서 shadcn/ui 설치 방법

1. 스벨트 새 프로젝트를 생성합니다.

https://blog37.tistory.com/entry/%EC%8A%A4%EB%B2%A8%ED%8A%B8-%EA%B0%9C%EB%B0%9C-%ED%99%98%EA%B2%BD-%EA%B5%AC%EC%B6%95-%EB%B0%A9%EB%B2%95

스벨트 설치 방법

 

2. jsconfig.json (또는 tsconfig.json) 파일에서 아래의 코드를 추가합니다.
(※ 코드 추가 후 파일 저장 해야함)

"baseUrl": ".",
"paths": {
    "$lib": ["./src/lib"],
    "$lib/*": ["./src/lib/*"]
},

 

3. vite.config.js 파일에서 아래의 코드를 추가합니다.
(※ 코드 추가 후 파일 저장 해야함)

import path from 'path'
  
resolve: {
    alias: {
      $lib: path.resolve("./src/lib"),
    },
}

 

4. 스벨트 project 폴더 주소창에서 cmd를 입력 후 Enter키를 눌러 윈도우 '명령 프롬프트'를 실행합니다.

 

5. 실행된 윈도우 '명령 프롬프트'에서 아래의 명령어를 순차적으로 실행시켜 tailwindcss와 shadcn-svelte를 설치합니다.

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

npx shadcn-svelte@latest init

 

5-1. shadcn-svelte 설치 명령어를 실행하면, 설치 옵션에 대한 몇 가지 질문사항들이 표시됩니다. 각 항목에 대해 선택 및 Enter키를 눌러 설치를 계속 진행합니다.

Would you like to use TypeScript? › No
Which style would you like to use? › Default
Which base color would you like to use? › Slate
Where is your global CSS file? > src/app.css
Where is your Tailwind config located? › tailwind.config.js
Configure the import alias for components: › $lib/components
Configure the import alias for utils: › $lib/utils

 

6. 설치가 완료되면 shadcn-svelte 사이트에 접속합니다.

https://www.shadcn-svelte.com/docs/components/accordion

Accordion - shadcn-svelte

 

6-1. shadcn-svelte 사이트에서 사용하고자 하는 컴포넌트를 골라 설치(installation)한 다음, 해당 코드를 복사하여 프로젝트에 붙여넣기(적용)하면 됩니다.