feat: automatic snippet generation

[DarthGigi]

Is your feature request related to a problem? Please describe.
There are a lot of components that do not have import nor implementation snippets.

Describe the solution you'd like
An update to the extension so all the current components have snippets.

Describe alternatives you've considered
Alternatively, a way to make this process automatic (I thought "Reload Component List" does that, but it doesn't).

Additional context
No additional context.

[DarthGigi]

Hey @selemondev , just a gentle ping on this! I hope you don't mind the follow-up, it's been a while.

[selemondev]

Hey @selemondev , just a gentle ping on this! I hope you don't mind the follow-up, it's been a while.

Hey there @DarthGigi, thank you for your patience. The latest version ( v0.6.6 ) should now contain the feature you requested. Do let me know whether it works as requested 😁.

[DarthGigi]

@selemondev Hey, thank you so much! Just tried it out and all the new components show up as snippets now!

However, the import paths are starting with /components/ui/ instead of $lib/components/ui (or any custom configured alias in components.json) which are not valid.

Examples:

import * as Sidebar from "/components/ui/sidebar/index.js";
import * as Empty from "/components/ui/empty/index.js";

components.json:

// ...
  "aliases": {
    "components": "$components",
    "utils": "$lib/utils",
    "ui": "$ui",
    "hooks": "$hooks",
    "lib": "$lib"
  },
// ...

svelte.config.js:

// ...
  kit: {
    alias: {
      $lib: "src/lib",
      $components: "src/lib/components",
      $ui: "src/lib/components/ui",
      $utils: "src/lib/utils",
      $hooks: "src/lib/hooks"
    }
  }
// ...

[selemondev]

Hey there @DarthGigi, this issue has now been resolved in version 0.6.7 ✨. The extension now reads components.json and resolves snippet import paths from the configured aliases. It prefers aliases.ui, then falls back through the documented shadcn/svelte defaults, ending at $lib/components/ui if nothing is configured.

If components.json contains:

"aliases": 
{
     "ui": "$ui",
     "lib": "$lib"
}

The snippet inserts:

import * as Sidebar from "$ui/sidebar/index.js";

If components.json does not define a custom UI alias, it falls back to:

import * as Sidebar from "$lib/components/ui/sidebar/index.js";

@selemondev Hey, thank you so much! Just tried it out and all the new components show up as snippets now!

However, the import paths are starting with /components/ui/ instead of $lib/components/ui (or any custom configured alias in components.json) which are not valid.

Examples:

import * as Sidebar from "/components/ui/sidebar/index.js";
import * as Empty from "/components/ui/empty/index.js";
components.json:

// ...
"aliases": {
"components": "$components",
"utils": "$lib/utils",
"ui": "$ui",
"hooks": "$hooks",
"lib": "$lib"
},
// ...
svelte.config.js:

// ...
kit: {
alias: {
$lib: "src/lib",
$components: "src/lib/components",
$ui: "src/lib/components/ui",
$utils: "src/lib/utils",
$hooks: "src/lib/hooks"
}
}
// ...

[DarthGigi]

@selemondev Thanks again! I can confirm that the alias issue has been fixed.

I did notice that since v0.6.1 the intellisense / completion isn't working like it used to. Typing cni or cnx doesn't show all the snippets like before.

Pre-v0.6.1

ScreenShot.2026-04-04.at.04.03.PM.KoMMwZV9.mp4

After-v0.6.1

ScreenShot.2026-04-04.at.04.04.PM.4emNbuA8.mp4

P.S. This is just a small nitpick / personal preference, but would it be possible to add an option to enable/disable the /index.js being added at the end of the import?

[selemondev]

Hey there @DarthGigi, the option to enable/disable the /index.js suffix on the import path has been added in version 0.6.8 ✨.

The default import path as shown in the shadcn-svelte docs for components includes the /index.js suffix, but now you can change this default behaviour by either of the following methods:

1. Searching for shadcn/svelte in the VS Code Settings UI and toggling Imports: Include Index Js.
2. By setting the "shadcn-svelte.imports.includeIndexJs" property to false in your VS Code settings as shown below:

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

@selemondev Thanks again! I can confirm that the alias issue has been fixed.

I did notice that since v0.6.1 the intellisense / completion isn't working like it used to. Typing cni or cnx doesn't show all the snippets like before.

Pre-v0.6.1
ScreenShot.2026-04-04.at.04.03.PM.KoMMwZV9.mp4
After-v0.6.1
ScreenShot.2026-04-04.at.04.04.PM.4emNbuA8.mp4
P.S. This is just a small nitpick / personal preference, but would it be possible to add an option to enable/disable the /index.js being added at the end of the import?

[DarthGigi]

@selemondev Hey, just tested it out and the /index.js suffix is omitted when I disable it in the extensions' settings, thanks!

The intellisense / completions have not been fixed yet, but I don't know if 0.6.8 is suppose to fix those or not.

ScreenShot.2026-04-04.at.08.04.PM.oVXOdztN.mp4

[selemondev]

Hey there @DarthGigi, to trigger the completion flow you need to type cni- or shadcn-i for component imports ( as stated in the docs ) then the intellisense will take over from there.

@selemondev Hey, just tested it out and the /index.js suffix is omitted when I disable it in the extensions' settings, thanks!

The intellisense / completions have not been fixed yet, but I don't know if 0.6.8 is suppose to fix those or not.

ScreenShot.2026-04-04.at.08.04.PM.oVXOdztN.mp4

[DarthGigi]

@selemondev I know that cni- triggers the completion flow but before version 0.6.1 just cni/cnx triggered it as well, no dash required.