> ## 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 > Customize Velt component layouts with wireframes: targeted overrides, full trees, variants, and common tasks. 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 Concepts and rules (the registry model, the interactivity rule, scoping) live in the [Wireframes Overview](https://velt.dev/docs/ui-customization/layout.md). > [!NOTE] > > All layout customizations are done using Wireframe components that act as templates. Changes apply globally wherever that component is used (unless you [scope them](https://velt.dev/docs/ui-customization/layout.md#scoping-global-vs-scoped-wireframes) by nesting). > [!WARNING] > > 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](https://velt.dev/docs/ui-customization/styling.md). ## 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: > [tab] React / Next.js > > ```jsx theme={null} > > >

> > > > > >

> > > ``` > [tab] Other Frameworks > > ```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. > [!WARNING] > > Declaring a container slot means you own its whole child tree: structural children you omit disappear instead of falling back to Velt's defaults. Declare the full structure you want. See [slot granularity](https://velt.dev/docs/ui-customization/layout.md#slot-granularity). **Example:** Customizing the entire Comment Dialog structure: > [tab] React / Next.js > > ```jsx theme={null} > > > > >

> > > > >

> > > ``` > [tab] Other Frameworks > > ```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. #### 1. Define variants On the wireframe component, add the `variant` prop to define your custom variants. > [tab] React / Next.js > > ```jsx theme={null} > > {/* Variant for preview page */} > > {/* Custom layout for preview */} > > > {/* Variant for editor page */} > > {/* Custom layout for editor */} > > > ``` > [tab] Other Frameworks > > ```html theme={null} > > ``` #### 2. Use variants * 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. > [tab] React / Next.js > > ```jsx theme={null} > > ``` > [tab] Other Frameworks > > ```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: > [tab] React / Next.js > > ```jsx theme={null} > > {/* For Pin, Area, and Text comments */} > > {/* Custom layout */} > > > {/* For Sidebar comments */} > > {/* Custom layout */} > > > ``` > [tab] Other Frameworks > > ```html theme={null} > > ``` > [!NOTE] > > * 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: > [tab] React / Next.js > > ```jsx theme={null} > > > > > > ``` > [tab] Other Frameworks > > ```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](https://velt.dev/docs/ui-customization/conditional-templates.md) > [tab] React / Next.js > > ```jsx theme={null} > > > {/* Priority and CopyLink buttons removed */} > > > > > > ``` > [tab] Other Frameworks > > ```html theme={null} > > ``` ### Reorder Components To reorder components, simply rearrange them within the wireframe template. > [tab] React / Next.js > > ```jsx theme={null} > > > > > > > > > > ``` > [tab] Other Frameworks > > ```html theme={null} > > ``` This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.