skills.rest
mbeps
mbepsCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

ToonVos-shadcn-ui

Install ShadCN UI components into Wasp projects with version locking and import path fixes.

Updated Feb 23, 2026
Search Tags:#tailwind#ui components#installation#shadcn#wasp#import errors
One-click install
npx skills add https://github.com/mbeps/Skills --skill toonvos-shadcn-ui
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ToonVos-shadcn-ui
Source: https://github.com/mbeps/Skills/tree/main/toonvos-shadcn-ui
Command: npx skills add https://github.com/mbeps/Skills --skill toonvos-shadcn-ui

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill streamlines the installation and configuration of ShadCN UI components within Wasp projects, addressing common import errors and ensuring compatibility.

Core Features & Use Cases

  • Guided Installation: Provides a step-by-step workflow for adding ShadCN components.
  • Version Locking: Enforces the use of ShadCN v2.3.0, critical for Wasp/Tailwind compatibility.
  • Automated Fixes: Includes a mandatory step to correct incorrect import paths generated by ShadCN.
  • Use Case: When starting a new Wasp project and needing to add a button component, this Skill guides you through the npx [email protected] add button command and the essential import path correction.

Quick Start

Use the toonvos-shadcn-ui skill to install the button component and fix its import path.

Frequently Asked Questions about ToonVos-shadcn-ui

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I install ShadCN UI components in a Wasp project?▼

To install ShadCN UI components in a Wasp project, run the `npx [email protected] add` command and then manually correct the mandatory import path errors in the generated component files to ensure proper integration.

Why do I get import errors after adding ShadCN components to Wasp?▼

Import errors occur after adding ShadCN components to Wasp because the generated component files contain incorrect import paths. You must apply automated fixes to correct these mandatory import path errors for the UI elements to function correctly.

Does ShadCN UI work with Tailwind CSS in Wasp?▼

ShadCN UI works with Tailwind CSS in Wasp only when you enforce version compatibility. Locking ShadCN to version 2.3.0 is critical for resolving Tailwind CSS compatibility issues within your Wasp project.

What is the correct ShadCN version to use for Wasp compatibility?▼

The correct ShadCN version for Wasp compatibility is 2.3.0. Enforcing this specific version lock during the component installation process prevents version conflicts and ensures correct integration with Tailwind CSS.

How do I fix Tailwind CSS compatibility issues with ShadCN in Wasp?▼

Fix Tailwind CSS compatibility issues with ShadCN in Wasp by enforcing a strict version lock to ShadCN v2.3.0. This guided installation step prevents version mismatch errors when adding UI components.

Related Skills

Explore More Software Engineering Skills→
lildibbblildibbb

shadcn-ui

Build React UI components with shadcn/ui, Radix UI, and Tailwind CSS.

Community
Intermediate
petbrainspetbrains
13

frontend-shadcn

Provide copy-paste React/Next.js UI components built on Radix UI and Tailwind CSS.

Official
Intermediate
Thanh-aperoThanh-apero
1

ui-styling

Build accessible user interfaces with shadcn/ui components and Tailwind CSS styling.

Community
Advanced
tenequmtenequm
32

styling-with-tailwind

Apply Tailwind CSS utility classes and shadcn/ui patterns to style React interfaces.

Community
Intermediate