Skills
.Work. You
Rest

shadcn-ui

Community

Integrate ShadCN UI seamlessly into Wasp.

Software Engineering#frontend#UI#component#Tailwind CSS#installation#ShadCN#Wasp
AuthorToonVos
Version1.0.0
Installs0

System Documentation

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.

Dependency Matrix

Required Modules

None required

Components

Standard package

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: shadcn-ui
Download link: https://github.com/ToonVos/empty-opensaas/archive/main.zip#shadcn-ui

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 471,000+ vetted skills library on demand.