Vscode Shadcn Svelte

Integrate Shadcn Svelte Components Directly in VSCode

This VSCode extension significantly enhances your Svelte development experience by allowing direct installation and usage of Shadcn Svelte components without needing to switch contexts. It simplifies the process of adding UI elements to your Svelte projects, leveraging the power of Shadcn Svelte directly from your editor. The extension supports features for both Svelte 4 and Svelte 5, ensuring a smooth workflow for developers using either version of the framework.

Features:

• CLI Initialization: Initialize the Shadcn/Svelte CLI directly from the VSCode command palette.
• Single Component Installation: Search and install individual Shadcn Svelte components from within the IDE.
• Multiple Component Installation: Select and install multiple Shadcn Svelte components simultaneously.
• Main Documentation Access: Open the Shadcn Svelte documentation website directly via a command.
• Component Documentation Navigation: Navigate to specific component documentation pages from VSCode.
• General Snippet Trigger: Type cn or shadcn in Svelte files to access component snippets.
• Svelte 4 Snippets: Dedicated snippets for Svelte 4 including cn-help (guidance), cni-[component] (imports), and cnx-[component] (usage markup).
• Svelte 5 Snippets: Dedicated snippets for Svelte 5 (shadcn/svelte@next) including cn-x-help (guidance), cni-x-[component] (imports), and cnx-[component] (usage markup, with specific component variations like cnx-accordion-next).
• Svelte 4 Project Compatibility: Full command and feature support for Svelte 4 based projects.
• Svelte 5 Project Compatibility: Full command and feature support for Svelte 5 based projects using shadcn/svelte@next.

Summary:

This VSCode extension streamlines working with Shadcn Svelte by integrating component installation, documentation access, and code snippets directly into the editor. It supports both Svelte 4 and Svelte 5, allowing developers to efficiently add and use UI components, initialize the CLI, and browse documentation without leaving their development environment. The snippet system further accelerates development by providing quick access to component imports and usage patterns.