getting started
Examples
Discover some real-life examples of components you can build.
If you have any ideas of examples you'd like to see, please comment on this issue.
Components
You can mix and match components to build your own UI.
ColorModeButton
You can easily build a color mode button by using the useColorMode composable from @nuxtjs/color-mode.
components/ColorModeButton.vue
<script setup>
const colorMode = useColorMode()
const isDark = computed({
get () {
return colorMode.value === 'dark'
},
set () {
colorMode.preference = colorMode.value === 'dark' ? 'light' : 'dark'
}
})
</script>
<template>
<ClientOnly>
<UButton
:icon="isDark ? 'i-heroicons-moon-20-solid' : 'i-heroicons-sun-20-solid'"
color="gray"
variant="ghost"
aria-label="Theme"
@click="isDark = !isDark"
/>
<template #fallback>
<div class="w-8 h-8" />
</template>
</ClientOnly>
</template>
DatePicker
Here is an example of a date picker component built with v-calendar.
components/DatePicker.vue
<script setup lang="ts">
import { DatePicker as VCalendarDatePicker } from 'v-calendar'
import 'v-calendar/dist/style.css'
const props = defineProps({
modelValue: {
type: Date,
default: null
}
})
const emit = defineEmits(['update:model-value', 'close'])
const colorMode = useColorMode()
const isDark = computed(() => colorMode.value === 'dark')
const date = computed({
get: () => props.modelValue,
set: (value) => {
emit('update:model-value', value)
emit('close')
}
})
const attrs = [{
key: 'today',
highlight: {
color: 'blue',
fillMode: 'outline',
class: '!bg-gray-100 dark:!bg-gray-800'
},
dates: new Date()
}]
</script>
<template>
<VCalendarDatePicker
v-model="date"
transparent
borderless
:attributes="attrs"
:is-dark="isDark"
title-position="left"
trim-weeks
:first-day-of-week="2"
/>
</template>
You can use it inside a Popover component to display it when clicking on a Button.
<script setup>
const date = ref(new Date())
const label = computed(() => date.value.toLocaleDateString('en-us', { weekday: 'long', year: 'numeric', month: 'short', day: 'numeric' })
)
</script>
<template>
<UPopover :popper="{ placement: 'bottom-start' }">
<UButton icon="i-heroicons-calendar-days-20-solid" :label="label" />
<template #panel="{ close }">
<DatePicker v-model="date" @close="close" />
</template>
</UPopover>
</template>
Table
Here is an example of a Table component with all its features implemented.
Todos
Rows per page:
| Actions | ||||
|---|---|---|---|---|
| 1 | delectus aut autem | In Progress | ||
| 2 | quis ut nam facilis et officia qui | In Progress | ||
| 3 | fugiat veniam minus | In Progress | ||
| 4 | et porro tempora | Completed | ||
| 5 | laboriosam mollitia et enim quasi adipisci quia provident illum | In Progress | ||
| 6 | qui ullam ratione quibusdam voluptatem quia omnis | In Progress | ||
| 7 | illo expedita consequatur quia in | In Progress | ||
| 8 | quo adipisci enim quam ut ab | Completed | ||
| 9 | molestiae perspiciatis ipsa | In Progress | ||
| 10 | illo est ratione doloremque quia maiores aut | Completed |
Showing 1 to 10 of 200 results
Theming
Our theming system provides a lot of flexibility to customize the components.
CommandPalette
Here is some examples of what you can do with the CommandPalette.
Algolia
No recent searches
Raycast
Suggestions
Linear
Figma
Slack
YouTube
GitHub
Commands
Clipboard History
Import Extension
Manage Extensions
VerticalNavigation
<script setup>
const links = [{
label: 'Introduction',
to: '/getting-started'
}, {
label: 'Installation',
to: '/getting-started/installation'
}, {
label: 'Theming',
to: '/getting-started/theming'
}, {
label: 'Shortcuts',
to: '/getting-started/shortcuts'
}, {
label: 'Examples',
to: '/getting-started/examples'
}, {
label: 'Roadmap',
to: '/getting-started/roadmap'
}]
</script>
<template>
<UVerticalNavigation
:links="links"
:ui="{
wrapper: 'border-s border-gray-200 dark:border-gray-800 space-y-2',
base: 'group block border-s -ms-px lg:leading-6 before:hidden',
padding: 'p-0 ps-4',
rounded: '',
font: '',
ring: '',
active: 'text-primary-500 dark:text-primary-400 border-current font-semibold',
inactive: 'border-transparent hover:border-gray-400 dark:hover:border-gray-500 text-gray-700 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-300'
}"
/>
</template>
Pagination
<script setup>
const page = ref(1)
const items = ref(Array(55))
</script>
<template>
<UPagination
v-model="page"
:total="items.length"
:ui="{
wrapper: 'flex items-center gap-1',
rounded: '!rounded-full min-w-[32px] justify-center'
}"
:prev-button="null"
:next-button="{
icon: 'i-heroicons-arrow-small-right-20-solid',
color: 'primary',
variant: 'outline'
}"
/>
</template>
RTL Support
Here are some examples of how components look like in RTL mode.