Category: Vue

Chakra UI Vue is a UI framework made for Vue.js that lets us add good-looking UI components into our Vue app.

This article will look at how to get started with UI development with Chakra UI Vue.

Statistics Component

Chakra UI Vue comes with a component to display statistics.

To use it, we write:

<template>
  <c-box>
    <c-stat>
      <c-stat-label>Collected Fees</c-stat-label>
      <c-stat-number>$500.00</c-stat-number>
      <c-stat-helper-text>Jan 12 - Jan 28</c-stat-helper-text>
    </c-stat>
  </c-box>
</template>

<script>
import { CBox, CStat, CStatLabel, CStatNumber } from "@chakra-ui/vue";

export default {
  components: {
    CBox,
    CStat,
    CStatLabel,
    CStatNumber,
  },
};
</script>

We add the c-stat component to add the statistics container.

c-stat-label is the label for the statistic.

c-stat-number is the container for the statistic number.

c-stat-helper-text is the container for the helper text.

We can add a group of statistics with the c-stat-group component:

<template>
  <c-box>
    <c-stat-group>
      <c-stat>
        <c-stat-label>Sent</c-stat-label>
        <c-stat-number>676585</c-stat-number>
        <c-stat-helper-text>
          <c-stat-arrow type="increase" />
          30.60%
        </c-stat-helper-text>
      </c-stat>
      <c-stat>
        <c-stat-label>Clicked</c-stat-label>
        <c-stat-number>45</c-stat-number>
        <c-stat-helper-text>
          <c-stat-arrow type="decrease" />
          -5.20%
        </c-stat-helper-text>
      </c-stat>
    </c-stat-group>
  </c-box>
</template>

<script>
import {
  CBox,
  CStat,
  CStatLabel,
  CStatNumber,
  CStatHelpText,
  CStatArrow,
  CStatGroup,
} from "@chakra-ui/vue";

export default {
  components: {
    CBox,
    CStat,
    CStatLabel,
    CStatNumber,
    CStatHelpText,
    CStatArrow,
    CStatGroup,
  },
};
</script>

We wrap c-stat-group from multiple c-stat components.

Also, we add the c-stat-arrow component to add arrows for increases and increases, which are set by the type prop.

Conclusion

We can a statistic display with Chakra UI Vue.

Chakra UI Vue is a UI framework made for Vue.js that lets us add good-looking UI components into our Vue app.

This article will look at how to get started with UI development with Chakra UI Vue.

Loading Spinner

We can add a loading spinner into our Vue app with Chakra UI Vue.

To add it, we write:

<template>
  <c-box>
    <c-spinner />
  </c-box>
</template>

<script>
import { CBox, CSpinner } from "@chakra-ui/vue";

export default {
  components: {
    CBox,
    CSpinner,
  },
};
</script>

We add the c-spinner component to display the spinner.

We can change the color of the spinner with the color prop:

<template>
  <c-box>
    <c-spinner color="blue.500" />
  </c-box>
</template>

<script>
import { CBox, CSpinner } from "@chakra-ui/vue";

export default {
  components: {
    CBox,
    CSpinner,
  },
};
</script>

And we can change the size of it with the size prop:

<template>
  <c-box>
    <c-spinner size="lg" />
  </c-box>
</template>

<script>
import { CBox, CSpinner } from "@chakra-ui/vue";

export default {
  components: {
    CBox,
    CSpinner,
  },
};
</script>

lg is large. We can also set it to xs for extra small, sm for small, md for medium or xl for extra-large.

Other options we can change include the thickness, speed of the spinning, and the color of the empty area.

To change them, we write:

<template>
  <c-box>
    <c-spinner
      thickness="4px"
      speed="0.65s"
      empty-color="green.200"
      color="vue.500"
    />
  </c-box>
</template>

<script>
import { CBox, CSpinner } from "@chakra-ui/vue";

export default {
  components: {
    CBox,
    CSpinner,
  },
};
</script>

thickness changes the thickness of the spinner ring.

speed changes the time it takes to complete one rotation cycle.

empty-color sets the color of the empty part of the spinner ring.

Conclusion

We can add a loading spinner into our Vue app with Chakra UI Vue.

Chakra UI Vue is a UI framework made for Vue.js that lets us add good-looking UI components into our Vue app.

This article will look at how to get started with UI development with Chakra UI Vue.

Select

Chakra UI Vue comes with a styled select dropdown component.

To add it, we write:

<template>
  <c-box>
    <c-select v-model="fruit" placeholder="Select Fruit">
      <option value="apple">apple</option>
      <option value="orange">orange</option>
      <option value="grape">grape</option>
    </c-select>
  </c-box>
</template>

<script>
import { CBox, CSelect } from "@chakra-ui/vue";

export default {
  components: {
    CBox,
    CSelect,
  },
  data() {
    return {
      fruit: "",
    };
  },
};
</script>

