Skip to content
| Marketplace
Sign in
Visual Studio Code>Snippets>shadcn/ui Component PanelNew to Visual Studio Code? Get it now.
shadcn/ui Component Panel

shadcn/ui Component Panel

TudorGR

|
8 installs
| (1) | Free
Visual sidebar with shadcn/ui components for easy drag & drop insertion with auto-imports and installation
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Copied to clipboard
More Info

shadcn/ui Component Panel

A VS Code extension that provides a visual sidebar with shadcn/ui components that can be clicked or dragged and dropped into your code files with automatic imports and installation.

Extension Demo

✨ Features

  • Visual Component Browser: Browse all shadcn/ui components with live previews organized by categories
  • Click to Insert: Click any component to insert it at your cursor position
  • Drag & Drop: Drag components from the sidebar directly into your editor
  • Auto Import: Automatically adds the correct import statements at the top of your files
  • Auto Install: Runs npx shadcn@latest add [component] automatically when needed
  • Smart Import Management: Prevents duplicate imports and handles existing imports intelligently
  • Clean UI: Minimal interface showing only component names and visual previews

🚀 Quick Start

  1. Install the extension from the VS Code marketplace
  2. Open a React/Next.js project with shadcn/ui configured
  3. Click the shadcn/ui icon in the activity bar to open the component panel
  4. Browse components by category
  5. Click or drag any component into your code

📋 Requirements

  • VS Code 1.101.0 or higher
  • A React/Next.js project with shadcn/ui configured
  • Node.js and npm/yarn/pnpm for component installation

🎯 Usage

Click to Insert

  1. Place your cursor where you want to insert a component
  2. Click on any component in the sidebar
  3. The component code will be inserted with automatic imports

Drag and Drop

  1. Drag a component from the sidebar
  2. Drop it anywhere in your code editor
  3. The component will be inserted at the drop location with automatic imports

Supported File Types

  • .tsx and .jsx files
  • .ts and .js files (for import statements)

📦 Supported Components

  • Form: Button, Input, Textarea, Checkbox, Label, Select, Switch, Slider, RadioGroup
  • Layout: Card, Separator, Aspect Ratio, Container, Stack
  • Navigation: NavigationMenu, Breadcrumb, Pagination, Tabs, Menubar
  • Overlay: Dialog, AlertDialog, Sheet, Popover, HoverCard, Tooltip, DropdownMenu, ContextMenu
  • Feedback: Alert, Progress, Skeleton, Spinner, Badge, Avatar
  • Data Display: Table, DataTable, Calendar, Carousel, Collapsible, Accordion
  • Charts: Area Chart, Bar Chart, Line Chart, Pie Chart, Radar Chart

🛠️ Extension Settings

Currently, this extension doesn't require any configuration. It works out of the box with standard shadcn/ui setups.

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

Issues & Support

If you encounter any issues or have feature requests, please file them in the GitHub Issues.

📝 Changelog

1.0.0

  • Initial release
  • Visual component browser with live previews
  • Click to insert and drag & drop functionality
  • Automatic import management
  • Auto-installation of components
  • Contact us
  • Jobs
  • Privacy
  • Manage cookies
  • Terms of use
  • Trademarks
© 2025 Microsoft