We just released Vuestic Admin 3.0 🤗
🔥🔥🔥 Hire us

Css Variables
#

Vuestic UI extracts crucial CSS styles in the form of CSS variables (custom properties). No need to install any loaders or additional packages to override components' styling. Instead, you can deeply customize components' visuals using the following simple syntax.

--va-component-name-variable-name

  • components-name can include sub block names, for example: card, button-content, input-placeholder.
  • variable-name usually is just CSS property name, for example: display, align, border-radius.

CSS variables override example
#

If you dislike how component looks, you can override default component style. Each component has list of CSS variables, that you override. For example, you want to change avatar border-radius:

Profile
User
29 public playlists10 followers16 following
Open in GitHub
<style lang="scss">
.user-card {
  --va-card-display: inline-block;
  --va-button-content-px: 0.5rem;
  --va-avatar-border-radius: 60% 40% 58% 42% / 39% 48% 52% 61%;

  .va-card__actions {
    --va-card-padding: 0;
  }

  &:hover {
    --va-avatar-border-radius: 28% 72% 24% 76% / 71% 17% 83% 29%;
  }
}
</style>

Global Overriding
#

No additional tooling is needed. Just create a CSS file (like overrides.css), import it into your main.js and start redefining the variables as you do with any other CSS properties:

:root{--va-checkbox-square-border-radius:50%;--va-input-wrapper-border-radius:99999px}