Skip to main content
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.
All layout customizations are done using Wireframe components that act as templates. Changes apply globally wherever that component is used (unless you scope them by nesting).
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.

​
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:

​
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.
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.
Example: Customizing the entire Comment Dialog structure:

​
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.
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.

​
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:
  • 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:

​
Remove Components

To remove a component, you either:

​
Reorder Components

To reorder components, simply rearrange them within the wireframe template.