🌳 Vue.js Components

import Alert from "../../components/ui/alert/Alert";
 
<Alert
  variant="success"
  title="Success Message"
  message="Be cautious when performing this action."
  showLink={true}
  linkHref="/"
  linkText="Learn more"
/>
<Alert
  variant="success"
  title="Success Message"
  message="Be cautious when performing this action."
  showLink={false}
/>

import Avatar from "../../components/ui/avatar/Avatar";
 
<Avatar :src="/images/user/user-01.jpg" :size="xsmall" />
<Avatar :src="/images/user/user-01.jpg" :size="small" />
<Avatar :src="/images/user/user-01.jpg" :size="medium" />
<Avatar :src="/images/user/user-01.jpg" :size="large" />
<Avatar :src="/images/user/user-01.jpg" :size="xlarge" />
<Avatar :src="/images/user/user-01.jpg" :size="xxlarge" />

import Badge from "../../components/ui/badge/Badge";
 
<Badge variant="light" :color="primary">
  Primary
</Badge>
 
<Badge variant="light" :color="success">
  Success
</Badge>
<Badge variant="light" :color="error">
  Error
</Badge>
<Badge variant="light" :color="warning">
  Warning
</Badge>
<Badge variant="light" :color="info">
  Info
</Badge>
<Badge variant="light" :color="light">
  Light
</Badge>
<Badge variant="light" :color="dark">
  Dark
</Badge>

import Breadcrumb from "./Breadcrumb";
const breadcrumbItems = [{ label: 'Home', href: '/' }, { label: 'UI Kits' }]
const breadcrumbItemsTwo = [
{ label: 'Home', href: '/' },
{ label: 'Ui Kits', href: '/' },
{ label: 'Avatar' },
]
<div>
  <Breadcrumb :items="breadcrumbItems" />
  <Breadcrumb :items="breadcrumbItemsTwo" />
</div>;
 
export default Breadcrumb;

  <div class="flex items-center gap-5">
    <Button size="sm" variant="primary"> Button Text </Button>
    <Button size="md" variant="primary"> Button Text </Button>
  </div>

<div>
  <div class="shadow-theme-xs inline-flex items-center">
    <button
      type="button"
      class="bg-brand-500 ring-brand-500 hover:bg-brand-500 inline-flex items-center gap-2 px-4 py-3 text-sm font-medium text-white ring-1 ring-inset transition first:rounded-l-lg last:rounded-r-lg"
    >
      Button Text
    </button>
    <button
      type="button"
      class="text-brand-500 ring-brand-500 hover:bg-brand-500 -ml-px inline-flex items-center gap-2 bg-transparent px-4 py-3 text-sm font-medium ring-1 ring-inset first:rounded-l-lg last:rounded-r-lg hover:text-white"
    >
      Button Text
    </button>
    <button
      type="button"
      class="text-brand-500 ring-brand-500 hover:bg-brand-500 -ml-px inline-flex items-center gap-2 bg-transparent px-4 py-3 text-sm font-medium ring-1 ring-inset first:rounded-l-lg last:rounded-r-lg hover:text-white"
    >
      Button Text
    </button>
  </div>
</div>

<div className="grid grid-cols-1 gap-5 sm:grid-cols-2 xl:grid-cols-3">
  <CardWithImage />
  <CardWithImage />
  <CardWithImage />
</div>

<template>
<div class="border border-gray-200 rounded-lg carouselOne dark:border-gray-800">
<swiper :modules="modules" :autoplay="autoplayOptions">
  <swiper-slide v-for="(item, index) in carouselData" :key="index">
    <div class="overflow-hidden rounded-lg">
      <img
        :src="item.thumbnail"
        :width="487"
        :height="297"
        class="w-full rounded-lg"
        alt="carousel"
      />
    </div>
  </swiper-slide>
</swiper>
</div>
</template>
 
