components

If you opted not to add components during init, you can add them later using the components command.

Prerequisites

You must have already initialized a sugarcube project to run this command.

Usage

pnpm dlx make-sugarcube@latest components [components...]
npx make-sugarcube@latest components [components...]
yarn make-sugarcube@latest components [components...]
bunx --bun make-sugarcube@latest components [components...]

Description

The components command adds UI components to your project. It supports:

  • React components
  • Astro components (Native)
  • Interactive and non-interactive modes

Component Token Integration

When you install components, sugarcube automatically handles their design tokens:

Simple Mode (Glob Patterns)

If your config uses glob patterns (like "src/design-tokens/*.json"), component tokens are automatically included without any config changes needed.

Collections Mode

If you’re using collections, component tokens are automatically added to a dedicated components collection:

{
  "tokens": {
    "base": {
      "source": ["src/design-tokens/colors.json", "src/design-tokens/spacing.json"],
      "type": "custom"
    },
    "components": {
      "source": ["src/design-tokens/button.json", "src/design-tokens/card.json"],
      "type": "custom"
    }
  }
}

This ensures that:

  • Component tokens are properly organized
  • CSS variables are generated for component tokens
  • The config is automatically updated to include new component tokens

Options

  • -f, --framework <type> - Specify framework (react, astro-native)
  • --silent - Suppress logs and prompts
  • --force - Skip overwrite confirmations

Examples

pnpm dlx make-sugarcube@latest components [components...]
npx make-sugarcube@latest components [components...]
yarn make-sugarcube@latest components [components...]
bunx --bun make-sugarcube@latest components [components...]
pnpm dlx make-sugarcube@latest components button card --framework react
npx make-sugarcube@latest components button card --framework react
yarn make-sugarcube@latest components button card --framework react
bunx --bun make-sugarcube@latest components button card --framework react
make-sugarcube components --silent
make-sugarcube components --silent
make-sugarcube components --silent
make-sugarcube components --silent