Showcase¶

Every component on this page renders through the Catppuccin theme. Toggle the palette in the header to see how each flavor handles color, contrast, and emphasis.

Admonitions¶

Admonitions pick up the flavor's accent colors. Each callout type maps to a semantically meaningful Catppuccin color — green for success, peach for warnings, red for danger.

Code blocks¶

Syntax highlighting in code blocks uses the flavor's full palette — the same colors you'd find in a Catppuccin-themed editor.

from dataclasses import dataclass

@dataclass
class Coffee:
    flavor: str
    strength: int = 5  # (1)!

    def brew(self) -> str:
        return f"Brewing a {self.flavor} at strength {self.strength}"

print(Coffee("Macchiato").brew())

1. Annotations look like this — pinned to a specific line and revealed on click.

Inline code like Coffee("Mocha").brew() is highlighted too.

Content tabs¶

=== "Python"

    ```python
    print("Hello from Python!")
    ```

=== "Rust"

    ```rust
    println!("Hello from Rust!");
    ```

=== "TypeScript"

    ```ts
    console.log("Hello from TypeScript!");
    ```

Renders as:

print("Hello from Python!")

println!("Hello from Rust!");

console.log("Hello from TypeScript!");

Diagrams¶

Mermaid diagrams adopt the flavor's surface and accent colors:

graph LR
  A[Mocha] --> B[Macchiato]
  B --> C[Frappé]
  C --> D[Latte]
  D --> A

Tables¶

Formatting¶

• Highlighted text uses the flavor's yellow.
• Inserted text is underlined.
• Strikethrough for deletions.
• Subscripts: H₂O. Superscripts: E=mc².
• Keyboard shortcuts: Ctrl+Alt+Del.

Task lists¶

• Install catppuccin-zensical
• Set name = "catppuccin"
• Toggle through all four flavors
• Customize the palette to your taste

Icons and emoji¶

Icons inline with text pick up the flavor's text color. Emoji like and render as Twemoji and stay consistent across schemes.

Footnotes¶

Hover this footnote¹ to see the tooltip — it inherits the flavor's surface colors with no extra configuration.

Math¶