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.

✨ 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
- Install the extension from the VS Code marketplace
- Open a React/Next.js project with shadcn/ui configured
- Click the shadcn/ui icon in the activity bar to open the component panel
- Browse components by category
- 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
- Place your cursor where you want to insert a component
- Click on any component in the sidebar
- The component code will be inserted with automatic imports
Drag and Drop
- Drag a component from the sidebar
- Drop it anywhere in your code editor
- 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
| |