General Concepts
With Advanced UI Customization, you can fully customize any of the default components from the Velt SDK.
Make sure to read the setup guide to properly configure Wireframes.
1. Customizing CSS
You can customize the CSS by:
- Removing the Shadow DOM
- Using CSS Libraries, such as Tailwind
- Using custom CSS
- Enabling Dark Mode
- Injecting Global CSS (Not Recommended)
2. Customizing layout
You can customize the layout by:
- Adding custom HTML
- Changing the order of existing subcomponents
- Removing existing subcomponents
3. Component Wireframes
What is a Wireframe
Wireframes are templates that define the layout of a component. Any modifications to the layout need to be defined within an existing Wireframe component.
wireframe isn’t something that renders directly. They are just template definitions that define how the component will render globally. You still place the Velt SDK components in your app layout as you normally would.Wireframe styling
If you modify a wireframe by adding additional children to it, the default styling of that particular component will be removed.
It will then be up to you to put in addition styling to make the Wireframe match the look and feel of your product.
Using a customized component
Once a Wireframe template is modified, place the Velt SDK component as your normally would. You should see the layout change according to your template.
Was this page helpful?