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. 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
  • ❌ Cannot nest regular Velt components inside wireframes

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