Skip to content
| Marketplace
Sign in
Visual Studio Code>Snippets>shadcnui-snippetNew to Visual Studio Code? Get it now.
shadcnui-snippet

shadcnui-snippet

emranweb

|
710 installs
| (0) | Free
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. Also Need to import th
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Copied to clipboard
More Info

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-breadcrumb - Shadcnui Breadcrumb component | Docs
  • sc-button - Shadcnui Button component | Docs
  • sc-button-secondary - Shadcnui Button Secondary component | Docs
  • sc-button-destructive - Shadcnui Button Destructive component | Docs
  • sc-button-outline - Shadcnui Button Outline 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-command - Shadcnui Command 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-sc-form - Shadcnui Form component | Docs
  • sc-hovercard - Shadcnui Hovercard component | Docs
  • sc-grid - Shadcnui Grid component | Docs
  • sc-input - Shadcnui Input component | Docs
  • sc-sc-input-otp - Shadcnui Input OTP component | Docs
  • sc-input-label - Shadcnui Input Label component | Docs
  • sc-menubar - Shadcnui Menubar component | Docs
  • sc-navigation-menu - Shadcnui Navigation Menu component | Docs
  • sc-pagination - Shadcnui Pagination component | Docs
  • sc-popover - Shadcnui Popover component | Docs
  • sc-progress - Shadcnui Progress component | Docs
  • sc-radiogroup - Shadcnui Radio Group component | Docs
  • sc-resize-group - Shadcnui Resize Group component | Docs
  • sc-scrollarea - Shadcnui Scroll Area component | Docs
  • sc-select - Shadcnui Select component | Docs
  • sc-separator - Shadcnui Separator component | Docs
  • sc-sc-sheet - Shadcnui Sheet component | Docs
  • sc-skeleton - Shadcnui Skeleton component | Docs
  • sc-slider - Shadcnui Slider component | Docs
  • sc-sc-sonner - Shadcnui Sonner component | Docs
  • sc-switch - Shadcnui Switch component | Docs
  • sc-table - Shadcnui Table component | Docs
  • sc-tabs - Shadcnui Tabs component | Docs
  • sc-textarea - Shadcnui Textarea component | Docs
  • sc-toast - Shadcnui Toast component | Docs
  • sc-toggle - Shadcnui Toggle component | Docs
  • sc-toggle-group - Shadcnui Toggle Group component | Docs
  • sc-tooltip - Shadcnui Tooltip 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!

  • Contact us
  • Jobs
  • Privacy
  • Manage cookies
  • Terms of use
  • Trademarks
© 2025 Microsoft