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

​

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

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