Velt Components can be customized in 5 key ways:
  1. Layout: For structure and organization of components
  2. Styling: For visual design using CSS, themes, or your CSS framework
  3. Template Variables: For rendering dynamic content
  4. Conditional Templates: For custom rendering logic
  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 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. It exposes a callback. Listen for it to trigger your custom JS logic.
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.

​
a. Replace Layout

Replace Velt’s default HTML with your own structure. Learn more

​
b. Remove Components

Remove specific parts of a Velt component you don’t need. Learn more

​
c. Reorder Components

Change the order of elements within a Velt component. Learn more

​
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

​
2. Styling

Velt components can be styled in two main ways:

​
a. Themes

NEW: Try the Theme Playground to visually customize and preview themes.
  1. CSS Variables: Quickest way to match your design system using CSS variables. This gets applied to all components globally. Learn more
  2. Dark Mode: Built in support for light and dark modes. Learn more

​
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
  2. Conditional Classes: Apply classes conditionally based available template variables. Learn more
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.

​
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

​
4. Conditional Templates

Add logic to show/hide components based on the template variables. Learn more

​
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