You can fully customize any Velt Component.

Here are some concepts that will help you get started. Once you know them, you can follow the general setup guide to start customizing components.

1. Wireframes

a. What is a Wireframe?

  • Wireframes are powerful templates that define the structure and appearance of Velt components, serving as a blueprint for customizing their default layout and styling.
  • When you want to modify a component’s appearance, you do so by altering its corresponding wireframe, which acts as a global definition determining how components will be displayed.
  • Wireframes themselves don’t render directly in your application. After customizing a wireframe, you still need to place the actual Velt components in your app as usual, which will then render according to your customized wireframe definitions.

b. How to customize a Wireframe?

  • Add the root Wireframe component.
  • Find the Wireframe component of the target Velt Component. Add it inside the root Wireframe.
  • Modify the target component wireframe by either adding custom HTML as children inside it or by adding custom styling.

c. What can go inside a Wireframe?

You can add the following inside a Wireframe:

  • Custom HTML
  • Custom inline styling on non-Velt components
  • Velt’s wireframe components

You cannot add:

  • Regular Velt Components inside a Wireframe
  • Custom inline styling on Velt components. Instead, you can wrap Velt Wireframe components in regular HTML components and style them with inline css.

d. How to use a customized Wireframe?

After modifying a Wireframe template:

  • Place the regular Velt component in your app as usual
  • The component will render with the layout changes defined in your customized Wireframe
  • You’ll see the updated appearance reflecting your template modifications

2. Make Layout Changes

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

To completely change the layout of Velt’s components, provide your own custom HTML as children within the target component’s wireframe.

Learn more.

b. Remove components

To remove a subcomponent, simply delete it from the wireframe template. This will prevent it from appearing in the rendered component.

Learn more.

c. Reorder components

To change the order of subcomponents, simply rearrange them within the wireframe template. The rendered component will reflect this new order.

Learn more.

3. Make CSS Changes

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

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

c. Use CSS Library

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

Learn more.

d. Use Custom CSS

Same as above, you can add your classes to the wireframes or directly on the rendered Velt components.

Learn more.

5. Template Variables

You can render dynamic data from these certain Data Classes inside your Velt Components Wireframe.

Learn more.

6. Conditional Templates

You can conditionally show or hide parts of the Velt Component Wireframes.

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