BigBlocks

Use the BigBlocks CLI to add components to your project

Overview

The BigBlocks CLI allows you to quickly add components to your project with proper dependencies and configuration.

Installation

The CLI runs via bunx (or npx), so no installation is required. You can also install it globally:

bunx shadcn@latest add [component]

Commands

add

Add components to your project.

bunx shadcn@latest add [component]

Options

  • -y, --yes - Skip confirmation prompts
  • -o, --overwrite - Overwrite existing files
  • -c, --cwd <path> - The working directory (default: current directory)
  • -p, --path <path> - Path to add the component to

Examples

Add a specific component:

bunx shadcn@latest add https://registry.bigblocks.dev/r/step-indicator.json

Add multiple components:

bunx shadcn@latest add https://registry.bigblocks.dev/r/step-indicator.json https://registry.bigblocks.dev/r/wallet-overview.json

Add to a specific directory:

bunx shadcn@latest add https://registry.bigblocks.dev/r/step-indicator.json -p ./src/components/ui

init

Initialize your project with BigBlocks configuration.

bunx shadcn@latest init

This command will:

  • Create a components.json configuration file
  • Set up necessary dependencies
  • Configure your project for BigBlocks components

Configuration

The CLI uses a components.json file in your project root:

{
  "$schema": "https://ui.shadcn.com/schema.json",
  "style": "new-york",
  "rsc": true,
  "tsx": true,
  "tailwind": {
    "config": "",
    "css": "app/globals.css",
    "baseColor": "neutral",
    "cssVariables": true
  },
  "aliases": {
    "components": "@/components",
    "utils": "@/lib/utils",
    "ui": "@/components/ui",
    "lib": "@/lib",
    "hooks": "@/hooks"
  }
}

Component Registry

BigBlocks components are served from our registry. Each component has a unique URL:

https://registry.bigblocks.dev/r/[component-name].json

The registry provides:

  • Component source code
  • Dependencies
  • Installation instructions
  • Documentation links

Troubleshooting

Common Issues

Component not found: Ensure you're using the correct registry URL and the component exists.

Dependency conflicts: Check that your project meets the minimum requirements for React and Tailwind CSS.

TypeScript errors: Make sure TypeScript is properly configured in your project.

Getting Help