<script setup lang="ts">
import { ref } from 'vue'
import { Swiper, SwiperSlide } from 'swiper/vue'
import { Autoplay } from 'swiper/modules'
 
const modules = [Autoplay]
 
const autoplayOptions = {
delay: 5000,
disableOnInteraction: false,
}
 
const carouselData = ref([
{
thumbnail: '/images/carousel/carousel-01.png',
},
{
thumbnail: '/images/carousel/carousel-02.png',
},
{
thumbnail: '/images/carousel/carousel-03.png',
},
{
thumbnail: '/images/carousel/carousel-04.png',
},
])
</script>
 

<template>
<div class="relative inline-block" ref="dropdownRef">
<a
  href="#"
  @click.prevent="toggleDropdown"
  class="inline-flex items-center gap-2 px-4 py-3 text-sm font-medium text-white rounded-lg bg-brand-500 hover:bg-brand-600"
>
  Account Menu
  <svg
    class="duration-200 ease-in-out stroke-current"
    :class="{ 'rotate-180': isOpen }"
    width="20"
    height="20"
    viewBox="0 0 20 20"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
  >
    <path
      d="M4.79199 7.396L10.0003 12.6043L15.2087 7.396"
      stroke="currentColor"
      stroke-width="1.5"
      stroke-linecap="round"
      stroke-linejoin="round"
    />
  </svg>
</a>
<transition
  enter-active-class="transition duration-200 ease-out"
  enter-from-class="transform scale-95 opacity-0"
  enter-to-class="transform scale-100 opacity-100"
  leave-active-class="transition duration-75 ease-in"
  leave-from-class="transform scale-100 opacity-100"
  leave-to-class="transform scale-95 opacity-0"
>
  <div
    v-if="isOpen"
    v-click-outside="closeDropdown"
    class="absolute left-0 top-full z-40 mt-2 w-full min-w-[260px] rounded-2xl border border-gray-200 bg-white p-3 shadow-theme-lg dark:border-gray-800 dark:bg-[#1E2635]"
  >
    <ul class="flex flex-col gap-1">
      <li v-for="item in menuItems" :key="item.text">
        <a
          :href="item.href"
          @click="handleItemClick"
          class="flex rounded-lg px-3 py-2.5 text-sm font-medium text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-white/5"
        >
          {{ item.text }}
        </a>
      </li>
    </ul>
  </div>
</transition>
</div>
</template>
 
<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
 
const isOpen = ref(false)
const dropdownRef = ref(false)
 
const menuItems = [
{ text: 'Edit Profile', href: '#' },
{ text: 'Account Settings', href: '#' },
{ text: 'License', href: '#' },
{ text: 'Support', href: '#' },
]
 
const toggleDropdown = () => {
isOpen.value = !isOpen.value
}
 
const closeDropdown = () => {
isOpen.value = false
}
 
const handleItemClick = (event) => {
event.preventDefault()
// Add your logic here for handling item clicks
closeDropdown()
}
 
const handleClickOutside = (event) => {
if (dropdownRef.value && !dropdownRef.value.contains(event.target)) {
closeDropdown()
}
}
 
onMounted(() => {
document.addEventListener('click', handleClickOutside)
})
 
onUnmounted(() => {
document.removeEventListener('click', handleClickOutside)
})
</script>
 

  <ResponsiveImage />
  <TwoColumnImageGrid />
  <ThreeColumnImageGrid />

  <div class="flex flex-col space-y-3">
    <RouterLink to="/" class="text-sm font-normal text-gray-500 dark:text-gray-400">
      Primary link
    </RouterLink>
    <RouterLink to="/" class="text-sm font-normal text-brand-500 dark:text-brand-500">
      Secondary link
    </RouterLink>
    <RouterLink to="/" class="text-sm font-normal text-success-500">
      Success link
    </RouterLink>
    <RouterLink to="/" class="text-sm font-normal text-error-500">
      Danger link
    </RouterLink>
    <RouterLink to="/" class="text-sm font-normal text-warning-500">
      Warning link
    </RouterLink>
    <RouterLink to="/" class="text-sm font-normal text-blue-light-500">
      Primary link
    </RouterLink>
    <RouterLink to="/" class="text-sm font-normal text-gray-400">
      Primary link
    </RouterLink>
    <RouterLink to="/" class="text-sm font-normal text-gray-800 dark:text-white/90">
      Primary link
    </RouterLink>
  </div>