We add the c-select component with v-model to bind the selected value to the fruit reactive property.

The value attribute value of the chosen option will be set as the value of fruit .

placeholder sets the placeholder.

And we add the options with the option tag.

We can set the style variant of the dropdown.

To do this, we just have to set the variant prop:

<template>
  <c-box>
    <c-select variant="filled" v-model="fruit" placeholder="Select Fruit">
      <option value="apple">apple</option>
      <option value="orange">orange</option>
      <option value="grape">grape</option>
    </c-select>
  </c-box>
</template>

<script>
import { CBox, CSelect } from "@chakra-ui/vue";

export default {
  components: {
    CBox,
    CSelect,
  },
  data() {
    return {
      fruit: "",
    };
  },
};
</script>

filled will fill the background with a color.

We can also set it to outline, flushed, or unstyled .

outline adds an outline around the dropdown.

flushed removes the outline.

unstyled means no styles are added to the dropdown.

We can also set the styles of the dropdown ourselves.

To do this, we write:

<template>
  <c-box>
    <c-select
      backgroundColor="tomato"
      borderColor="tomato"
      color="white"
      v-model="fruit"
      placeholder="Select Fruit"
    >
      <option value="apple">apple</option>
      <option value="orange">orange</option>
      <option value="grape">grape</option>
    </c-select>
  </c-box>
</template>

<script>
import { CBox, CSelect } from "@chakra-ui/vue";

export default {
  components: {
    CBox,
    CSelect,
  },
  data() {
    return {
      fruit: "",
    };
  },
};
</script>

backgroundColor sets the background color. borderColor sets the border color. And color sets the text color.

Conclusion

We can add a dropdown easily with Chakra UI Vue.

Chakra UI Vue is a UI framework made for Vue.js that lets us add good-looking UI components into our Vue app.

This article will look at how to get started with UI development with Chakra UI Vue.

Radio Buttons

We can add radio buttons with the c-radio-group and c-radio components.

For instance, we can write:

<template>
  <c-box>
    <c-radio-group v-model="selectedFruit">
      <c-radio value="apple">apple</c-radio>
      <c-radio value="orange">orange </c-radio>
      <c-radio value="grape">grape</c-radio>
    </c-radio-group>
    <c-text> Favourite fruit: {{ selectedFruit }} </c-text>
  </c-box>
</template>

<script>
import { CBox, CRadio, CRadioGroup, CText } from "@chakra-ui/vue";

export default {
  components: {
    CBox,
    CRadio,
    CRadioGroup,
    CText,
  },
  data() {
    return {
      selectedFruit: "apple",
    };
  },
};
</script>

We bind the selected value to a reactive property with v-model .

c-radio has the radio buttons.

We can change the color of the radio button with the variant-color prop:

<template>
  <c-box>
    <c-radio-group v-model="selectedFruit">
      <c-radio variant-color="red" value="apple">apple</c-radio>
      <c-radio variant-color="orange" value="orange">orange </c-radio>
      <c-radio value="grape">grape</c-radio>
    </c-radio-group>
    <c-text> Favourite fruit: {{ selectedFruit }} </c-text>
  </c-box>
</template>

<script>
import { CBox, CRadio, CRadioGroup, CText } from "@chakra-ui/vue";

export default {
  components: {
    CBox,
    CRadio,
    CRadioGroup,
    CText,
  },
  data() {
    return {
      selectedFruit: "apple",
    };
  },
};
</script>

The size prop lets us set the size:

<template>
  <c-box>
    <c-radio-group v-model="selectedFruit">
      <c-radio value="apple">apple</c-radio>
      <c-radio value="orange">orange </c-radio>
      <c-radio value="grape" size="lg">grape</c-radio>
    </c-radio-group>
    <c-text> Favourite fruit: {{ selectedFruit }} </c-text>
  </c-box>
</template>

<script>
import { CBox, CRadio, CRadioGroup, CText } from "@chakra-ui/vue";

export default {
  components: {
    CBox,
    CRadio,
    CRadioGroup,
    CText,
  },
  data() {
    return {
      selectedFruit: "apple",
    };
  },
};
</script>

lg makes it large. We can also set it to sm to make it small or md for medium size.

We can disable a button with the is-disabled prop:

<template>
  <c-box>
    <c-radio-group v-model="selectedFruit">
      <c-radio value="apple">apple</c-radio>
      <c-radio value="orange">orange </c-radio>
      <c-radio value="grape" is-disabled>>grape</c-radio>
    </c-radio-group>
    <c-text> Favourite fruit: {{ selectedFruit }} </c-text>
  </c-box>
</template>

<script>
import { CBox, CRadio, CRadioGroup, CText } from "@chakra-ui/vue";

export default {
  components: {
    CBox,
    CRadio,
    CRadioGroup,
    CText,
  },
  data() {
    return {
      selectedFruit: "apple",
    };
  },
};
</script>

