docs: improve with examples

docs/content/5.navigation/1.vertical-navigation.md

@@ -39,46 +39,6 @@ const links = [{
 ```
 ::
 
-## Theme
-
-Our theming system provides a lot of flexibility to customize the component. Here is an example of what you can do.
-
-::component-example
-#default
-:vertical-navigation-theme-tailwind
-#code
-```vue
-<script setup>
-const links = [{
-  label: 'Installation',
-  to: '/getting-started/installation'
-}, {
-  label: 'Vertical Navigation',
-  to: '/navigation/vertical-navigation'
-}, {
-  label: 'Command Palette',
-  to: '/navigation/command-palette'
-}]
-</script>
-
-<template>
-  <UVerticalNavigation
-    :links="links"
-    :ui="{
-      wrapper: 'border-l border-gray-200 dark:border-gray-800 space-y-2',
-      base: 'group block border-l -ml-px lg:leading-6',
-      padding: 'pl-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>
-```
-::
-
 ## Props
 
 :component-props

docs/content/5.navigation/2.command-palette.md

@@ -323,40 +323,6 @@ const groups = computed(() => {
 The `loading` state will automatically be enabled when a `search` function is loading. You can disable this behavior by setting the `loading-icon` prop to `null` or globally in `ui.commandPalette.default.loadingIcon`.
 ::
 
-## Themes
-
-Our theming system provides a lot of flexibility to customize the component. Here is some examples of what you can do.
-
-### 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!
-::
-
 ## Slots
 
 ### `empty-state` :u-badge{label="New" class="ml-2 align-text-bottom !rounded-full"}

docs/content/5.navigation/3.pagination.md

@@ -111,39 +111,6 @@ excludedProps:
 ---
 ::
 
-## Theme
-
-Our theming system provides a lot of flexibility to customize the component. Here is an example of what you can do.
-
-::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>
-```
-::
-
 ## Slots
 
 ### `prev` / `next`