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 children removes default styles.

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