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

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

::callout{icon="i-heroicons-wrench-screwdriver"}
If you have any ideas of examples you'd like to see, please comment on [this issue](https://github.com/nuxtlabs/ui/issues/297).
::

## 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
```vue [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](https://github.com/nathanreyes/v-calendar).

```vue [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](/overlays/popover) component to display it when clicking on a [Button](/elements/button).

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

#code
```vue
<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](/navigation/command-palette).

#### Algolia

::component-example
---
padding: false
---

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

::callout{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"}
::

::callout{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
```vue
<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
```vue
<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
::

::callout{icon="i-simple-icons-github" to="https://github.com/nuxtlabs/ui/blob/dev/docs/components/content/examples/PaginationExampleRTL.vue"}
Take a look at the component!
::