skills.rest
ToonVos
ToonVosCOMMUNITY
Explore all skills by this author →
GitHub

shadcn-ui

Install ShadCN UI v2.3.0 components in Wasp projects with import path fixes.

2|1|Updated Nov 24, 2025
Search Tags:#frontend#UI#component#Tailwind CSS#installation#ShadCN#Wasp
One-click install
npx skills add https://github.com/ToonVos/empty-opensaas --skill shadcn-ui
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: shadcn-ui
Source: https://github.com/ToonVos/empty-opensaas/tree/main/.claude/skills/shadcn-ui
Command: npx skills add https://github.com/ToonVos/empty-opensaas --skill shadcn-ui

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill provides a critical, version-locked workflow for installing ShadCN UI components in Wasp projects, preventing common compatibility issues with Tailwind CSS v4 and import errors. It ensures a smooth UI development experience.

Core Features & Use Cases

  • CRITICAL Version Lock: Enforces the use of ShadCN v2.3.0 to maintain compatibility with Wasp's Tailwind CSS setup.
  • Mandatory Import Path Fix: Guides on fixing the automatically generated, incorrect import paths for cn utility, preventing "module not found" errors.
  • Streamlined Component Installation: Offers a clear, step-by-step process for adding any ShadCN component, from buttons to forms.
  • Use Case: Install a new Dialog component from ShadCN UI. This Skill will ensure you use the correct version, automatically fix the import paths, and guide you to integrate it into your Wasp application without styling or build errors.

Quick Start

Install the button component from ShadCN UI. Ensure the correct version is used and fix any import path errors.

Frequently Asked Questions about 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?▼

Install ShadCN UI components in Wasp by enforcing version 2.3.0, running the ShadCN CLI to add components like button or card, then fixing the auto-generated import paths from `s/lib/utils` to `../../lib/utils` to resolve module errors and ensure correct styling.

Why am I getting import path errors when adding ShadCN components to Wasp?▼

ShadCN's default import paths are incorrect for Wasp's project structure. The `cn` utility import generates `s/lib/utils` instead of the correct relative path `../../lib/utils`. This Skill guides you to fix those paths after component installation.

Does ShadCN UI work with Wasp and Tailwind CSS v4?▼

ShadCN UI works with Wasp when pinned to version 2.3.0, which maintains compatibility with Wasp's Tailwind CSS setup. Using other versions causes styling and build conflicts that this workflow prevents.

What's the correct version of ShadCN UI to use with Wasp?▼

Use ShadCN UI version 2.3.0 with Wasp projects. This version is critical for compatibility and prevents errors with Tailwind CSS integration and component imports.

Can I use any ShadCN component in Wasp or are there limitations?▼

You can install any ShadCN component in Wasp—buttons, cards, dialogs, forms—but all require the same workflow: version 2.3.0 enforcement and import path correction from `s/lib/utils` to `../../lib/utils`.

How do I verify ShadCN components are working correctly after installation in Wasp?▼

After installing a ShadCN component and fixing import paths, verify by running your Wasp application and confirming the component renders without styling errors or module-not-found warnings.

Related Skills

Explore More Software Engineering Skills→
docaohieu2808docaohieu2808

ui-styling

Style user interfaces with shadcn/ui components and Tailwind CSS.

Community
Intermediate
Veloxia-agencyVeloxia-agency

ckm:ui-styling

Create accessible React interfaces with shadcn/ui and Tailwind CSS.

Community
Advanced
vuminhieuvuminhieu

ui-styling

Build accessible React interfaces with shadcn/ui, Tailwind CSS, and canvas visuals.

Community
Intermediate
edisonabeledisonabel

ckm:ui-styling

Create accessible responsive interfaces with shadcn/ui components and Tailwind CSS.

Community
Advanced