shadcn Helper

shadcn Helper is a plugin for JetBrains IDEs that supercharges your shadcn/ui development with intelligent code completion, multi-registry support, live component previews, and accessibility inspections—bringing true IDE intelligence to your component workflow.

This repository exists as a community hub and issue tracker.

Feedback and Support

If you have any feedback, suggestions, or issues with the plugin, please use our GitHub repository to report them (you may have found it already). You can also use the repository to contribute to the plugin development or request new features.

• GitHub repository: shadcn Helper
• JetBrains Marketplace: shadcn Helper Plugin
• Ilscipio Agency: Ilscipio
• Our awesome developer tools: Aivory

Features

Code Intelligence

• Smart, context-aware code completion for component imports, props, and variants
• Inline parameter hints for variant values like "default", "destructive", "outline"
• Hover documentation for components with usage examples
• Visual line markers for shadcn components in your code

Code Quality

• Real-time accessibility inspections to catch missing aria-labels and keyboard issues
• Quick fixes that automatically resolve detected problems
• Radix import migration—detects direct @radix-ui/* imports and auto-fixes to shadcn paths

Productivity

• 10+ live templates with sc: prefix for rapid component scaffolding
• Component browser with live previews and one-click installation
• Multi-registry support for 150+ community registries
• Full monorepo support (Turborepo, Nx, pnpm workspaces, Lerna, Yarn)

Supported Frameworks

React

Build modern React applications with shadcn/ui.

• Component completion for all 50+ shadcn components
• Props and variant autocompletion
• Next.js, Vite, Remix support
• Path alias resolution from tsconfig.json

Vue

Create Vue applications with shadcn-vue.

• Component completion for Vue shadcn components
• Nuxt and Vite support
• Reka UI and Radix Vue integration

Svelte

Build Svelte apps with shadcn-svelte.

• SvelteKit support
• Bits UI integration
• Component props completion

Solid

Develop with Solid and shadcn components.

• SolidStart support
• Component completion and documentation

Installation

You can install shadcn Helper from the JetBrains Marketplace or directly from the IDE settings.

• From the Marketplace: Go to shadcn Helper and click on the Install button. Then restart your IDE to activate the plugin.
• From the IDE settings: Go to File > Settings > Plugins and search for "shadcn Helper". Click on the Install button and restart your IDE to activate the plugin.

Usage

To use shadcn Helper, open a project with shadcn/ui configured (has a components.json file).

1. Install the plugin and restart your IDE
2. Open a project containing components.json
3. The plugin automatically detects your shadcn configuration
4. Start typing component imports—completion kicks in automatically
5. Use Ctrl+Space (or Cmd+Space on Mac) to trigger code completion manually
6. Type a live template prefix (sc:) and press Tab to expand
7. Open the shadcn tool window to browse and install components

Live Templates

Type a prefix and press Tab to expand:

shadcn (sc:)

• sc:button - Button with variant prop
• sc:card - Card with Header, Content, Footer
• sc:dialog - Dialog with Trigger and Content
• sc:form-field - Form field with validation
• sc:dropdown - Dropdown menu with items
• sc:tabs - Tabs with TabsList and TabsContent
• sc:select - Select with options
• sc:toast - Toast hook usage
• sc:import - Component import statement
• sc:cn - cn() class helper

Component Browser

1. Open View > Tool Windows > shadcn
2. Browse the Components tab to see all available components
3. Click a component to see its live preview
4. Click Install to add it to your project
5. Use the Registries tab to enable community registries

Key Features in Action

• Smart Completion: Get context-aware suggestions for imports, props, and variants
• Multi-Registry: Access 150+ community registries like Magic UI, Aceternity, and more
• Live Preview: See how components look before installing them
• Accessibility: Catch missing aria-labels and keyboard navigation issues
• Monorepo Support: Works with Turborepo, Nx, pnpm workspaces out of the box

Requirements

• JetBrains IDE 2023.3+ (WebStorm, IntelliJ IDEA Ultimate, PhpStorm, Rider)
• Node.js 18+ (for CLI operations like component installation)
• A project with shadcn/ui configured (components.json present)

Troubleshooting

Completion Not Appearing?

1. Ensure your project has a components.json file
2. Check that Node.js is installed and in your PATH
3. Try invalidating caches: File > Invalidate Caches

Components Not Installing?

1. Verify Node.js 18+ is installed: node --version
2. Check the IDE log for errors: Help > Show Log in Explorer
3. Ensure your package manager (npm, pnpm, yarn, bun) is configured

Community Registry Not Syncing?

Some community registries are CLI-only and don't expose HTTP endpoints. The plugin will try CLI fallback, but you may need to add components manually using npx shadcn add @registry/component.

Node.js Not Detected?

After installing Node.js, restart your IDE to pick up the new PATH environment variable.

Contributing

We welcome contributions! If you'd like to improve the plugin or add new features, please feel free to submit issues or feature requests.

About Ilscipio

We are Ilscipio, developers with a passion for creating tools that make developers' lives easier. From E-Commerce solutions to AI projects and JetBrains plugins, we're committed to building quality software for the developer community.

We also created Flexible Julia for Julia developers and PyUI Helper for Python GUI development.

Visit us at www.ilscipio.com or reach out at info@ilscipio.com for custom plugin development, consulting, or just to say hello!

License

Apache 2.0