<div>
  <UnOrderedList />
  <OrderedList />
</div>

<div>
  <RegularModal />
  <VerticallyCentered />
</div>

<div>
 <AnnouncementBar
      :title="notificationTitle"
      :message="notificationMessage"
      :laterButtonText="laterText"
      :updateButtonText="updateText"
      @later="handleLater"
      @update="handleUpdate"
    />
</div>

    <Progressbar :progress="55" />
    <Progressbar :progress="85" />
    <Progressbar :progress="35" />

<div>
  <PaginationWithTextAndIcon
      :totalPages="20"
      :initialPage="1"
      @pageChange="handlePageChange"
    />
</div>

    <Popover position="top">
      <template #trigger>
        <Button size="sm"> Top Popover </Button>
      </template>
      <!-- Popover Header -->
      <div
        class="relative rounded-t-xl border-b border-gray-200 bg-gray-100 px-5 py-3 dark:border-white/[0.03] dark:bg-[#252D3A]"
      >
        <h4 class="text-base font-semibold text-gray-800 dark:text-white/90">Popover Title</h4>
      </div>
      <!-- Popover Body -->
      <div class="p-5">
        <p class="text-sm text-gray-500 dark:text-gray-400">
          Lorem ipsum dolor sit amet, consect adipiscing elit. Mauris facilisis congue exclamate
          justo nec facilisis.
        </p>
      </div>
    </Popover>

<div>
  <RoundedRibbon />
</div>

<div>
  <SpinnerOne />
</div>

<template>
<div
class="overflow-hidden rounded-xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-white/[0.03]"
>
<div class="max-w-full overflow-x-auto custom-scrollbar">
  <table class="min-w-full">
    <thead>
      <tr class="border-b border-gray-200 dark:border-gray-700">
        <th class="px-5 py-3 text-left w-3/11 sm:px-6">
          <p class="font-medium text-gray-500 text-theme-xs dark:text-gray-400">User</p>
        </th>
        <th class="px-5 py-3 text-left w-2/11 sm:px-6">
          <p class="font-medium text-gray-500 text-theme-xs dark:text-gray-400">Project Name</p>
        </th>
        <th class="px-5 py-3 text-left w-2/11 sm:px-6">
          <p class="font-medium text-gray-500 text-theme-xs dark:text-gray-400">Team</p>
        </th>
        <th class="px-5 py-3 text-left w-2/11 sm:px-6">
          <p class="font-medium text-gray-500 text-theme-xs dark:text-gray-400">Status</p>
        </th>
        <th class="px-5 py-3 text-left w-2/11 sm:px-6">
          <p class="font-medium text-gray-500 text-theme-xs dark:text-gray-400">Budget</p>
        </th>
      </tr>
    </thead>
    <tbody class="divide-y divide-gray-200 dark:divide-gray-700">
      <tr
        v-for="(user, index) in users"
        :key="index"
        class="border-t border-gray-100 dark:border-gray-800"
      >
        <td class="px-5 py-4 sm:px-6">
          <div class="flex items-center gap-3">
            <div class="w-10 h-10 overflow-hidden rounded-full">
              <img :src="user.avatar" :alt="user.name" />
            </div>
            <div>
              <span class="block font-medium text-gray-800 text-theme-sm dark:text-white/90">
                {{ user.name }}
              </span>
              <span class="block text-gray-500 text-theme-xs dark:text-gray-400">
                {{ user.role }}
              </span>
            </div>
          </div>
        </td>
        <td class="px-5 py-4 sm:px-6">
          <p class="text-gray-500 text-theme-sm dark:text-gray-400">{{ user.project }}</p>
        </td>
        <td class="px-5 py-4 sm:px-6">
          <div class="flex -space-x-2">
            <div
              v-for="(member, memberIndex) in user.team"
              :key="memberIndex"
              class="w-6 h-6 overflow-hidden border-2 border-white rounded-full dark:border-gray-900"
            >
              <img :src="member" alt="team member" />
            </div>
          </div>
        </td>
        <td class="px-5 py-4 sm:px-6">
          <span
            :class="[
              'rounded-full px-2 py-0.5 text-theme-xs font-medium',
              {
                'bg-success-50 text-success-700 dark:bg-success-500/15 dark:text-success-500':
                  user.status === 'Active',
                'bg-warning-50 text-warning-700 dark:bg-warning-500/15 dark:text-warning-400':
                  user.status === 'Pending',
                'bg-error-50 text-error-700 dark:bg-error-500/15 dark:text-error-500':
                  user.status === 'Cancel',
              },
            ]"
          >
            {{ user.status }}
          </span>
        </td>
        <td class="px-5 py-4 sm:px-6">
          <p class="text-gray-500 text-theme-sm dark:text-gray-400">{{ user.budget }}</p>
        </td>
      </tr>
    </tbody>
  </table>
