vscode-shadcn-svelte

KO | EN

gitlite — search

#typescript #ai-agents #ai #dsh-plugin #deepseek-harness #open-source #claude-code #codex #cli #developer-tools #react #windows

vscode-shadcn-svelte

★ 91 Open GitHub ↗

Shadcn Svelte VSCode extension to help you install and use components directly without leaving your IDE.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

<p align="center">
 <img align="center" src="https://raw.githubusercontent.com/selemondev/vscode-shadcn-svelte/master/src/images/icon.png" height="96" />
 <h1 align="center">
  shadcn-svelte
 </h1>
</p>

> [!NOTE]  
> The Shadcn Svelte VSCode Extension now supports both Svelte 4 and Svelte 5. The following are the abbreviations for help, imports, and usage specific to their respective Svelte versions: Svelte 4: `cn-help`, `cni-accordion` and `cnx-accordion`. Svelte 5: `cn-x-help`, `cni-x-accordion` and `cnx-accordion-next`.

This VSCode extension enables you to install [shadcn/svelte](https://shadcn-svelte.com) components directly from your IDE ✨.

## Initialize the Shadcn/Svelte CLI

![to initialize CLI open the command palette and search for shadcn/svelte: install cli command](https://raw.githubusercontent.com/selemondev/vscode-shadcn-svelte/master/src/assets/images/init-cli.png)

## Install components

![to initialize CLI open the command palette and search for shadcn/svelte: add new component](https://raw.githubusercontent.com/selemondev/vscode-shadcn-svelte/master/src/assets/images/add-new-component.png)

## Choose a component to install from the list

![choose a component to install from the list](https://raw.githubusercontent.com/selemondev/vscode-shadcn-svelte/master/src/assets/images/add-new-component-preview.png)

## Install multiple components

![install multiple components](https://raw.githubusercontent.com/selemondev/vscode-shadcn-svelte/master/src/assets/images/add-multiple-components.png)

## Choose components to install from the list
![choose components to install from the list](https://raw.githubusercontent.com/selemondev/vscode-shadcn-svelte/master/src/assets/images/add-multiple-components-preview.png)

## Open the Shadcn-Svelte documentation

![open the shadcn-svelte documentation](https://raw.githubusercontent.com/selemondev/vscode-shadcn-svelte/master/src/assets/images/shadcn-svelte-docs.png)

## Navigate to a particular component's documentation page

![navigate to a particular component's documentation page](https://raw.githubusercontent.com/selemondev/vscode-shadcn-svelte/master/src/assets/images/shadcn-svelte-component-docs.png)

## Shadcn/Svelte Snippets

Easily import and use shadcn-svelte components with ease using snippets within VSCode. Just type `cn` or `shadcn` in your svelte file and choose from an array of components to use.

![shadcn-svelte-snippets-example](https://raw.githubusercontent.com/selemondev/vscode-shadcn-svelte/master/src/assets/images/shadcn-svelte-import.png)

### How it works

| Snippet           | Description                            |
| ----------------- | -------------------------------------- |
| `cn-help`         | How to use shadcn/svelte snippets      |
| `cn-x-help`       | How to use shadcn/svelte@next snippets |
| `cni-[component]` | Adds imports for the component         |
| `cni-x-[component]`| Adds imports for the shadcn/svelte@next component |
| `cnx-[component]` | Adds the markup for the svelte component|

Import and usage snippets are generated dynamically by the extension from the bundled snippet templates plus the latest component registry. If a newly released component does not have a hand-authored template yet, the extension falls back to a generic import and implementation snippet so completions stay available.

Use `shadcn/svelte: Reload Component List` to refresh the cached registry and snippet completions without restarting VS Code.

### Import path setting

For Svelte 5 import snippets, the extension includes `/index.js` by default:

```ts
import { Button } from "$lib/components/ui/button/index.js";
```

You can change this with the `shadcn-svelte.imports.includeIndexJs` setting:

- `true` (default): import snippets use `/index.js`
- `false`: import snippets use the component directory path without `/index.js`

Set it in your VS Code `settings.json`:

```json
{
  "shadcn-svelte.imports.includeIndexJs": false
}
```

You can also search for `shadcn/svelte` in the VS Code Settings UI and toggle `Imports: Include Index Js`.

This setting applies to generated import completions for JavaScript, TypeScript, and Svelte files.

### How to use?

1. Components

For `Alert` component, type `cni-alert` to add imports in your svelte file, and to use the component, use `cnx-alert`.

> Similarly, for any other component, use `cni-[component]` to add imports and `cnx-[component]` to use.

```tsx
// cni-alert - Svelte v4
import * as Alert from "$lib/components/ui/alert"

// cni-x-alert - Svelte v5
import * as Alert from "$lib/components/ui/alert/index.js"

// cnx-alert 
<Alert.Root>
  <Alert.Title>Heads up!</Alert.Title>
  <Alert.Description>
    You can add components to your app using the cli.
  </Alert.Description>
</Alert.Root>
```

### How to contribute?

Contributions are welcome and encouraged! If you have any ideas or suggestions for new features, or if you encounter any bugs or issues, please open an issue or submit a pull request on the GitHub repository.

Developers interested in contributing should read the [Code of Conduct](./CODE_OF_CONDUCT.md) and the [Contributing Guide](./CONTRIBUTING.md).

Use this link - [Snippet Generation](https://snippet-generator.app/?description=https%3A%2F%2Fwww.shadcn-svelte.com%2Fdocs%2Fcomponents&tabtrigger=shadcn-&snippet=&mode=vscode) to generate snippets and add/update them to the `snippets` folder that is located in the `src` accordingly.

For Svelte 5 snippets sourced from the upstream `huntabyte/shadcn-svelte` docs and registry, run:

```bash
pnpm generate:upstream-snippets -- --upstream-dir /path/to/shadcn-svelte
```

This writes [`src/snippets/generated-upstream-next.json`](./src/snippets/generated-upstream-next.json), which the extension loads before falling back to the legacy hand-authored `@next` snippets. Use [`scripts/upstream-snippet-overrides.json`](./scripts/upstream-snippet-overrides.json) for components that should stay on the curated legacy snippet or need a custom extraction strategy.

The repository also includes a scheduled GitHub Action at [`.github/workflows/sync-upstream-snippets.yml`](./.github/workflows/sync-upstream-snippets.yml) that clones the upstream `huntabyte/shadcn-svelte` repo, regenerates the manifest, verifies the extension still builds, and opens a PR when the generated manifest changes.

### Credits

All credits go to the creators of these amazing projects:

- [Shadcn UI](https://ui.shadcn.com) for creating this amazing project.
- [Shadcn Svelte](https://shadcn-svelte.com) for creating the Svelte port of Shadcn UI.
- [Bits UI](https://www.bits-ui.com/docs/introduction) for doing all the hard work to make sure components are accessible.
- [Suhel Makkad](https://github.com/SuhelMakkad/vscode-shadcn-ui) for creating the Shadcn UI VSCode extension.
- [Neeraj Dalal](https://github.com/nrjdalal/shadcn-ui-snippets) for creating the Shadcn UI Snippets VSCode extension.

vscode-shadcn-svelte

Explore Similar Repositories

Was this content helpful?

Recent Feedback

Download README