UI Components

UI components are the basic building blocks of a design system. They are small, reusable pieces of code that you can combine to create more complex interfaces. UI components define the visual appearance of an interface, while design tokens define their underlying values.

Run the following to create a basic UI component:

$bit create vue ui/button

Copied

UI components need to be themeable to maintain consistency in style, across compositions.

In Vue, there are 3 main options you can choose to apply a theme to a UI component:

CSS variables are a native CSS feature that allows you to define a variable in one place, and use it in multiple places in your CSS. This is a great way to define and consume a theme, as you can define variables for each design token in a theme, and use them in other UI components.

Let's take the sample theme we created in the Theming section for an exmaple, to apply a theme using CSS variables, we can do the following:

<template>
  <button><slot /></button>
</template>

<style scoped>
button {
  color: var(--background);
  border: 3px solid var(--secondary);
  background: var(--primary);
}
</style>
Copied

Another option is to use JS variables. This is a great option if you want to apply a theme in a programmatic way. For example, you can use JS variables to apply a theme to a third-party component that doesn't support CSS variables:

<script setup>
import { inject } from 'vue';
import ThirdPartyButton from 'third-party-button'

const theme = inject('theme');
</script>

<template>
  <ThirdPartyButton
    :color="theme.background"
    :border="theme.secondary"
    :background="theme.primary"
  >
    <slot />
  </ThirdPartyButton>
</template>
Copied

If you're using a pre-processor like Sass, you can also use its own variables to define a theme and consume it in UI components. This is a great option if your are familiar with a pre-processor. However, you have to author your themes in that way too.

For example, to author a theme in SCSS:

// @my-org/my-scope.themes.my-theme/theme.scss

$primary: #000000;
$background: #ffffff;
$secondary: #333333;
Copied

Then consume it in a UI component:

<template>
  <button><slot /></button>
</template>

<style scoped lang="scss">
@use '@my-org/my-scope.themes.my-theme/theme.scss' as theme;

button {
  color:theme.$background;
  border: 3px solidtheme.$secondary;
  background:theme.$primary;
}
</style>
Copied

A customizable UI component is component that is more likely to be used in new compositions. It allows its consumers to make adjustments via its API, which obviates the need for changes in the component implementation (changes that might force the consumer to create a new component).

• Props: to allow external data to be passed into the component
• Events: to allow the component to emit data to its consumers
• Slots: to allow the consumer to pass in custom content

• Fallthrough attributes like class and style: to allow the consumer to change the style of the component
• Provide/inject: to allow the consumer to pass data into a deep component tree
• v-model: to allow two-way data bindings between the component and its consumer
• Exposes: to allow the consumer to access the component's internal data and methods