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

title, description

title	description
Examples	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. ::

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

::component-example

padding: false component: 'command-palette-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/themes/CommandPaletteThemeAlgolia.vue#L23"} Take a look at the component! ::

Raycast

::component-example

padding: false component: 'command-palette-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/themes/CommandPaletteThemeRaycast.vue#L30"} Take a look at the component! ::

VerticalNavigation

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

Pagination

:component-example{component="pagination-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"} Take a look at the component! ::