Shadcn UI Snippets

Enhance Your Next.js Workflow with shadcn-ui VSCode Snippets

This VSCode extension, shadcn-ui-next, is designed to streamline the integration of shadcn-ui components into your Next.js projects. It provides developers with convenient code snippets, activated by simple prefixes like cn or shadcn directly within JSX/TSX files. This tool facilitates quicker scaffolding of UI elements by automating the inclusion of import statements and basic component structures, significantly boosting productivity and making the development experience smoother, especially when working extensively with the shadcn-ui library.

Features:

• Snippet Prefix Activation: Type cn or shadcn in JSX/TSX files to trigger a list of available shadcn-ui components.
• Help Command (cn-help): Access instructions on how to utilize the shadcn-ui snippets directly within VSCode.
• Component Import Snippets (cni-[component]): Automatically generate and insert import statements for any chosen shadcn-ui component.
• Component Usage Snippets (cnx-[component]): Insert the basic JSX/TSX markup for a selected shadcn-ui component.
• Page-Level Component Snippets (cnp-[component]): Provides pre-structured code for larger, page-specific components like forms, including necessary hooks and schema setup.
• Support for Multi-Word Component Names: Correctly handles components with multi-word names (e.g., hover-card) in snippet triggers like cni-hover-card.
• User Contribution System: Enables developers to add new components or variations by creating simple markdown definition files.
• Automated Snippet Generation: Utilizes a bun run generate command to process markdown files and create the VSCode snippets.
• Clear Separation of Imports and Usage: Offers distinct snippets for importing a component and for its JSX/TSX implementation.
• Variant Support: Includes snippets for component variants, as demonstrated with the 'destructive' variant for the Alert component.
• Example-Driven Usage: Provides clear examples for common components like Alert and Form, showcasing both import and implementation.

Summary:

In essence, shadcn-ui-next serves as a valuable VSCode companion for developers using shadcn-ui with Next.js. It offers a comprehensive set of snippets for various components, including page-level structures like forms and specific component variants. By simplifying the repetitive tasks of importing and structuring components, the extension allows developers to focus more on building features and less on boilerplate code, fostering a more efficient and enjoyable development process.