> ## Documentation Index
> Fetch the complete documentation index at: https://velt.dev/docs/llms.txt
> Use this file to discover all available pages before exploring further.
# Layout Customization
# Overview
This lets you modify how components are structured and rendered in your app. You can:
* Replace default HTML with your own components and HTML structure
* Remove or reorder components
* Create multiple variants of the same component
All layout customizations are done using Wireframe components that act as templates. Changes apply globally wherever that component is used.
Styling note: Passing `className`/`style` to Velt components does not change their UI. Add your classes/styles inside the Wireframe templates, or use CSS overrides with Shadow DOM disabled. See [Styling](/ui-customization/styling).
# Ways to Customize Layout
### Single Component Customization (Targeted)
This lets you customize individual parts of a component without dealing with the entire structure. **We recommend this approach for most use cases**.
**Benefits:**
* Simpler, more maintainable code
* Focus on just the parts you need to change
* Greater flexibility for specific UI elements
**Example:** Customizing just the Comment Dialog header:
```jsx theme={null}
```
```html theme={null}
```
### Full Component Tree Customization (Comprehensive)
Use this pattern when you need to modify the entire component structure or multiple related components.
**Benefits:**
* Complete control over component hierarchy
* Easier to modify relationships between components
* Better for large-scale structural changes
**Drawbacks:**
* Custom CSS required for the entire component tree since adding children components to wireframes removes Velt's default styles.
**Example:** Customizing the entire Comment Dialog structure:
```jsx theme={null}
```
```html theme={null}
```
# Variants
Variants allow you to:
* Create multiple styled versions of the same component
* Switch between them dynamically in different parts of your app
* Maintain consistent behavior while having different looks
### Create Custom Variants
Custom variants let you define your own versions of components. For example: You can have a variant of Comment Sidebar for one page and another for another page.
On the wireframe component, add the `variant` prop to define your custom variants.
```jsx theme={null}
{/* Variant for preview page */}
{/* Custom layout for preview */}
{/* Variant for editor page */}
{/* Custom layout for editor */}
```
```html theme={null}
{/* Variant for preview page */}
{/* Custom layout for preview */}
{/* Variant for editor page */}
{/* Custom layout for editor */}
```
* Use the `variant` prop on the related Velt component to apply the custom variant you defined. The value should match the variant name from step 1.
* For example, use `variant="preview-page"` to apply the preview page variant you created above.
```jsx theme={null}
```
```html theme={null}
```
### Use Pre-defined Variants
Many components come with built-in variants optimized for specific use cases. For example, the Comment Dialog has two pre-defined variants for different contexts:
```jsx theme={null}
{/* For Pin, Area, and Text comments */}
{/* Custom layout */}
{/* For Sidebar comments */}
{/* Custom layout */}
```
```html theme={null}
{/* For Pin, Area, and Text comments */}
{/* Custom layout */}
{/* For Sidebar comments */}
{/* Custom layout */}
```
* Each component's documentation lists its supported pre-defined variants
* Pre-defined variants are optimized for specific use cases but can still be customized
* You can combine pre-defined variants with your own custom styling
# Common Customization Tasks
### Replace Default Layout
Simply provide your own HTML or components as children of the wireframe component:
```jsx theme={null}
```
```html theme={null}
```
### Remove Components
To remove a component, you either:
* simply omit it from the wireframe template as shown below, or
* use [Conditional Templates](/ui-customization/conditional-templates)
```jsx theme={null}
{/* Priority and CopyLink buttons removed */}
```
```html theme={null}
{/* Priority and CopyLink buttons removed */}
```
### Reorder Components
To reorder components, simply rearrange them within the wireframe template.
```jsx theme={null}
```
```html theme={null}
```