Installation

Install any item from Design System UI Svelte with the shadcn-svelte CLI, passing the item’s JSON URL.

Your project must already be set up with shadcn-svelte.

Start with the styles registry item so your project has the design system CSS foundation before adding components.

Add registry connection

By default, shadcn-svelte does not resolve namespaced aliases like @design-system-ui/button — you have to pass the full JSON URL every time. To use the shorter alias instead, add a registries entry to your project’s components.json:

1{
2  "registries": {
3    "@design-system-ui": "https://sveltedocs.canceydejean.dev/r/{name}.json"
4  }
5}

Update the URL to your deployed homepage from registry/config.ts. Once that’s set, npx shadcn-svelte@latest add @design-system-ui/<name> works in place of the full JSON URL.

This only needs to be done once per project.