You can fully customize any Velt Component using Wireframes, CSS, Template Variables, Conditional Templates, and Custom Action Components.

​
About Wireframes

​
What are Wireframes?

Wireframes are templates that let you customize how Velt components look and behave. Think of them as blueprints - you modify the wireframe template to change how a component appears in your app.

​
How do they work?

  1. Add a root Wireframe component
  2. Insert the specific component’s wireframe you want to customize
  3. Customize it by adding HTML or styling
  4. Use the regular Velt component in your app - it will now follow your customized wireframe

​
What can you add to a Wireframe?

You can add:

  • Custom HTML elements
  • CSS styles on regular HTML elements
  • Other Velt wireframe components

Restrictions

  • No regular Velt components allowed inside wireframes
  • Style Velt wireframe components by wrapping them in HTML elements

Ready to start customizing? Check out our setup guide to begin.

​
1. Customize Layout

Adding children will remove the CSS for that component. If you add an empty wireframe with no children, it will keep its original style and children.

​
a. Replace component layout

Provide your own custom HTML as children within the target component’s wireframe to completely change its layout.

Learn more.

​
b. Remove components

Remove a subcomponent by deleting it from the wireframe template. This will prevent it from appearing in the rendered component.

Learn more.

​
c. Reorder components

Rearrange subcomponents by changing their order within the wireframe template. The rendered component will reflect this new order.

Learn more.

​
2. Customize CSS

​
a. Themes

Easily customize the appearance of Velt components to match your application’s design system.

NEW: You can use the Theme Playground to customize and test your themes.

You can customize:

  • Border radius
  • Spacing
  • Typography
  • Colors for light and dark modes
    • Base Colors
    • Accent Colors
    • Text Shades
    • Background Shades
    • Border Shades
    • Status Colors (error, warning, success)
    • Transparent colors

This will work even if Velt’s Shadow DOM is enabled as long as you set it on the <body> tag.

Learn more.

​
b. Remove Shadow DOM

  • Shadow DOM is enabled by default for Velt Components. This prevents CSS from the host app affecting Velt Components.
  • Disable Shadow DOM for specific components to allow your app’s CSS to style Velt Components. This affects the component and its children.

Learn more.

​
c. Add Dark Mode

Velt components default to light mode. To enable dark mode for specific components, use the component’s designated prop or API method.

Learn more.

​
d. Use CSS Library

Style Velt components with a CSS library like Tailwind:

  1. Disable Shadow DOM
  2. Add the library’s classes inside the wireframe or directly on the rendered Velt components. You can find the component CSS selectors by inspecting the component in the browser’s developer tools.

This works just like styling any other component in your application.

Do not add CSS classes directly on the Velt Wireframe components. You can add it to regular HTML elements (eg: divs) wrapped around or inside Velt Wireframe components.

Learn more.

​
e. Use Custom CSS

Add your classes within the wireframes or directly on the rendered Velt components.

Learn more.

​
3. Template Variables

Render dynamic data from certain Data Classes inside your Velt Components Wireframe. Learn more.

​
4. Conditional Templates

Conditionally show or hide parts of the Velt Component Wireframes. Learn more.

​
5. Custom Action Components

A customizable button component that can be used to add custom actions and extend the functionality of any Velt component. Learn more.

​
6. Variants

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

Learn more

Was this page helpful?

Overview