</div>
</div>
</template>
 
<script setup>
import { ref } from 'vue'
 
const users = ref([
{
name: 'Lindsey Curtis',
role: 'Web Designer',
avatar: '/images/user/user-17.jpg',
project: 'Agency Website',
team: ['/images/user/user-22.jpg', '/images/user/user-23.jpg', '/images/user/user-24.jpg'],
status: 'Active',
budget: '3.9K',
},
{
name: 'Kaiya George',
role: 'Project Manager',
avatar: '/images/user/user-18.jpg',
project: 'Technology',
team: ['/images/user/user-25.jpg', '/images/user/user-26.jpg'],
status: 'Pending',
budget: '24.9K',
},
{
name: 'Zain Geidt',
role: 'Content Writer',
avatar: '/images/user/user-19.jpg',
project: 'Blog Writing',
team: ['/images/user/user-27.jpg'],
status: 'Active',
budget: '12.7K',
},
{
name: 'Abram Schleifer',
role: 'Digital Marketer',
avatar: '/images/user/user-20.jpg',
project: 'Social Media',
team: ['/images/user/user-28.jpg', '/images/user/user-29.jpg', '/images/user/user-30.jpg'],
status: 'Cancel',
budget: '2.8K',
},
{
name: 'Carla George',
role: 'Front-end Developer',
avatar: '/images/user/user-21.jpg',
project: 'Website',
team: ['/images/user/user-31.jpg', '/images/user/user-32.jpg', '/images/user/user-33.jpg'],
status: 'Active',
budget: '4.5K',
},
])
</script>
 

<div>
  <DefaultTab />
</div>

<div>
  <Tooltip content="This is a top tooltip" position="top">
    <Button size="sm">Tooltip Top</Button>
  </Tooltip>
 
  <Tooltip content="This is a right tooltip" position="right">
    <Button size="sm">Tooltip Right</Button>
  </Tooltip>
 
  <Tooltip content="This is a bottom tooltip" position="bottom">
    <Button size="sm">Tooltip Bottom</Button>
  </Tooltip>
 
  <Tooltip content="This is a left tooltip" position="left">
    <Button size="sm">Tooltip Left</Button>
  </Tooltip>
</div>

<div>
  <YouTubeEmbed videoId="dQw4w9WgXcQ" />
  <YouTubeEmbed videoId="dQw4w9WgXcQ" aspectRatio="4:3" />
</div>