ui/docs/content/1.getting-started/5.examples.md

title, description

title	description
Examples	Discover some real-life examples of components you can build.

::alert{icon="i-heroicons-wrench-screwdriver"} 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.

::component-example #default :color-mode-button

#code

<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.

<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.

::component-example #default :date-picker-example

#code

<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>

::

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

::component-example

padding: false

#default :command-palette-theme-algolia{class="max-h-[480px] rounded-md"} ::

::alert{icon="i-simple-icons-github" to="https://github.com/nuxtlabs/ui/blob/dev/docs/components/content/themes/CommandPaletteThemeAlgolia.vue#L23"} Take a look at the component! ::

Raycast

::component-example

padding: false

#default :command-palette-theme-raycast{class="max-h-[480px] rounded-md"} ::

::alert{icon="i-simple-icons-github" to="https://github.com/nuxtlabs/ui/blob/dev/docs/components/content/themes/CommandPaletteThemeRaycast.vue#L30"} Take a look at the component! ::

VerticalNavigation

::component-example #default :vertical-navigation-theme-tailwind #code

<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',
      padding: '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

::component-example #default :pagination-theme-rounded #code

<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

::component-example #default :pagination-example-r-t-l ::