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

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