Overview

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. Wireframes

​

a. What is a Wireframe?

Wireframes are templates that define the layout & styling of a component. Any modifications to the default component layouts need to be defined within that component’s existing wireframe.

The 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.

​

b. How to customize a Wireframe?

• First you need to add a root Wireframe component.
• Find the Wireframe tag of the target Velt Component. Add it inside the root Wireframe.
• Modify the target component wireframe by adding custom HTML as children inside it.

​

c. What can go inside a Wireframe?

You can add custom HTML, custom inline styling or Velt’s wireframe components. You cannot add a regular Velt Component inside a Wireframe.

​

d. How to use a customized Wireframe?

Once a Wireframe template is modified, place the regular Velt SDK component as you normally would. You should see the layout change according to your template.

​

2. Make Layout Changes

​

Concept 1: Add children to replace the default layout

Sometimes you may want to change the entire layout of Velt’s components and provide your own HTML. To do so, add your custom HTML as children within the target component’s wireframe.

Click here to learn more.

​

Concept 2: Remove components

You can remove any of the subcomponents from appearing by removing them from the wireframe template.

Click here to learn more.

​

Concept 3: Change component order

You can change the order of how the subcomponents appear by rearranging the subcomponents in the wireframe template.

Click here to learn more.

​

3. Make CSS Changes

​

Concept 1: Remove Shadow DOM

By default Shadow DOM is enabled for Velt Components. This prevents the host app’s CSS from bleeding into Velt Components. If you want your application’s CSS to affect the styling of certain SDK components, you can disable the ShadowDOM.

You only need to remove the shadow DOM of composite feature components and not every little child component inside it. Each component’s docs specify the props or api methods you can use to disable shadow dom for that component.

Click here to learn more.

​

Concept 2: Add Dark Mode

By default Velt components are in light mode. If you want to enable dark mode for specific components, you can use the provided prop or api method specified for that component.

Click here to learn more.

​

Concept 3: Use CSS Library

You can use a CSS library such as Tailwind to style the SDK components.

Simply add the library’s classes to the wireframes or directly on the rendered SDK components just like you would to any other component.

Click here to learn more.

​

Concept 4: Use Custom CSS

You can use your own custom css to style the SDK components.

Simply add your classes to the wireframes or directly on the rendered SDK components just like you would to any other component.

Click here to learn more.

​

4. Variants

If you want to have multiple versions of customized components that you can swap between, you can use variants