Skip to content
On this page


Modal is a dialog that appears on top of the main window. It is used to display information or collect user input. It is a component of the Dialogs category.

We have already created several modals. You can use them easily anywhere in the project.

Basic example

    <Button text="Open Modal" @click="toggleModal" />
      title="Basic Modal"
      label="Modal title"
      @close="show = false"
      Lorem ipsum dolor sit amet, consec tetur adipiscing elit, sed do eiusmod
      tempor incididun ut .
<script setup>
import Modal from "@/components/Modal";
import Button from "@/components/Button";
import { ref } from "vue";
const show = ref(false);
const toggleModal = () => {
  show.value = !show.value;


You can use activeModal props for active modal. centered props for centered modal. disableBackdrop props for disabled backdrop. noFade props for disabled fade animation. sizeClass props for changing modal size. eg: sizeClass="w-1/2" for half modal.

COPYRIGHT © 2022 Codeshaper, All rights reserved.