Overview
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.
b. Remove components
To remove a subcomponent, simply delete it from the wireframe template. This will prevent it from appearing in the rendered component.
c. Reorder components
To change the order of subcomponents, simply rearrange them within the wireframe template. The rendered component will reflect this new order.
3. Make CSS Changes
a. Themes
Easily customize the appearance of Velt components to match your application’s design system. 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.
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.
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.
d. Use CSS Library
To style Velt components with a CSS library like Tailwind:
- Disable Shadow DOM
- 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.
e. Use Custom CSS
Same as above, you can add your classes inside the wireframes or directly on the rendered Velt components.
5. Template Variables
You can render dynamic data from these certain Data Classes inside your Velt Components Wireframe.
6. Conditional Templates
You can conditionally show or hide parts of the Velt Component Wireframes.
6. Variants
If you want to have multiple versions of customized components that you can swap between, you can use variants.
Was this page helpful?