VEUI on GitHub

Style variants

VEUI components provide preset styles through the ui prop. Different theme packages can provide different ui values for each component to extend, and users can also customize ui values and their styles to extend the preset styles of VEUI components.

ui prop

The ui prop is a space-separated string, similar to the native class attribute in HTML. Each item represents a preset style of the component. In the example below, primary and large both define a preset style of the <veui-button> component:

<veui-button ui="primary large">OK</veui-button>

Using the DLS theme

By using the corresponding configuration of veui-loader, you can load the veui-theme-dls theme package in VEUI. The theme package provides optional preset styles in different dimensions for many components. You can refer to the documentation of each component for the explanation of supported preset styles of the ui prop.

Custom preset styles

Adding a custom ui item does not require registration through the component API, just add the corresponding styles for the [ui~="..."] selector in the style file.

For example, to add a secondary style for Button component, just write the styles for .veui-button[ui~="secondary"].

Edit this demo on GitHubEdit
  <veui-button ui="primary">
  <veui-button ui="secondary">

import { Button } from 'veui'

export default {
  components: {
    'veui-button': Button

<style lang="less" scoped>
.veui-button {
  width: 120px;
  margin-right: 1em;

.veui-button[ui~="secondary"] {
  background-color: #e5e5ff;

  &:hover {
    background-color: #ddf;

  &:active {
    background-color: #ccf;

Custom theme packages

For information on developing custom theme packages, please refer to Advanced › Theming to learn more about the conventions and more advanced methods for customizing the ui prop in VEUI.

Edit this page on GitHubEdit
© Baidu, Inc. 2023