Usage

You can add components to your project in two ways:

1. During project initialization when running init
2. After initialization using the components command:

# Interactive mode
make-sugarcube components

# Non-interactive mode
make-sugarcube components button card --framework react

Components follow two different styling approaches:

1. Component-specific styles: Most components (like Button, Card) come with their own CSS files:

   .button {
       background-color: var(--button-bg);
       color: var(--button-text);
       border-radius: var(--button-radius);
   }

   :root {
       --button-bg: var(--bg-primary);
       --button-text: var(--text-primary);
       --button-radius: var(--radius-md);
   }

2. Global styles: Some components (like Input, Label) are styled through global styles following CUBE CSS principles. These styles are provided in global-styles.css when you install CUBE CSS during initialization. If you don’t install CUBE CSS, you’ll need to implement these styles yourself.

The choice between component-specific and global styles is intentional. Some elements (like form controls) are better styled globally to ensure consistent behavior across your application.

Components handle their internal styling (appearance, colors, typography) but don’t include layout or spacing rules. This means you control how components are arranged and spaced in your application.

Here’s a simple example:

<div class="flow">
    <Input label="Username" />
    <Input label="Password" />
    <Button>Sign in</Button>
</div>

In this example:

• The Input and Button components handle their own appearance
• The flow ‘composition’ class handles the spacing between components

This separation gives you complete control over your layout while maintaining consistent component styling.

You can implement variants using either CSS attributes or JavaScript props - the choice is yours:

// CSS approach
<Button data-variant="secondary">Primary</Button>

// JavaScript approach
<Button variant="secondary">Primary</Button>

.button[data-variant="secondary"] {
    --button-bg: var(--bg-secondary);
}

While we prefer the CSS approach for keeping styles in CSS where they belong, both methods are valid. The CSS approach makes styles easier to maintain and modify, while the JavaScript approach provides type safety and IDE autocompletion.