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

# Overview

Velt Components can be customized in 5 key ways:

1. [**Layout**](#1-layout): For structure and organization of components
2. [**Styling**](#2-styling): For visual design using CSS, themes, or your CSS framework
3. [**Template Variables**](#3-template-variables): For rendering dynamic content
4. [**Conditional Templates**](#4-conditional-templates): For custom rendering logic
5. [**Action Components**](#5-action-components): For interactivity and custom behaviors

# 1. Layout

### Understanding Wireframes

Think of Wireframes like blueprints - they're templates that let you customize how Velt components render in your app. They are not functional components. Define them once, and Velt will swap in your custom template wherever a component renders, overriding the default.
When you create a wireframe:

* It acts as a global template
* Changes apply everywhere that component is used
* You can use your own components and HTML structure

**What you can do:**

* ✅ Use your own Components/HTML
* ✅ Apply your styling
* ✅ Nest regular HTML elements
* ✅ Use other Velt wireframe components

**Limitations with Wireframes:**

* ❌ Cannot nest regular Velt components inside wireframes
* ❌ Host App's dynamic variables: Won't work directly inside wireframes.
* ❌ Host App's JavaScript: Custom scripts won't run natively inside wireframes.

**How Velt solves these:**

* **Host App's dynamic variables:** Use [UI State](/ui-customization/template-variables#2-injecting-your-own-data) to inject your app's dynamic variables into Velt components seamlessly. This is available across all Velt Wireframes.
* **Host App's JavaScript:** Wrap your component in [`VeltButtonWireframe`](/ui-customization/custom-action-component). It exposes a callback. Listen for it to trigger your custom JS logic.

<Warning>
  Empty wireframes keep Velt's default styling.
  Adding any children to a wireframe template removes most of its default styling. This gives you full control over the layout.
  However, you will still need to use a combination of CSS overrides on any remaining styles and your own components to achieve the desired styling.
</Warning>

### a. Replace Layout

Replace Velt's default HTML with your own structure.
[Learn more](/ui-customization/layout#replace-default-layout)

### b. Remove Components

Remove specific parts of a Velt component you don't need.
[Learn more](/ui-customization/layout#remove-components)

### c. Reorder Components

Change the order of elements within a Velt component.
[Learn more](/ui-customization/layout#reorder-components)

### d. Use Variants

Need different versions of the same component? Use variants to:

* Create multiple styled versions
* Switch between them dynamically
* Maintain consistent behavior with different looks

[Learn more about variants](/ui-customization/layout#variants)

# 2. Styling

Velt components can be styled in two main ways:

### a. Themes

<Info>
  **NEW:** Try the [Theme Playground](https://playground.velt.dev/themes) to visually customize and preview themes.
</Info>

1. **CSS Variables:** Quickest way to match your design system using CSS variables. This gets applied to all components globally. [Learn more](/ui-customization/styling#themes)
2. **Dark Mode:** Built in support for light and dark modes. [Learn more](/ui-customization/styling#dark-mode)

### b. Custom CSS or libraries

1. **Custom CSS or frameworks:** Gives you full control over the styling of Velt components using your own CSS or frameworks. This requires disabling Shadow DOM. [Learn more](/ui-customization/styling#custom-css-or-libraries)
2. **Conditional Classes:** Apply classes conditionally based available template variables. [Learn more](/ui-customization/styling#conditional-classes)

<Warning>
  Passing `className` or `style` to Velt components does not change their UI. Style via Wireframes (by adding your own HTML and classes inside the templates) or via CSS overrides with Shadow DOM disabled.
</Warning>

# 3. Template Variables

Template Variables let you work with dynamic data in two ways:

a. **Use Existing Velt Component Data**

* Access and render data that's already present inside Velt components.
* eg: Customer metadata set on comment threads.

b. **Inject Your App's Data**

* Inject and render custom dynamic data from your application into Velt components.

[Learn more](/ui-customization/template-variables)

# 4. Conditional Templates

Add logic to show/hide components based on the template variables.
[Learn more](/ui-customization/conditional-templates)

# 5. Action Components

* Extend the functionality of any Velt component.
* Clicking an action button provides a callback where you can write your own custom code.
  [Learn more](/ui-customization/custom-action-component)