ShadCN CLI 3.0 Integration Guide

Playground

Copy Page

Project Initialization

Initialize your project with ShadCN CLI to set up the necessary dependencies and configuration.

npx shadcn@latest init

pnpm dlx shadcn@latest init

yarn dlx shadcn@latest init

bunx shadcn@latest init

The init command automatically:

• Installs required dependencies
• Adds utility functions to your project
• Configures tailwind.config.js with proper settings
• Sets up default component styles and theming

Adding Components

You can add Billing SDK components to your project using either the standard ShadCN CLI or the dedicated Billing SDK CLI. Choose the method that best fits your workflow.

Using ShadCN CLI

Add components using the trusted namespace:

npx shadcn@latest add @billingsdk/[component]

pnpm dlx shadcn@latest add @billingsdk/[component]

yarn dlx shadcn@latest add @billingsdk/[component]

bunx shadcn@latest add @billingsdk/[component]

Using Billing SDK CLI

For a more streamlined experience, use the dedicated Billing SDK CLI:

npx @billingsdk/cli add [component]

pnpm dlx @billingsdk/cli add [component]

yarn dlx @billingsdk/cli add [component]

bunx @billingsdk/cli add [component]

Note: Replace [component] with the actual component name you want to add, such as pricing-table-one or payment-method-manager.

Component Discovery

Explore and discover available Billing SDK components using the built-in discovery commands. These tools help you find the right components for your specific use cases.

List Components

Get a concise list of all available component names:

npx shadcn@latest list @billingsdk

pnpm dlx shadcn@latest list @billingsdk

yarn dlx shadcn@latest list @billingsdk

bunx shadcn@latest list @billingsdk

Search Components

Search for specific components using keywords or phrases:

npx shadcn@latest search @billingsdk -q "banner"

pnpm dlx shadcn@latest search @billingsdk -q "banner"

yarn dlx shadcn@latest search @billingsdk -q "banner"

bunx shadcn@latest search @billingsdk -q "banner"

Search Examples

# Search for pricing-related components
npx shadcn@latest search @billingsdk -q "pricing"

# Find payment method components
npx shadcn@latest search @billingsdk -q "payment"

# Look for subscription management components
npx shadcn@latest search @billingsdk -q "subscription"

MCP (Model Context Protocol) Support

ShadCN CLI 3.0 introduces MCP support, enabling seamless integration with AI assistants for component management. This feature allows your AI coding assistant to directly interact with the component registry and add components to your project through natural language commands.

Setup Process

1. Configure Registry

First, ensure the Billing SDK registry is configured in your components.json:

{
  "registries": {
    "@billingsdk": "https://billingsdk.com/r/{name}.json"
  }
}

2. Initialize MCP Server

Initialize the MCP server in your project:

npx shadcn@latest mcp init

pnpm dlx shadcn@latest mcp init

yarn dlx shadcn@latest mcp init

bunx shadcn@latest mcp init

AI-Assisted Component Addition

Once MCP is set up, you can use natural language commands with your AI assistant. Simply describe the component you need:

Example prompts:

Add a pricing table to my project from billingSDK registry

I need a payment method manager component from billingSDK registry

Add a subscription management interface from billingSDK registry

Include a usage meter component for my billing dashboard from billingSDK registry

Benefits of MCP Integration

• Natural Language Commands: No need to remember specific component names or commands
• Context-Aware Suggestions: AI can suggest appropriate components based on your project needs
• Streamlined Workflow: Reduce time spent searching and adding components
• Error Prevention: AI assistance helps avoid command syntax errors

Supported AI Assistants

MCP support works with AI coding assistants that support the Model Context Protocol, including:

• GitHub Copilot
• Cursor AI
• Other MCP-compatible tools

Note: Ensure your AI assistant supports MCP before attempting to use these features. The MCP server must be running for the integration to work properly.

Next Steps

• Explore available Billing SDK components
• Learn about component customization
• Check out API integration guides

For additional support, visit our GitHub repository or Discord community.