Getting Started

Core Concepts

Quanta components are designed to be minimal, composable, and theme-aware by default. This guide explains the philosophy and structure behind each component class so you can extend or build your own.

Naming Convention

Every component starts with the prefix .quanta- followed by a specific name, for example:

<div class="quanta-card">...</div>
<button class="quanta-btn">...</button>
<input class="quanta-custom-form-input">

This prevents class collisions and ensures you're always referencing a Quanta-defined block.

Component Structure

Most components follow a utility-enhanced BEM-inspired structure. For example:

<div class="quanta-card quanta-card-solid">
  <div class="quanta-card-header">Title</div>
  <div class="quanta-card-body">Content</div>
</div>

Sub-elements (like header/body) are optional and can be replaced with utility classes as needed.

Variants & States

Components come with predefined variants based on semantic states (primary, secondary, success, danger, etc.) and styles (solid, outline, ghost, etc.).

<button class="quanta-btn quanta-btn-primary quanta-btn-solid">
  Primary
</button>

<button class="quanta-btn quanta-btn-danger quanta-btn-outline">
  Danger Outline
</button>

You can also combine variants with Quanta utilities like spacing, grid, flex, and more.

Customization & Overrides

You can override Quanta styles at any time using either utility classes or raw CSS:

.quanta-card {
  border-radius: var(--quanta-rounded-lg);
  box-shadow: var(--quanta-shadow-lg);
}

For full control, modify the CSS tokens in your root file to apply changes globally.