║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║

---

title: ShadCN CLI 3.0 Integration Guide description: Comprehensive guide to integrating Billing SDK components using ShadCN CLI 3.0 with MCP support keywords: shadcn, cli, billing-sdk, components, mcp, registry

Project Initialization

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

<Tabs items={['npx', 'pnpm', 'yarn', 'bun']} defaultValue="npx" groupId="shadcn-cli-3-tabs"> <Tab value="npx"> bash npx shadcn@latest init </Tab> <Tab value="pnpm"> bash pnpm dlx shadcn@latest init </Tab> <Tab value="yarn"> bash yarn dlx shadcn@latest init </Tab> <Tab value="bun"> bash bunx shadcn@latest init </Tab> </Tabs>

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:

<Tabs items={['npx', 'pnpm', 'yarn', 'bun']} defaultValue="npx" groupId="installation-tabs"> <Tab value="npx"> bash npx shadcn@latest add @billingsdk/[component] </Tab> <Tab value="pnpm"> bash pnpm dlx shadcn@latest add @billingsdk/[component] </Tab> <Tab value="yarn"> bash yarn dlx shadcn@latest add @billingsdk/[component] </Tab> <Tab value="bun"> bash bunx shadcn@latest add @billingsdk/[component] </Tab> </Tabs>

Using Billing SDK CLI

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

<Tabs items={['npx', 'pnpm', 'yarn', 'bun']} defaultValue="npx" groupId="billingsdk-cli-tabs"> <Tab value="npx"> bash npx @billingsdk/cli add [component] </Tab> <Tab value="pnpm"> bash pnpm dlx @billingsdk/cli add [component] </Tab> <Tab value="yarn"> bash yarn dlx @billingsdk/cli add [component] </Tab> <Tab value="bun"> bash bunx @billingsdk/cli add [component] </Tab> </Tabs>

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.

{/* ### View Registry

Get a detailed overview of all available components in the Billing SDK registry:

<Tabs items={['npx', 'pnpm', 'yarn', 'bun']} defaultValue="npx" groupId="shadcn-cli-3-discover-components-tabs"> <Tab value="npx"> bash npx shadcn@latest view @billingsdk </Tab> <Tab value="pnpm"> bash pnpm dlx shadcn@latest view @billingsdk </Tab> <Tab value="yarn"> bash yarn dlx shadcn@latest view @billingsdk </Tab> <Tab value="bun"> bash bunx shadcn@latest view @billingsdk </Tab> </Tabs> */}

List Components

Get a concise list of all available component names:

<Tabs items={['npx', 'pnpm', 'yarn', 'bun']} defaultValue="npx" groupId="shadcn-cli-3-discover-components-list-tabs"> <Tab value="npx"> bash npx shadcn@latest list @billingsdk </Tab> <Tab value="pnpm"> bash pnpm dlx shadcn@latest list @billingsdk </Tab> <Tab value="yarn"> bash yarn dlx shadcn@latest list @billingsdk </Tab> <Tab value="bun"> bash bunx shadcn@latest list @billingsdk </Tab> </Tabs>

Search Components

Search for specific components using keywords or phrases:

<Tabs items={['npx', 'pnpm', 'yarn', 'bun']} defaultValue="npx" groupId="shadcn-cli-3-discover-components-search-tabs"> <Tab value="npx"> bash npx shadcn@latest search @billingsdk -q "banner" </Tab> <Tab value="pnpm"> bash pnpm dlx shadcn@latest search @billingsdk -q "banner" </Tab> <Tab value="yarn"> bash yarn dlx shadcn@latest search @billingsdk -q "banner" </Tab> <Tab value="bun"> bash bunx shadcn@latest search @billingsdk -q "banner" </Tab> </Tabs>

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:

<Tabs items={['npx', 'pnpm', 'yarn', 'bun']} defaultValue="npx" groupId="shadcn-cli-3-mcp-server-tabs"> <Tab value="npx"> bash npx shadcn@latest mcp init </Tab> <Tab value="pnpm"> bash pnpm dlx shadcn@latest mcp init </Tab> <Tab value="yarn"> bash yarn dlx shadcn@latest mcp init </Tab> <Tab value="bun"> bash bunx shadcn@latest mcp init </Tab> </Tabs>

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.

║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║