taro-shadcn-cli-helper

Taro Shadcn CLI Assistant

This Skill is designed to guide users on how to use the taro-shadcn CLI to quickly integrate UI components into a Taro project.

Quick Start

1. Initialize the project

Before using any components, you need to initialize your project first. This will create the components.json configuration file and install the base dependencies.

npx taro-shadcn init

During initialization, you can choose:

Component directory: the default is src/components。
Utils directory: the default is src/lib/utils。
Install base dependencies: including clsx, tailwind-merge, class-variance-authority, lucide-react-taro。

2. Add components

Use the add command to add components to your project.

# 添加单个组件
npx taro-shadcn add button

# 一次性添加多个组件
npx taro-shadcn add button accordion badge

Common options：

-y, --yes: skip all confirmation prompts.
-o, --overwrite: if the component already exists, overwrite it directly.

Directory structure

After initialization, your project structure is usually as follows:

src/
  lib/
    utils/
      index.ts      # 导出的 cn 辅助函数
  components/
    ui/
      button.tsx    # 自动生成的组件
components.json     # CLI 配置文件

Notes

Make sure you run the command in a valid Taro project root directory.
taro-shadcn depends on Tailwind CSS, so make sure your project has Tailwind configured.
If some components have additional dependencies (such as calendar depends on date-fns), the CLI will prompt you to install them.