Overview
Velt Components can be customized in 5 key ways:
- Layout: For structure and organization of components
- Styling: For visual design using CSS, themes, or your CSS framework
- Template Variables: For rendering dynamic content
- Conditional Templates: For custom rendering logic
- 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
2. Styling
Velt components can be styled in two main ways:
a. Themes
NEW: Try the Theme Playground to visually customize and preview themes.
- CSS Variables: Quickest way to match your design system using CSS variables. This gets applied to all components globally. Learn more
- Dark Mode: Built in support for light and dark modes. Learn more
b. Custom CSS or libraries
- 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
- 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.
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
Overview
Velt Components can be customized in 5 key ways:
- Layout: For structure and organization of components
- Styling: For visual design using CSS, themes, or your CSS framework
- Template Variables: For rendering dynamic content
- Conditional Templates: For custom rendering logic
- 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
2. Styling
Velt components can be styled in two main ways:
a. Themes
NEW: Try the Theme Playground to visually customize and preview themes.
- CSS Variables: Quickest way to match your design system using CSS variables. This gets applied to all components globally. Learn more
- Dark Mode: Built in support for light and dark modes. Learn more
b. Custom CSS or libraries
- 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
- 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.
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