UI Component Libraries

<script setup lang="ts">
import { ref } from 'vue'
const accent = ref('#1976d2')
</script>

<template>
  <button class="btn"><span class="icon" />Save</button>
</template>

<style scoped>
.btn { background: v-bind(accent); }
.btn :deep(.icon) { margin-inline-end: 0.5rem; }
</style>

<script setup lang="ts">
const busy = false
</script>

<template>
  <button :class="['rounded px-4 py-2 text-white', busy ? 'bg-gray-400' : 'bg-blue-600 hover:bg-blue-700']">
    Save
  </button>
</template>

npm i -D sass-embedded

<style scoped lang="scss">
$brand: #1976d2;
.btn {
  background: $brand;
  &:hover { filter: brightness(1.1); }
}
</style>

npm i vuetify

// src/main.ts
import { createApp } from 'vue'
import { createVuetify } from 'vuetify'
import * as components from 'vuetify/components'
import * as directives from 'vuetify/directives'
import 'vuetify/styles'
import App from './App.vue'

const vuetify = createVuetify({ components, directives })
createApp(App).use(vuetify).mount('#app')

<script setup lang="ts">
import { ref } from 'vue'
const dialog = ref(false)
</script>

<template>
  <v-btn color="primary" @click="dialog = true">Save</v-btn>
  <v-dialog v-model="dialog">
    <v-card title="Confirm?" text="Save these changes?" />
  </v-dialog>
</template>

npm i primevue @primeuix/themes

// src/main.ts
import PrimeVue from 'primevue/config'
import Aura from '@primeuix/themes/aura'

app.use(PrimeVue, { theme: { preset: Aura } })

<script setup lang="ts">
import Button from 'primevue/button'

const save = (): void => {}
</script>

<template>
  <Button label="Save" icon="pi pi-check" @click="save" />
</template>

npm i element-plus

<script setup lang="ts">
import { ref } from 'vue'
import { ElButton, ElDialog } from 'element-plus'

const visible = ref(false)
</script>

<template>
  <ElButton type="primary" @click="visible = true">Save</ElButton>
  <ElDialog v-model="visible" title="Confirm?" />
</template>

npm i naive-ui

<script setup lang="ts">
import { NButton, NConfigProvider } from 'naive-ui'

const save = (): void => {}
</script>

<template>
  <NConfigProvider>
    <NButton type="primary" @click="save">Save</NButton>
  </NConfigProvider>
</template>

npm i ant-design-vue

// src/main.ts
import Antd from 'ant-design-vue'
import 'ant-design-vue/dist/reset.css'

app.use(Antd)

<template>
  <a-button type="primary" @click="save">Save</a-button>
</template>

npm i quasar @quasar/extras
npm i -D @quasar/vite-plugin sass-embedded

// src/main.ts
import { Quasar } from 'quasar'
import 'quasar/src/css/index.sass'

app.use(Quasar, { plugins: {} })

<template>
  <q-btn color="primary" label="Save" @click="save" />
</template>

npm i @nuxt/ui

// vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nuxt/ui/vite'

export default defineConfig({
  plugins: [vue(), ui()],
})

<script setup lang="ts">
import { ref } from 'vue'
const open = ref(false)
</script>

<template>
  <UButton @click="open = true">Save</UButton>
  <UModal v-model:open="open" title="Confirm?" />
</template>

npx shadcn-vue@latest init
npx shadcn-vue@latest add button dialog

<script setup lang="ts">
import { Button } from '@/components/ui/button'

const save = (): void => {}
</script>

<template>
  <Button @click="save">Save</Button>
</template>

npm i reka-ui

<script setup lang="ts">
import {
  DialogRoot, DialogTrigger, DialogPortal, DialogOverlay,
  DialogContent, DialogTitle, DialogClose,
} from 'reka-ui'
</script>

<template>
  <DialogRoot>
    <DialogTrigger>Open</DialogTrigger>
    <DialogPortal>
      <DialogOverlay class="overlay" />
      <DialogContent class="modal">
        <DialogTitle>Confirm</DialogTitle>
        <DialogClose>Cancel</DialogClose>
      </DialogContent>
    </DialogPortal>
  </DialogRoot>
</template>

npm i @headlessui/vue

<script setup lang="ts">
import { Menu, MenuButton, MenuItems, MenuItem } from '@headlessui/vue'
</script>

<template>
  <Menu>
    <MenuButton>Options</MenuButton>
    <MenuItems>
      <MenuItem v-slot="{ active }">
        <button :class="{ 'bg-blue-500 text-white': active }">Edit</button>
      </MenuItem>
    </MenuItems>
  </Menu>
</template>

<script setup lang="ts">
import { Button as VanButton } from 'vant'
import 'vant/lib/index.css'

const save = (): void => {}
</script>

<template>
  <VanButton type="primary" @click="save">Save</VanButton>
</template>