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.

<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 }">
      <LazyDatePicker 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
1delectus aut autemIn Progress
2quis ut nam facilis et officia quiIn Progress
3fugiat veniam minusIn Progress
4et porro temporaCompleted
5laboriosam mollitia et enim quasi adipisci quia provident illumIn Progress
6qui ullam ratione quibusdam voluptatem quia omnisIn Progress
7illo expedita consequatur quia inIn Progress
8quo adipisci enim quam ut abCompleted
9molestiae perspiciatis ipsaIn Progress
10illo est ratione doloremque quia maiores autCompleted
Showing 1 to 10 of 200 results
Take a look at the component!

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

Take a look at the component!

Raycast

Suggestions

Linear
Application
Figma
Application
Slack
Application
YouTube
Application
GitHub
Application

Commands

Clipboard History
Command
Import Extension
Command
Manage Extensions
Command
Take a look at the component!

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'
}]
</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.

Pagination

Take a look at the component!