Installing Shadcn/ui Svelte

Shad/cn is a component library based on Melt. They are Beautifully designed components that you can copy and paste into your apps. Accessible. Customizable. Open Source. Things like accordions etc

Getting Started

Create a jsconfig.json in your root

jsconfig.json

{
  "extends": "./.svelte-kit/tsconfig.json"
}

Installing Shadcn/ui svelte

npx shadcn-svelte@latest init

Make sure that Typescript is not selected.

Using a component

Accordion - shadcn-svelteshadcn-svelte

Choose a component you'd like to use. Then follow the installation. You can use Tailwind to style the components.

shadcn-svelte will overwrite your standard global app.css file, and your tailwind.config.js file. Make sure to make a back-up!