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/nuxt/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
<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{component="date-picker-example"}

### Table

Here is an example of a Table component with all its features implemented.

:component-example{component="table-example-advanced" hiddenCode :padding="false" }

::callout{icon="i-simple-icons-github" to="https://github.com/nuxt/ui/blob/dev/docs/components/content/examples/TableExampleAdvanced.vue" target="_blank"}
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](/navigation/command-palette).

#### Algolia

::component-example
---
padding: false
component: 'command-palette-example-theme-algolia'
componentProps:
  class: 'max-h-[480px] rounded-md'
hiddenCode: true
---
::

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

#### Raycast

::component-example
---
padding: false
component: 'command-palette-example-theme-raycast'
componentProps:
  class: 'max-h-[480px] rounded-md'
hiddenCode: true
---
::

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

### VerticalNavigation

:component-example{component="vertical-navigation-example-theme-tailwind"}

### Pagination

:component-example{component="pagination-example-theme-rounded"}

## RTL Support

Here are some examples of how components look like in RTL mode.

### Pagination

:component-example{component="pagination-example-r-t-l" hiddenCode}

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