emranweb / shadcnui-snippet

A Visual Studio Code extension for Shadcnui UI components snippets. Quickly insert reusable code snippets for Shadcnui components, enhancing your development workflow with ease. This Snippets only provide the Body of the component. You can add the props according to your need.

Shadcnui Snippet

A Visual Studio Code extension for Shadcnui UI components snippets. Quickly insert reusable code snippets for Shadcnui components, enhancing your development workflow with ease.

Features

This extension contains code snippets for Shadcnui for React. It is based on the Shadcnui documentation. This Snippets only provide the Body of the component. You can add the props according to your need. Also Need to import the component from Shadcnui.

Snippets

• sc-accordion - Shadcnui Container component | Docs
• sc-alert - Shadcnui Alert component | Docs
• sc-alert-error - Shadcnui Alert Error component | Docs
• sc-alert-dialog - Shadcnui Alert Dialog component | Docs
• sc-aspect-ratio - Shadcnui Aspect Ratio component | Docs
• sc-avatar - Shadcnui Avatar component | Docs
• sc-badge - Shadcnui Badge component | Docs
• sc-button - Shadcnui Button component | Docs
• sc-calendar - Shadcnui Calendar component | Docs
• sc-card - Shadcnui Card component | Docs
• sc-carousel - Shadcnui Carousel component | Docs
• sc-carousel-vertical - Shadcnui Carousel Vertical component | Docs
• sc-checkbox - Shadcnui Checkbox component | Docs
• sc-collapsible - Shadcnui Collapsible component | Docs
• sc-combobox - Shadcnui Combobox component | Docs
• sc-context-menu - Shadcnui Context Menu component | Docs
• sc-command - Shadcnui Command component | Docs
• sc-datepicker - Shadcnui Date Picker component | Docs
• sc-dialog - Shadcnui Dialog component | Docs
• sc-drawer - Shadcnui Drawer component | Docs
• sc-dropdown - Shadcnui Dropdown component | Docs
• sc-input - Shadcnui Input component | Docs
• sc-menubar - Shadcnui Menubar component | Docs
• sc-navigation-menu - Shadcnui Navigation Menu component | Docs
• sc-progress - Shadcnui Progress component | Docs
• sc-tooltip - Shadcnui Tooltip component | Docs
• sc-toggle - Shadcnui Toggle component | Docs
• sc-toggle-group - Shadcnui Toggle Group component | Docs
• sc-toast - Shadcnui Toast component | Docs
• sc-tabs - Shadcnui Tabs component | Docs
• sc-table - Shadcnui Table component | Docs
• sc-textarea - Shadcnui Textarea component | Docs
• sc-switch - Shadcnui Switch component | Docs

Installation

1. Open Visual Studio Code.
2. Go to the Extensions view by clicking on the Extensions icon in the Activity Bar on the side of the window or using the keyboard shortcut Ctrl+Shift+X.
3. Search for "shadcnui-snippet" in the Extensions view search box.
4. Install the extension by clicking the "Install" button.

Usage

1. Open a file with a supported language (e.g., JSX, JS, TS,TSX).
2. Type the prefix for a Shadcnui component snippet (e.g., sc-button).
3. Press Tab to expand the snippet, and fill in the placeholders for customizable parts.

Supported Languages

• JavaScript (.js)
• TypeScript (.ts)
• JavaScript React (.jsx)
• TypeScript React (.tsx)

Supported Shadcnui

If you find any missing components, please open an issue or submit a pull request.

Enjoy!

shadcnui-snippet's Issues

Drawer

Carousel

Combobox

Command

Dropdown Menu