Examples - Nuxt UI

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:


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

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

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'
}, {
  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.

Pagination

Take a look at the component!

Shortcuts

Learn how to display and define keyboard shortcuts in your app.

Roadmap

Discover our Volta board for @nuxt/ui development status.