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

​
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