docs(typography): move to own section

docs/app/app.vue

@@ -13,8 +13,6 @@ const { data: files } = useLazyAsyncData('search', () => queryCollectionSearchSe
   server: false
 })
 
-const links = useHeaderLinks()
-const searchLinks = useSearchLinks()
 const color = computed(() => colorMode.value === 'dark' ? (colors as any)[appConfig.ui.colors.neutral][900] : 'white')
 const radius = computed(() => `:root { --ui-radius: ${appConfig.theme.radius}rem; }`)
 const blackAsPrimary = computed(() => appConfig.theme.blackAsPrimary ? `:root { --ui-primary: black; } .dark { --ui-primary: white; }` : ':root {}')
@@ -45,7 +43,8 @@ useServerSeoMeta({
 useFaviconFromTheme()
 
 const { frameworks } = useSharedData()
-const { mappedNavigation, filteredNavigation } = useContentNavigation(navigation)
+const links = useSearchLinks()
+const { mappedNavigation, filteredNavigation } = useSearchNavigation(navigation)
 
 provide('navigation', mappedNavigation)
 </script>
@@ -60,7 +59,7 @@ provide('navigation', mappedNavigation)
       <template v-if="!route.path.startsWith('/examples')">
         <!-- <Banner /> -->
 
-        <Header :links="links" />
+        <Header />
       </template>
 
       <NuxtLayout>
@@ -72,7 +71,7 @@ provide('navigation', mappedNavigation)
 
         <ClientOnly>
           <LazyUContentSearch
-            :links="searchLinks"
+            :links="links"
             :files="files"
             :groups="[{
               id: 'framework',

docs/app/components/Footer.vue

@@ -1,26 +1,6 @@
 <script setup lang="ts">
 const route = useRoute()
-
-const links = [{
-  label: 'Docs',
-  to: '/docs'
-}, {
-  label: 'Figma',
-  to: '/figma'
-}, {
-  label: 'Templates',
-  to: '/templates'
-}, {
-  label: 'Showcase',
-  to: '/showcase'
-}, {
-  label: 'Team',
-  to: '/team'
-}, {
-  label: 'Releases',
-  to: 'https://github.com/nuxt/ui/releases',
-  target: '_blank'
-}]
+const links = useFooterLinks()
 </script>
 
 <template>

docs/app/components/VersionMenu.vue

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+const config = useRuntimeConfig().public
+
+const items = computed(() => {
+  return [
+    { label: `v${config.version}`, active: true, color: 'primary' as const, checked: true, type: 'checkbox' as const },
+    { label: 'v3.x', to: 'https://ui.nuxt.com' },
+    { label: 'v2.x', to: 'https://ui2.nuxt.com' }
+  ]
+})
+</script>
+
+<template>
+  <UDropdownMenu
+    v-slot="{ open }"
+    :modal="false"
+    :items="items"
+    :content="{ align: 'start' }"
+    :ui="{ content: 'min-w-fit' }"
+    size="xs"
+  >
+    <UButton
+      :label="`v${config.version}`"
+      variant="subtle"
+      trailing-icon="i-lucide-chevron-down"
+      size="xs"
+      class="-mb-[6px] font-semibold rounded-full truncate"
+      :class="[open && 'bg-primary/15 ']"
+      :ui="{
+        trailingIcon: ['transition-transform duration-200', open ? 'rotate-180' : undefined].filter(Boolean).join(' ')
+      }"
+    />
+  </UDropdownMenu>
+</template>

docs/app/components/content/ComponentChangelog.vue

@@ -2,11 +2,17 @@
 import type { CommitInfo } from '#build/changelog'
 import { changelog } from '#build/changelog'
 
+const props = defineProps<{
+  prose?: boolean
+}>()
+
 const route = useRoute()
 const name = route.path.split('/').pop()
 
 const commits = computed(() => {
-  const related = changelog.filter(c => c.version || c.components?.some(i => i === name))
+  const componentName = props.prose ? `prose-${name}` : name
+  const related = changelog.filter(c => c.version || c.components?.some(i => i === componentName))
+
   return related.filter((i, idx) => !(i.version && (!related[idx + 1] || related[idx + 1]?.version)))
 })
 

docs/app/components/content/examples/accordion/AccordionMarkdownExample.vue

@@ -1,34 +1,34 @@
 <script setup lang="ts">
 const items = [
   {
-    label: 'What are the main considerations when upgrading to Nuxt UI v3?',
+    label: 'Is Nuxt UI free to use?',
     icon: 'i-lucide-circle-help',
-    content: 'The transition to v3 involves significant changes, including new component structures, updated theming approaches, and revised TypeScript definitions. We recommend a careful, incremental upgrade process, starting with thorough testing in a development environment.'
+    content: 'Yes! Nuxt UI is completely free and open source under the MIT license. All 100+ components are available to everyone.'
   },
   {
-    label: 'Is Nuxt UI v3 compatible with standalone Vue projects?',
+    label: 'Can I use Nuxt UI with Vue without Nuxt?',
     icon: 'i-lucide-circle-help',
-    content: 'Nuxt UI is now compatible with Vue! You can follow the [installation guide](/docs/getting-started/installation/vue) to get started.'
+    content: 'Yes! While optimized for Nuxt, Nuxt UI works perfectly with standalone Vue projects via our Vite plugin. You can follow the [installation guide](/docs/getting-started/installation/vue) to get started.'
   },
   {
-    label: 'Will Nuxt UI v3 work with other CSS frameworks like UnoCSS?',
+    label: 'Will Nuxt UI work with other CSS frameworks like UnoCSS?',
     icon: 'i-lucide-circle-help',
-    content: 'Nuxt UI v3 is currently designed to work exclusively with Tailwind CSS. While there\'s interest in UnoCSS support, implementing it would require significant changes to the theme structure due to differences in class naming conventions. As a result, we don\'t have plans to add UnoCSS support in v3.'
+    content: 'No. Nuxt UI is designed exclusively for Tailwind CSS. UnoCSS support would require significant architecture changes due to different class naming conventions.'
   },
   {
-    label: 'How does Nuxt UI v3 handle accessibility?',
+    label: 'How does Nuxt UI handle accessibility?',
     icon: 'i-lucide-circle-help',
-    content: 'Nuxt UI v3 enhances accessibility through Reka UI integration. This provides automatic ARIA attributes, keyboard navigation support, intelligent focus management, and screen reader announcements. While offering a strong foundation, proper implementation and testing in your specific use case remains crucial for full accessibility compliance. For more detailed information, refer to [Reka UI\'s accessibility documentation](https://reka-ui.com/docs/overview/accessibility).'
+    content: 'Through [Reka UI](https://reka-ui.com/docs/overview/accessibility) integration, Nuxt UI provides automatic ARIA attributes, keyboard navigation, focus management, and screen reader support. While offering a strong foundation, testing in your specific use case remains important.'
   },
   {
-    label: 'What is the testing approach for Nuxt UI v3?',
+    label: 'How is Nuxt UI tested?',
     icon: 'i-lucide-circle-help',
-    content: 'Nuxt UI v3 ensures reliability with 1000+ Vitest tests, covering core functionality and accessibility. This robust testing suite supports the library\'s stability and serves as a reference for developers.'
+    content: 'Nuxt UI ensures reliability with 1000+ Vitest tests covering core functionality and accessibility.'
   },
   {
-    label: 'Is this version stable and suitable for production use?',
+    label: 'Is Nuxt UI production-ready?',
     icon: 'i-lucide-circle-help',
-    content: 'As Nuxt UI v3 is currently in alpha, we recommend thorough testing before using it in production environments. We\'re actively working on stabilization and welcome feedback from early adopters to improve the library. Feel free to report any issues you encounter on our [GitHub repository](https://github.com/nuxt/ui/issues).'
+    content: 'Yes! Nuxt UI is used in production by thousands of applications with extensive tests, regular updates, and active maintenance.'
   }
 ]
 </script>
@@ -38,7 +38,7 @@ const items = [
     type="multiple"
     :items="items"
     :unmount-on-hide="false"
-    :default-value="['0']"
+    :default-value="['3']"
     :ui="{
       trigger: 'text-base',
       body: 'text-base text-muted'

docs/app/components/header/Header.vue

@@ -0,0 +1,43 @@
+<script setup lang="ts">
+const route = useRoute()
+const { desktopLinks } = useHeaderLinks()
+</script>
+
+<template>
+  <UHeader :ui="{ left: 'min-w-0' }" class="flex flex-col">
+    <template #left>
+      <HeaderLogo />
+
+      <VersionMenu />
+    </template>
+
+    <UNavigationMenu :items="desktopLinks" variant="link" />
+
+    <template #right>
+      <ThemePicker />
+
+      <UTooltip text="Search" :kbds="['meta', 'K']">
+        <UContentSearchButton />
+      </UTooltip>
+
+      <UTooltip text="Open on GitHub" class="hidden lg:flex">
+        <UButton
+          color="neutral"
+          variant="ghost"
+          to="https://github.com/nuxt/ui"
+          target="_blank"
+          icon="i-simple-icons-github"
+          aria-label="GitHub"
+        />
+      </UTooltip>
+    </template>
+
+    <template #body>
+      <HeaderBody />
+    </template>
+
+    <template v-if="route.path.startsWith('/docs/')" #bottom>
+      <HeaderBottom />
+    </template>
+  </UHeader>
+</template>

docs/app/components/header/HeaderBody.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import type { ContentNavigationItem } from '@nuxt/content'
+
+const navigation = inject<Ref<ContentNavigationItem[]>>('navigation')
+
+const { mobileLinks } = useHeaderLinks()
+const { groupedNavigation } = useGroupNavigation(navigation!)
+</script>
+
+<template>
+  <UNavigationMenu orientation="vertical" :items="mobileLinks" class="-mx-2.5" />
+
+  <USeparator type="dashed" class="mt-4 mb-6" />
+
+  <div class="flex flex-col gap-2 mb-5.5">
+    <FrameworkTabs />
+  </div>
+
+  <UContentNavigation :navigation="groupedNavigation" highlight :ui="{ linkTrailingBadge: 'font-semibold uppercase' }" />
+</template>