> ## Documentation Index
> Fetch the complete documentation index at: https://docs.mailkick.app/llms.txt
> Use this file to discover all available pages before exploring further.

# Component Overrides

> How to customize component content while keeping design linked to the master component

## Overview

**Overrides** let you customize the content of a component instance in an email while keeping its design linked to the master component. This is the mechanism that connects components in your library to instances in emails.

## The Core Concept

<CardGroup cols={2}>
  <Card title="Master Component" icon="package">
    **In the library**

    * Fixed design
    * Fixed structure
    * Source of truth for styles
    * Update once, all instances update
  </Card>

  <Card title="Instance in Email" icon="copy">
    **In your email**

    * References the master
    * Can override content
    * Design inherited from master
    * Content can be customized
  </Card>
</CardGroup>

## What Can Be Overridden?

Overrides allow you to customize **content**, not **design**:

<AccordionGroup>
  <Accordion title="✅ Overridable (Content)">
    * **Text content**: The text inside text elements
    * **Image URLs**: The source URL of images
    * **Links**: URLs for buttons and links
    * **Alt text**: Description for images

    These are content properties that can vary per instance.
  </Accordion>

  <Accordion title="❌ Not Overridable (Design)">
    * Colors (come from Style Library tokens)
    * Font sizes (via Text Styles)
    * Spacing (padding, margin)
    * Borders
    * Background colors

    *These properties stay linked to the master component*
  </Accordion>
</AccordionGroup>

## How it Works

When you add a component to an email:

1. **Instance**: A reference to the master component is created.
2. **Overrides**: You can click on text or images within the component to change them for *this specific email*.
3. **Design Link**: The styling (colors, fonts, layout) remains locked to the master component.

## Real-World Example

Let's say you have a "CTA Button" component in your library.

**Master Component**:

* Text: "Click here"
* Color: Orange
* Padding: Large

**In "Welcome Email"**:

* You change text to: "Get Started"
* You change link to: `https://myapp.com/start`
* *Result*: An orange button that says "Get Started".

**In "Promo Email"**:

* You change text to: "Buy Now"
* You change link to: `https://myapp.com/buy`
* *Result*: An orange button that says "Buy Now".

**Later**: You decide to change your brand color to Blue.

* You edit the Master Component color to Blue.
* **Both emails automatically update** to show Blue buttons, but keep their unique text ("Get Started" and "Buy Now").

## Modifying the Master Component

<Warning>
  When you modify a master component's design, all emails using that component automatically update with the new styles.
</Warning>

<Info>
  Content overrides (your custom text and links) are preserved when the master is updated. Only the design changes.
</Info>

## Best Practices

<AccordionGroup>
  <Accordion title="Limit overrides to content">
    Only override content properties (text, URLs). For design variants, create separate components or use different style tokens.
  </Accordion>

  <Accordion title="Test after master changes">
    After modifying a master component, check a few emails using it to ensure everything still looks correct.
  </Accordion>

  <Accordion title="Document usage">
    If a component is meant to be customized in a specific way, note it in the component description.
  </Accordion>
</AccordionGroup>