And we can make the radio buttons display side by side with the is-inline prop:

<template>
  <c-box>
    <c-radio-group v-model="selectedFruit" is-inline>
      <c-radio value="apple">apple</c-radio>
      <c-radio value="orange">orange </c-radio>
      <c-radio value="grape">grape</c-radio>
    </c-radio-group>
    <c-text> Favourite fruit: {{ selectedFruit }} </c-text>
  </c-box>
</template>

<script>
import { CBox, CRadio, CRadioGroup, CText } from "@chakra-ui/vue";

export default {
  components: {
    CBox,
    CRadio,
    CRadioGroup,
    CText,
  },
  data() {
    return {
      selectedFruit: "apple",
    };
  },
};
</script>

Conclusion

We can add radio buttons with Chakra UI Vue.

Chakra UI Vue is a UI framework made for Vue.js that lets us add good-looking UI components into our Vue app.

This article will look at how to get started with UI development with Chakra UI Vue.

Radio Buttons

We can add radio buttons with the c-radio-group and c-radio components.

For instance, we can write:

<template>
  <c-box>
    <c-radio-group v-model="selectedFruit">
      <c-radio value="apple">apple</c-radio>
      <c-radio value="orange">orange </c-radio>
      <c-radio value="grape">grape</c-radio>
    </c-radio-group>
    <c-text> Favourite fruit: {{ selectedFruit }} </c-text>
  </c-box>
</template>

<script>
import { CBox, CRadio, CRadioGroup, CText } from "@chakra-ui/vue";

export default {
  components: {
    CBox,
    CRadio,
    CRadioGroup,
    CText,
  },
  data() {
    return {
      selectedFruit: "apple",
    };
  },
};
</script>

We bind the selected value to a reactive property with v-model .

c-radio has the radio buttons.

We can change the color of the radio button with the variant-color prop:

<template>
  <c-box>
    <c-radio-group v-model="selectedFruit">
      <c-radio variant-color="red" value="apple">apple</c-radio>
      <c-radio variant-color="orange" value="orange">orange </c-radio>
      <c-radio value="grape">grape</c-radio>
    </c-radio-group>
    <c-text> Favourite fruit: {{ selectedFruit }} </c-text>
  </c-box>
</template>

<script>
import { CBox, CRadio, CRadioGroup, CText } from "@chakra-ui/vue";

export default {
  components: {
    CBox,
    CRadio,
    CRadioGroup,
    CText,
  },
  data() {
    return {
      selectedFruit: "apple",
    };
  },
};
</script>

The size prop lets us set the size:

<template>
  <c-box>
    <c-radio-group v-model="selectedFruit">
      <c-radio value="apple">apple</c-radio>
      <c-radio value="orange">orange </c-radio>
      <c-radio value="grape" size="lg">grape</c-radio>
    </c-radio-group>
    <c-text> Favourite fruit: {{ selectedFruit }} </c-text>
  </c-box>
</template>

<script>
import { CBox, CRadio, CRadioGroup, CText } from "@chakra-ui/vue";

export default {
  components: {
    CBox,
    CRadio,
    CRadioGroup,
    CText,
  },
  data() {
    return {
      selectedFruit: "apple",
    };
  },
};
</script>

lg makes it large. We can also set it to sm to make it small or md for medium size.

We can disable a button with the is-disabled prop:

<template>
  <c-box>
    <c-radio-group v-model="selectedFruit">
      <c-radio value="apple">apple</c-radio>
      <c-radio value="orange">orange </c-radio>
      <c-radio value="grape" is-disabled>>grape</c-radio>
    </c-radio-group>
    <c-text> Favourite fruit: {{ selectedFruit }} </c-text>
  </c-box>
</template>

<script>
import { CBox, CRadio, CRadioGroup, CText } from "@chakra-ui/vue";

export default {
  components: {
    CBox,
    CRadio,
    CRadioGroup,
    CText,
  },
  data() {
    return {
      selectedFruit: "apple",
    };
  },
};
</script>

And we can make the radio buttons display side by side with the is-inline prop:

<template>
  <c-box>
    <c-radio-group v-model="selectedFruit" is-inline>
      <c-radio value="apple">apple</c-radio>
      <c-radio value="orange">orange </c-radio>
      <c-radio value="grape">grape</c-radio>
    </c-radio-group>
    <c-text> Favourite fruit: {{ selectedFruit }} </c-text>
  </c-box>
</template>

<script>
import { CBox, CRadio, CRadioGroup, CText } from "@chakra-ui/vue";

export default {
  components: {
    CBox,
    CRadio,
    CRadioGroup,
    CText,
  },
  data() {
    return {
      selectedFruit: "apple",
    };
  },
};
</script>

Conclusion

We can add radio buttons with Chakra UI Vue.