chore: revamp sitte

apps/www/.vitepress/theme/components/Announcement.vue

@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { Separator } from '@/lib/registry/default/ui/separator'
 import ArrowRightIcon from '~icons/radix-icons/arrow-right'
 import { announcementConfig } from '../config/site'
 </script>
@@ -7,11 +6,10 @@ import { announcementConfig } from '../config/site'
 <template>
   <a
     :href="announcementConfig.link"
-    class="inline-flex items-center rounded-lg bg-muted px-3 py-1 text-sm font-medium"
+    class="group mb-2 inline-flex items-center px-0.5 text-sm font-medium"
   >
-    {{ announcementConfig.icon }} <Separator class="mx-2 h-4" orientation="vertical" />
+    <span class="sm:hidden underline-offset-4 group-hover:underline">{{ announcementConfig.title }}</span>
-    <span class="sm:hidden">{{ announcementConfig.title }}</span>
+    <span class="hidden sm:inline underline-offset-4 group-hover:underline">
-    <span class="hidden sm:inline">
       {{ announcementConfig.title }}
     </span>
     <ArrowRightIcon class="ml-1 h-4 w-4" />

apps/www/.vitepress/theme/components/CodeConfigCustomizer.vue

@@ -36,11 +36,11 @@ const onSubmit = handleSubmit((values) => {
   >
     <SheetTrigger as-child>
       <Button
-        class="w-9 h-9"
+        class="w-8 h-8"
         :variant="'ghost'"
         :size="'icon'"
       >
-        <RadixIconsGear class="w-5 h-5" />
+        <RadixIconsGear class="w-4 h-4" />
       </Button>
     </SheetTrigger>
     <SheetContent>

apps/www/.vitepress/theme/components/ExamplesNav.vue

@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { ScrollArea, ScrollBar } from '@/lib/registry/default/ui/scroll-area'
 import { cn } from '@/lib/utils'
-import ArrowRightIcon from '~icons/radix-icons/arrow-right'
 import { useRoute } from 'vitepress'
 import { computed, toRefs } from 'vue'
 
@@ -62,10 +61,10 @@ const currentExample = computed(() => examples.find(ex => path.value.startsWith(
           :key="example.href"
           :href="example.href"
           :class="cn(
-            'flex items-center px-4',
+            'flex h-7 items-center justify-center rounded-full px-4 text-center text-sm transition-colors hover:text-primary',
-            path?.startsWith(example.href) || (path === '/' && example.name === 'Mail')
+            path?.startsWith(example.href)
-              ? 'font-bold text-primary'
+              ? 'bg-muted font-medium text-primary'
-              : 'font-medium text-muted-foreground',
+              : 'text-muted-foreground',
           )"
         >
           {{ example.name }}
@@ -73,14 +72,5 @@ const currentExample = computed(() => examples.find(ex => path.value.startsWith(
       </div>
       <ScrollBar orientation="horizontal" class="invisible" />
     </ScrollArea>
-
-    <a
-      v-if="currentExample"
-      :href="currentExample?.code" target="_blank" rel="nofollow"
-      class="absolute right-0 top-0 hidden items-center rounded-[0.5rem] text-sm font-medium md:flex"
-    >
-      View code
-      <ArrowRightIcon class="ml-1 h-4 w-4" />
-    </a>
   </div>
 </template>

apps/www/.vitepress/theme/components/Kbd.vue

@@ -14,7 +14,7 @@ const props = withDefaults(defineProps<KbdProps>(), {
 
 const kbdClass = computed(() => {
   return cva(
-    'inline-flex items-center pointer-events-none h-5 select-none items-center gap-1 rounded border border-border bg-muted font-sans font-medium',
+    'inline-flex items-center pointer-events-none h-5 select-none gap-1 rounded border border-border bg-muted font-sans font-medium',
     {
       variants: {
         size: {

apps/www/.vitepress/theme/components/LandingExample.vue

@@ -0,0 +1,74 @@
+<script setup lang="ts">
+import type { DateRange } from 'reka-ui'
+import CookieSettings from '@/examples/cards/components/CookieSettings.vue'
+import CreateAccount from '@/examples/cards/components/CreateAccount.vue'
+
+import PaymentMethod from '@/examples/cards/components/PaymentMethod.vue'
+
+import ReportAnIssue from '@/examples/cards/components/ReportAnIssue.vue'
+import ShareDocument from '@/examples/cards/components/ShareDocument.vue'
+import TeamMembers from '@/examples/cards/components/TeamMembers.vue'
+import CardChat from '@/lib/registry/new-york/example/CardChat.vue'
+import ActivityGoal from '@/lib/registry/new-york/example/Cards/ActivityGoal.vue'
+import DataTable from '@/lib/registry/new-york/example/Cards/DataTable.vue'
+
+import Metric from '@/lib/registry/new-york/example/Cards/Metric.vue'
+import CardStats from '@/lib/registry/new-york/example/CardStats.vue'
+import { Card } from '@/lib/registry/new-york/ui/card'
+import { RangeCalendar } from '@/lib/registry/new-york/ui/range-calendar'
+import { getLocalTimeZone, today } from '@internationalized/date'
+
+import { type Ref, ref } from 'vue'
+
+const now = today(getLocalTimeZone())
+
+const range = ref({
+  start: now,
+  end: now.add({ days: 8 }),
+}) as Ref<DateRange>
+</script>
+
+<template>
+  <div
+    class="items-start justify-center gap-6 rounded-lg md:grids-col-2 grid md:gap-4 lg:grid-cols-10 xl:grid-cols-11 xl:gap-4"
+  >
+    <div class="space-y-4 lg:col-span-4 xl:col-span-6 xl:space-y-4">
+      <CardStats />
+
+      <div class="grid gap-4 md:grid-cols-2 lg:grid-cols-1 xl:grid-cols-2">
+        <div class="space-y-4">
+          <TeamMembers />
+          <CookieSettings />
+          <PaymentMethod />
+        </div>
+
+        <div class="space-y-4">
+          <CardChat />
+          <CreateAccount />
+          <ReportAnIssue />
+        </div>
+      </div>
+    </div>
+    <div class="space-y-4 lg:col-span-6 xl:col-span-5 xl:space-y-4">
+      <div class="hidden gap-1 sm:grid-cols-[280px_1fr] md:grid">
+        <Card class="max-w-[280px]">
+          <RangeCalendar v-model="range" />
+        </Card>
+
+        <div class="pt-3 sm:pl-2 sm:pt-0 xl:pl-3">
+          <ActivityGoal />
+        </div>
+        <div class="pt-3 sm:col-span-2 xl:pt-3">
+          <Metric />
+        </div>
+        <div class="pt-3 sm:col-span-2 xl:pt-3">
+          <DataTable />
+        </div>
+
+        <div class="pt-3 sm:col-span-2 xl:pt-3">
+          <ShareDocument />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>

apps/www/.vitepress/theme/components/LandingPage.vue

@@ -1,8 +1,5 @@
 <script setup lang="ts">
-import MailExample from '@/examples/mail/Example.vue'
+import Button from '@/lib/registry/new-york/ui/button/Button.vue'
-import { buttonVariants } from '@/lib/registry/new-york/ui/button'
-import { cn } from '@/lib/utils'
-import GitHubIcon from '~icons/radix-icons/github-logo'
 import Announcement from '../components/Announcement.vue'
 import ExamplesNav from '../components/ExamplesNav.vue'
 import PageAction from '../components/PageAction.vue'
@@ -11,38 +8,39 @@ import PageHeader from '../components/PageHeader.vue'
 import PageHeaderDescription from '../components/PageHeaderDescription.vue'
 
 import PageHeaderHeading from '../components/PageHeaderHeading.vue'
+import LandingExample from './LandingExample.vue'
 </script>
 
 <template>
-  <PageHeader class="page-header pb-8">
+  <div class="relative">
+    <PageHeader>
       <Announcement />
-    <PageHeaderHeading>Build your component library.</PageHeaderHeading>
+      <PageHeaderHeading>Build your component library</PageHeaderHeading>
       <PageHeaderDescription>
-      Beautifully designed components that you can copy and paste into your
+        Beautifully designed components that you can copy and paste into your apps. Made with Tailwind CSS. Open source.
-      apps. Accessible. Customizable. Open Source.
       </PageHeaderDescription>
 
       <PageAction>
-      <a
+        <Button as-child size="sm">
-        href="/docs/introduction"
+          <a href="/docs/introduction">
-        :class="cn(buttonVariants(), 'rounded-[6px]')"
-      >
             Get Started
           </a>
+        </Button>
+        <Button as-child size="sm" variant="ghost">
           <a
             href="https://github.com/unovue/shadcn-vue"
             target="_blank"
-        :class="cn(
+            rel="noreferrer"
-          buttonVariants({ variant: 'outline' }),
-          'rounded-[6px]',
-        )"
           >
-        <GitHubIcon class="mr-2 h-4 w-4" />
             GitHub
           </a>
+        </Button>
       </PageAction>
     </PageHeader>
-  <ExamplesNav />
+
+    <div class="container py-6">
+      <ExamplesNav class="[&>a:first-child]:text-primary" />
+
       <section class="space-y-8 overflow-hidden rounded-lg border-2 border-primary dark:border-muted md:hidden">
         <VPImage
           alt="Mail"
@@ -54,8 +52,8 @@ import PageHeaderHeading from '../components/PageHeaderHeading.vue'
         />
       </section>
       <section class="hidden md:block">
-    <div class="overflow-hidden rounded-[0.5rem] border bg-background shadow">
+        <LandingExample />
-      <MailExample />
-    </div>
       </section>
+    </div>
+  </div>
 </template>

apps/www/.vitepress/theme/components/Logo.vue

@@ -16,7 +16,7 @@
     </svg>
 
     <span class="font-bold">
-      shadcn-vue
+      shadcn/vue
     </span>
   </a>
 </template>

apps/www/.vitepress/theme/components/PageAction.vue

@@ -5,7 +5,7 @@ import { cn } from '@/lib/utils'
 <template>
   <section
     :class="cn(
-      'flex w-full items-center justify-center space-x-4 py-4 md:pb-10',
+      'flex w-full items-center justify-start gap-2 py-2',
       $attrs.class ?? '',
     )"
   >

apps/www/.vitepress/theme/components/PageHeader.vue

@@ -7,10 +7,12 @@ import { cn } from '@/lib/utils'
 <template>
   <section
     :class="cn(
-      'mx-auto flex max-w-[980px] flex-col items-center gap-2 py-8 md:py-12 md:pb-8 lg:py-24 lg:pb-20',
+      'flex flex-col items-start gap-2 border-b border-border/40 py-8 dark:border-border md:py-10 lg:py-12',
       $attrs.class ?? '',
     )"
   >
+    <div class="container">
       <slot />
+    </div>
   </section>
 </template>

apps/www/.vitepress/theme/components/PageHeaderDescription.vue

@@ -1,10 +1,9 @@
 <script setup lang="ts">
 import { cn } from '@/lib/utils'
-import WrapBalancer from 'vue-wrap-balancer'
 </script>
 
 <template>
-  <WrapBalancer :class="cn('max-w-[750px] text-center text-lg font-light text-foreground', $attrs.class ?? '')" :prefer-native="false">
+  <p :class="cn('max-w-2xl text-lg font-light text-foreground', $attrs.class ?? '')">
     <slot />
-  </WrapBalancer>
+  </p>
 </template>

apps/www/.vitepress/theme/components/PageHeaderHeading.vue

@@ -5,7 +5,7 @@ import { cn } from '@/lib/utils'
 <template>
   <h1
     :class="cn(
-      'text-center text-3xl font-bold leading-tight tracking-tighter md:text-5xl lg:leading-[1.1]',
+      'text-3xl font-bold leading-tight tracking-tighter md:text-4xl lg:leading-[1.1]',
       $attrs.class ?? '',
     )"
   >

apps/www/.vitepress/theme/components/TableOfContent.vue

@@ -2,7 +2,6 @@
 import type { TableOfContents, TableOfContentsItem } from '../types/docs'
 import { buttonVariants } from '@/lib/registry/default/ui/button'
 import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/lib/registry/default/ui/collapsible'
-import { ScrollArea } from '@/lib/registry/default/ui/scroll-area'
 import { onContentUpdated } from 'vitepress'
 import { shallowRef } from 'vue'
 import CarbonAds from '../components/CarbonAds.vue'
@@ -61,16 +60,16 @@ onContentUpdated(() => {
 </script>
 
 <template>
-  <div class="hidden xl:block">
+  <div class="hidden text-sm xl:block">
-    <ScrollArea orientation="vertical" class="h-[calc(100vh-6.5rem)] z-30 md:block overflow-y-auto" type="hover">
+    <div class="sticky top-20 -mt-6 h-[calc(100vh-3.5rem)] pt-4">
-      <div class="space-y-2">
+      <div class="no-scrollbar h-full overflow-auto pb-10">
         <p class="font-medium">
           On This Page
         </p>
         <TableOfContentTree :tree="headers" :level="1" />
         <CarbonAds v-if="showCarbonAds" />
       </div>
-    </ScrollArea>
+    </div>
   </div>
 
   <div class="block xl:hidden mb-6">

apps/www/.vitepress/theme/components/ThemePopover.vue

@@ -33,7 +33,7 @@ watch(radius, (radius) => {
   <Popover>
     <PopoverTrigger as-child>
       <Button
-        class="w-9 h-9"
+        class="w-8 h-8"
         :variant="'ghost'"
         :size="'icon'"
       >

apps/www/.vitepress/theme/config/docs.ts

@@ -30,22 +30,13 @@ export const docsConfig: DocsConfig = {
       title: 'Components',
       href: '/docs/components/accordion',
     },
-    {
-      title: 'Themes',
-      href: '/themes',
-    },
-    {
-      title: 'Examples',
-      href: '/examples/mail',
-    },
     {
       title: 'Blocks',
       href: '/blocks',
     },
     {
-      title: 'GitHub',
+      title: 'Themes',
-      href: 'https://github.com/unovue/shadcn-vue',
+      href: '/themes',
-      external: true,
     },
   ],
   sidebarNav: [

apps/www/.vitepress/theme/layout/DocsLayout.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ScrollArea } from '@/lib/registry/default/ui/scroll-area'
+import { cn } from '@/lib/utils'
 import RadixIconsCode from '~icons/radix-icons/code'
 import RadixIconsExternalLink from '~icons/radix-icons/external-link'
 import { useData, useRoute } from 'vitepress'
@@ -15,17 +15,12 @@ const sourceLink = 'https://github.com/unovue/shadcn-vue/tree/dev/'
 </script>
 
 <template>
-  <div class="border-b">
   <div class="container flex-1 items-start md:grid md:grid-cols-[220px_minmax(0,1fr)] md:gap-6 lg:grid-cols-[240px_minmax(0,1fr)] lg:gap-10">
-      <aside
+    <aside class="fixed top-14 z-30 hidden h-[calc(100vh-3.5rem)] w-full shrink-0 border-r border-border/40 dark:border-border md:sticky md:block">
-        class="fixed top-14 z-30 -ml-2 hidden h-[calc(100vh-3.5rem)] w-full shrink-0 md:sticky md:block overflow-y-auto"
+      <div class="no-scrollbar h-full overflow-auto py-6 pr-6 lg:py-8">
-      >
+        <div v-for="docsGroup in docsConfig.sidebarNav" :key="docsGroup.title" class="grid grid-flow-row auto-rows-max gap-0.5 text-sm">
-        <ScrollArea orientation="vertical" class="relative overflow-hidden h-full py-6 pr-6 lg:py-8" :type="'auto'">
+          <div class="pb-4">
-          <div class="w-full">
+            <h4 class="mb-1 rounded-md px-2 py-1 text-sm font-semibold">
-            <div v-for="docsGroup in docsConfig.sidebarNav" :key="docsGroup.title" class="pb-4">
-              <h4
-                class="mb-1 rounded-md px-2 py-1 text-sm font-semibold"
-              >
               {{ docsGroup.title }}
 
               <span v-if="docsGroup.label" class="ml-2 font-normal rounded-md bg-[#adfa1d] px-1.5 py-0.5 text-xs leading-none text-[#000000] no-underline group-hover:no-underline">
@@ -36,16 +31,12 @@ const sourceLink = 'https://github.com/unovue/shadcn-vue/tree/dev/'
             <div
               v-for="doc in docsGroup.items "
               :key="doc.title"
-                class="grid grid-flow-row auto-rows-max text-sm"
             >
               <a
                 v-if="doc.href"
                 :disabled="doc.disabled"
                 :href="doc.href"
-                  class="group flex w-full items-center rounded-md border border-transparent px-2 py-1 hover:underline text-muted-foreground"
+                :class="cn('group flex w-full items-center px-2 py-1 font-normal text-foreground underline-offset-2 hover:underline', doc.disabled && 'cursor-not-allowed opacity-60', $route.path === `${doc.href}.html` && 'underline')"
-                  :class="{
-                    '!font-semibold !text-foreground': $route.path === `${doc.href}.html`,
-                  }"
               >
                 {{ doc.title }}
 
@@ -56,11 +47,11 @@ const sourceLink = 'https://github.com/unovue/shadcn-vue/tree/dev/'
             </div>
           </div>
         </div>
-        </ScrollArea>
+      </div>
     </aside>
 
     <main class="relative py-6 lg:gap-10 lg:py-8 xl:grid xl:grid-cols-[1fr_300px]">
-        <div class="mx-auto w-full min-w-0">
+      <div class="mx-auto w-full min-w-0 max-w-3xl">
         <div class="block xl:hidden">
           <TableOfContent />
         </div>
@@ -81,7 +72,7 @@ const sourceLink = 'https://github.com/unovue/shadcn-vue/tree/dev/'
           </p>
         </div>
 
-          <div class="flex items-center space-x-2 pt-4">
+        <div v-if="frontmatter.docs || frontmatter.source || frontmatter.primitive" class="flex items-center space-x-2 pt-4">
           <a v-if="frontmatter.docs" :href="frontmatter.docs" target="_blank" class="inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 select-none border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80">
             <RadixIconsExternalLink class="mr-1" />
             Docs
@@ -95,7 +86,7 @@ const sourceLink = 'https://github.com/unovue/shadcn-vue/tree/dev/'
           </a>
         </div>
 
-          <div class="vp-doc">
+        <div class="vp-doc py-8">
           <slot />
         </div>
 
@@ -109,5 +100,4 @@ const sourceLink = 'https://github.com/unovue/shadcn-vue/tree/dev/'
       </div>
     </main>
   </div>
-  </div>
 </template>

apps/www/.vitepress/theme/layout/ExamplesLayout.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
-import { buttonVariants } from '@/lib/registry/new-york/ui/button'
+import Button from '@/lib/registry/new-york/ui/button/Button.vue'
-import { cn } from '@/lib/utils'
 import Announcement from '../components/Announcement.vue'
 import ExamplesNav from '../components/ExamplesNav.vue'
 import PageAction from '../components/PageAction.vue'
@@ -11,43 +10,39 @@ import PageHeaderHeading from '../components/PageHeaderHeading.vue'
 </script>
 
 <template>
-  <div class="container relative">
+  <div class="relative">
-    <PageHeader class="page-header pb-8">
+    <PageHeader>
       <Announcement />
-      <PageHeaderHeading class="hidden md:block">
+      <PageHeaderHeading>Build your component library</PageHeaderHeading>
-        Check out some examples.
-      </PageHeaderHeading>
-      <PageHeaderHeading class="md:hidden">
-        Examples
-      </PageHeaderHeading>
       <PageHeaderDescription>
-        Dashboard, cards, authentication. Some examples built using the
+        Beautifully designed components that you can copy and paste into your apps. Made with Tailwind CSS. Open source.
-        components. Use this as a guide to build your own.
       </PageHeaderDescription>
 
       <PageAction>
-        <a
+        <Button as-child size="sm">
-          href="/docs/introduction"
+          <a href="/docs/introduction">
-          :class="cn(buttonVariants(), 'rounded-[6px]')"
-        >
             Get Started
           </a>
+        </Button>
+        <Button as-child size="sm" variant="ghost">
           <a
-          href="/docs/components/accordion"
+            href="https://github.com/unovue/shadcn-vue"
-          :class="cn(
+            target="_blank"
-            buttonVariants({ variant: 'outline' }),
+            rel="noreferrer"
-            'rounded-[6px]',
-          )"
           >
-          Components
+            GitHub
           </a>
+        </Button>
       </PageAction>
     </PageHeader>
+
+    <div class="container py-6">
       <section>
-      <ExamplesNav />
+        <ExamplesNav class="[&>a:first-child]:text-primary" />
         <div class="overflow-hidden rounded-[0.5rem] border bg-background shadow">
           <slot />
         </div>
       </section>
     </div>
+  </div>
 </template>

apps/www/.vitepress/theme/layout/MainLayout.vue

@@ -7,21 +7,22 @@ import { Toaster as NewYorkSonner } from '@/lib/registry/new-york/ui/sonner'
 import { Toaster as NewYorkToaster } from '@/lib/registry/new-york/ui/toast'
 import { TooltipProvider } from '@/lib/registry/new-york/ui/tooltip'
 
+import { cn } from '@/lib/utils'
 import { useConfigStore } from '@/stores/config'
 import { useMagicKeys, useToggle } from '@vueuse/core'
-import Circle from '~icons/radix-icons/circle'
 
+import MoonIcon from '~icons/lucide/moon'
+import SunIcon from '~icons/lucide/sun'
+import Circle from '~icons/radix-icons/circle'
 import File from '~icons/radix-icons/file'
-import RadixIconsGithubLogo from '~icons/radix-icons/github-logo'
+import GithubLogoIcon from '~icons/radix-icons/github-logo'
-import RadixIconsMoon from '~icons/radix-icons/moon'
-import RadixIconsSun from '~icons/radix-icons/sun'
 import { Content, useData, useRoute, useRouter } from 'vitepress'
 import { onMounted, ref, watch } from 'vue'
 import CodeConfigCustomizer from '../components/CodeConfigCustomizer.vue'
 import Kbd from '../components/Kbd.vue'
 import Logo from '../components/Logo.vue'
-import MobileNav from '../components/MobileNav.vue'
 
+import MobileNav from '../components/MobileNav.vue'
 import ThemePopover from '../components/ThemePopover.vue'
 import { docsConfig, type NavItem } from '../config/docs'
 
@@ -42,13 +43,8 @@ const links = [
   {
     name: 'GitHub',
     href: 'https://github.com/unovue/shadcn-vue',
-    icon: RadixIconsGithubLogo,
+    icon: GithubLogoIcon,
   },
-  // {
-  //   name: 'X',
-  //   href: 'https://x.com',
-  //   icon: TablerBrandX,
-  // },
 ]
 
 const isOpen = ref(false)
@@ -75,9 +71,7 @@ function handleSelectLink(item: NavItem) {
 }
 
 watch(() => $route.path, (n) => {
-  // @ts-expect-error View Transition API not supported by all the browser yet
   if (document.startViewTransition) {
-    // @ts-expect-error View Transition API not supported by all the browser yet
     document.startViewTransition(() => {
       console.log('soft navigating to: ', n)
     })
@@ -90,27 +84,19 @@ watch(() => $route.path, (n) => {
     <div v-if="$route.data.frontmatter.layout === false">
       <Content :key="$route.path" />
     </div>
-    <div v-else vaul-drawer-wrapper class="flex min-h-screen flex-col bg-background">
+    <div v-else vaul-drawer-wrapper class="mx-auto w-full border-border/40 dark:border-border min-[1800px]:max-w-[1536px] min-[1800px]:border-x">
-      <header class="sticky z-40 top-0 bg-background/80 backdrop-blur-lg border-b border-border">
+      <header class="sticky top-0 z-50 w-full border-b border-border/40 bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60 dark:border-border">
-        <div
+        <div class="flex h-14 items-center px-4">
-          class="container flex h-14 max-w-screen-2xl items-center"
-        >
           <div class="mr-4 md:mr-1 hidden md:flex">
             <Logo />
 
-            <nav
+            <nav class="flex items-center gap-4 text-sm xl:gap-6">
-              class="flex items-center max-lg:space-x-4 space-x-6 text-sm font-medium"
-            >
               <a
                 v-for="route in docsConfig.mainNav"
                 :key="route.title"
                 :href="route.href"
                 :target="route.external ? '_target' : undefined"
-                class="transition-colors hover:text-foreground/80 text-foreground/60"
+                :class="cn('transition-colors hover:text-foreground/80', $route.path === `${route.href}.html` ? 'text-foreground' : 'text-foreground/80')"
-                :class="{
-                  'font-semibold !text-foreground': $route.path === `${route.href}.html`,
-                  'hidden lg:block': route?.href?.includes('github'),
-                }"
               >
                 {{ route.title }}
               </a>
@@ -122,18 +108,18 @@ watch(() => $route.path, (n) => {
             <div class="w-full flex-1 md:w-auto md:flex-none">
               <Button
                 variant="outline"
-                class="relative h-8 w-full justify-start rounded-[0.5rem] bg-background text-sm font-normal text-muted-foreground shadow-none sm:pr-12 md:w-40 lg:w-64"
+                class="relative h-8 w-full justify-start rounded-[0.5rem] bg-muted/50 text-sm font-normal text-muted-foreground shadow-none sm:pr-12 md:w-40 lg:w-56 xl:w-64"
                 @click="isOpen = true"
               >
                 <span class="hidden lg:inline-flex">Search documentation...</span>
                 <span class="inline-flex lg:hidden">Search...</span>
-                <Kbd class="pointer-events-none absolute right-[0.3rem] top-[0.3rem] hidden h-5 select-none items-center gap-1 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium opacity-100 sm:flex">
+                <Kbd :size="'xs'" class="pointer-events-none absolute right-[0.3rem] top-[0.3rem] hidden h-5 select-none items-center gap-1 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium opacity-100 sm:flex">
-                  <span class="text-xs">⌘</span>K
+                  ⌘ K
                 </Kbd>
               </Button>
             </div>
 
-            <nav class="flex items-center">
+            <nav class="flex items-center gap-0.5">
               <ThemePopover />
 
               <CodeConfigCustomizer />
@@ -142,28 +128,26 @@ watch(() => $route.path, (n) => {
                 v-for="link in links"
                 :key="link.name"
                 as="a"
-                class="w-9 h-9"
+                class="w-8 h-8"
                 :href="link.href" target="_blank"
                 :variant="'ghost'"
                 :size="'icon'"
               >
-                <component :is="link.icon" class="w-5 h-5" />
+                <component :is="link.icon" class="w-4 h-4" />
               </Button>
 
-              <ClientOnly>
               <Button
-                  class="w-9 h-9"
+                class="w-8 h-8"
                 aria-label="Toggle dark mode"
                 :variant="'ghost'"
                 :size="'icon'"
                 @click="toggleDark()"
               >
                 <component
-                    :is="isDark ? RadixIconsSun : RadixIconsMoon"
+                  :is="isDark ? SunIcon : MoonIcon"
-                    class="w-5 h-5 text-foreground"
+                  class="w-4 h-4 text-foreground"
                 />
               </Button>
-              </ClientOnly>
             </nav>
           </div>
         </div>
@@ -184,7 +168,7 @@ watch(() => $route.path, (n) => {
           <component :is="frontmatter.layout" v-else-if="frontmatter.layout">
             <slot />
           </component>
-          <main v-else class="container">
+          <main v-else class="flex-1">
             <Transition name="fade" mode="out-in">
               <Content :key="$route.path" />
             </Transition>
@@ -192,42 +176,38 @@ watch(() => $route.path, (n) => {
         </Transition>
       </div>
 
-      <footer class="py-6 md:px-8 md:py-0">
+      <footer class="border-t border-border/40 py-6 dark:border-border md:px-8 md:py-0">
         <div class="container flex flex-col items-center justify-between gap-4 md:h-24 md:flex-row">
-          <div class="text-center text-sm leading-loose text-muted-foreground md:text-left">
+          <p class="text-balance text-center text-sm leading-loose text-muted-foreground md:text-left">
-            <span class="inline-block">
+            <span>
-              Built and designed by
+              Built by
               <a
                 href="https://twitter.com/shadcn"
                 target="_blank"
-                class="underline underline-offset-4 font-bold decoration-foreground"
+                class="font-medium underline underline-offset-4"
               >
-                shadcn
+                shadcn</a>.
-              </a>
             </span>
-            <span class="ml-0.5"> . </span>
+            <span class="inline-block ml-1">
-            <span class="inline-block ml-2">
               Ported to Vue by
               <a
-                href="https://github.com/unovue"
+                href="https://twitter.com/unovue"
                 target="_blank"
-                class="underline underline-offset-4 font-bold decoration-foreground"
+                class="font-medium underline underline-offset-4"
               >
-                Radix Vue
+                unovue
               </a>
-            </span>
+            </span>.
-            <span class="ml-0.5"> . </span>
+            <span class="inline-block ml-1">
-            <span class="inline-block ml-2">
               The code source is available on
               <a
                 href="https://github.com/unovue/shadcn-vue"
                 target="_blank"
-                class="underline underline-offset-4 font-bold decoration-foreground"
+                class="font-medium underline underline-offset-4"
               >
-                GitHub
+                GitHub</a>.
-              </a>
             </span>
-          </div>
+          </p>
         </div>
       </footer>
 
@@ -281,7 +261,7 @@ watch(() => $route.path, (n) => {
                     }
                   "
                 >
-                  <RadixIconsSun class="mr-2 h-5 w-5" />
+                  <SunIcon class="mr-2 h-5 w-5" />
                   <span>Light Theme</span>
                 </CommandItem>
                 <CommandItem
@@ -294,7 +274,7 @@ watch(() => $route.path, (n) => {
                     }
                   "
                 >
-                  <RadixIconsMoon class="mr-2 h-5 w-5" />
+                  <MoonIcon class="mr-2 h-5 w-5" />
                   <span>Dark Theme</span>
                 </CommandItem>
               </CommandGroup>

apps/www/.vitepress/theme/style.css

@@ -2,10 +2,19 @@
 @tailwind components;
 @tailwind utilities;
 
+@font-face {
+  font-family: "Geist";
+  src: url("/fonts/Geist[wght].ttf");
+}
+@font-face {
+  font-family: "GeistMono";
+  src: url("/fonts/GeistMono[wght].ttf");
+}
+
 @layer base {
 	:root {
-		--font-geist-sans: "geist-sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
+		--font-geist-sans: "Geist";
-			Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+		--font-geist-mono: "GeistMono";
 
 		--background: 0 0% 100%;
 		--foreground: 240 10% 3.9%;
@@ -88,12 +97,37 @@
 
   * {
     @apply border-border;
-    scrollbar-width: thin;
-    scrollbar-color: hsl(var(--border)) transparent;
   }
   html {
-		-webkit-text-size-adjust: 100%;
+    @apply scroll-smooth;
-		font-variation-settings: normal;
+  }
+  body {
+    @apply bg-background text-foreground overscroll-none;
+    /* font-feature-settings: "rlig" 1, "calt" 1; */
+    font-synthesis-weight: none;
+    text-rendering: optimizeLegibility;
+  }
+
+  @supports (font: -apple-system-body) and (-webkit-appearance: none) {
+    [data-wrapper] {
+      @apply min-[1800px]:border-t;
+    }
+  }
+
+  /* Custom scrollbar styling. Thanks @pranathiperii. */
+  ::-webkit-scrollbar {
+    width: 5px;
+  }
+  ::-webkit-scrollbar-track {
+    background: transparent;
+  }
+  ::-webkit-scrollbar-thumb {
+    background: hsl(var(--border));
+    border-radius: 5px;
+  }
+  * {
+    scrollbar-width: thin;
+    scrollbar-color: hsl(var(--border)) transparent;
   }
 	body {
 		@apply bg-background text-foreground min-h-screen antialiased font-sans;
@@ -119,16 +153,6 @@
 	}
 
 
-	/* Firefox */
-	/* https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-color#browser_compatibility */
-	html {
-		scrollbar-color: hsl(215.4 16.3% 46.9% / 0.3);
-	}
-
-	html.dark {
-		scrollbar-color: hsl(215.4 16.3% 56.9% / 0.3);
-	}
-
   html.dark .shiki,
   html.dark .shiki span {
     color: var(--shiki-dark);
@@ -153,9 +177,28 @@
 
   .step:before {
     @apply absolute w-9 h-9 bg-muted rounded-full font-mono font-medium text-center text-base inline-flex items-center justify-center -indent-px border-4 border-background;
-		@apply -ml-[50px] -mt-1;
+    @apply ml-[-50px] mt-[-4px];
     content: counter(step);
   }
+
+  .chunk-container {
+    @apply shadow-none;
+  }
+
+  .chunk-container::after {
+    content: "";
+    @apply absolute -inset-4 shadow-xl rounded-xl border;
+  }
+
+  /* Hide scrollbar for Chrome, Safari and Opera */
+  .no-scrollbar::-webkit-scrollbar {
+    display: none;
+  }
+  /* Hide scrollbar for IE, Edge and Firefox */
+  .no-scrollbar {
+    -ms-overflow-style: none; /* IE and Edge */
+    scrollbar-width: none; /* Firefox */
+  }
 }
 
 @media (max-width: 640px) {
@@ -184,7 +227,7 @@ pre code {
 }
 
 pre code .line {
-	@apply px-4 min-h-4 !py-0.5 w-full inline-block leading-[--vp-code-line-height];
+	@apply px-4 min-h-4 w-full inline-block leading-[--vp-code-line-height];
 }
 
 .line-number {

apps/www/.vitepress/theme/styles/vp-doc.css

@@ -328,18 +328,15 @@
   position: relative;
   z-index: 1;
   margin: 0;
-  /* padding: 20px 0; */
-  background: transparent;
   overflow-x: auto;
+  @apply bg-zinc-950 dark:bg-zinc-900;
 }
 
 .vp-doc [class*='language-'] code {
   display: block;
-  /* padding: 0 24px; */
   width: fit-content;
   min-width: 100%;
   line-height: var(--vp-code-line-height);
-  /* font-size: var(--vp-code-font-size); */
   color: var(--vp-code-block-color);
   transition: color 0.5s;
 }
@@ -350,7 +347,7 @@
   padding: 0 24px; */
   width: calc(100% + 2 * 24px);
   display: inline-block;
-  @apply bg-[hsl(var(--muted))] dark:bg-[hsl(var(--muted))]
+  @apply bg-zinc-700/50;
 }
 
 .vp-doc [class*='language-'] code .highlighted.error {
@@ -441,20 +438,20 @@
   /*rtl:ignore*/
   direction: ltr;
   position: absolute;
-  top: 12px;
+  top: 16px;
   /*rtl:ignore*/
-  right: 12px;
+  right: 16px;
   z-index: 3;
   border: 1px solid var(--vp-code-copy-code-border-color);
   border-radius: 4px;
-  width: 40px;
+  width: 30px;
-  height: 40px;
+  height: 30px;
   background-color: var(--vp-code-copy-code-bg);
-  opacity: 0;
+  /* opacity: 0; */
   cursor: pointer;
   background-image: var(--vp-icon-copy);
   background-position: 50%;
-  background-size: 20px;
+  background-size: 16px;
   background-repeat: no-repeat;
   transition:
     border-color 0.25s,
@@ -522,10 +519,6 @@
   @apply text-gray-600;
 }
 
-.vp-doc [class*='language-']:hover > button.copy + span.lang,
-.vp-doc [class*='language-'] > button.copy:focus + span.lang {
-  opacity: 0;
-}
 
 /**
  * Component: Team

apps/www/src/examples/cards/components/TeamMembers.vue

@@ -25,6 +25,7 @@ import { ref } from 'vue'
 
 const sofiaRole = ref('Owner')
 const jacksonRole = ref('Member')
+const isabellaRole = ref('Member')
 </script>
 
 <template>
@@ -152,6 +153,64 @@ const jacksonRole = ref('Member')
           </PopoverContent>
         </Popover>
       </div>
+      <div class="flex items-center justify-between space-x-4">
+        <div class="flex items-center space-x-4">
+          <Avatar>
+            <AvatarImage src="/avatars/03.png" />
+            <AvatarFallback>JL</AvatarFallback>
+          </Avatar>
+          <div>
+            <p class="text-sm font-medium leading-none">
+              Isabella Nguyen
+            </p>
+            <p class="text-sm text-muted-foreground">
+              i@example.com
+            </p>
+          </div>
+        </div>
+        <Popover>
+          <PopoverTrigger as-child>
+            <Button variant="outline" class="ml-auto">
+              {{ isabellaRole }}
+              <ChevronDownIcon class="ml-2 h-4 w-4 text-muted-foreground" />
+            </Button>
+          </PopoverTrigger>
+          <PopoverContent class="p-0" align="end">
+            <Command v-model="isabellaRole">
+              <CommandInput placeholder="Select new role..." />
+              <CommandList>
+                <CommandEmpty>No roles found.</CommandEmpty>
+                <CommandGroup>
+                  <CommandItem value="Viewer" class="space-y-1 flex flex-col items-start px-4 py-2">
+                    <p>Viewer</p>
+                    <p class="text-sm text-muted-foreground">
+                      Can view and comment.
+                    </p>
+                  </CommandItem>
+                  <CommandItem value="Developer" class="space-y-1 flex flex-col items-start px-4 py-2">
+                    <p>Developer</p>
+                    <p class="text-sm text-muted-foreground">
+                      Can view, comment and edit.
+                    </p>
+                  </CommandItem>
+                  <CommandItem value="Billing" class="space-y-1 flex flex-col items-start px-4 py-2">
+                    <p>Billing</p>
+                    <p class="text-sm text-muted-foreground">
+                      Can view, comment and manage billing.
+                    </p>
+                  </CommandItem>
+                  <CommandItem value="Owner" class="space-y-1 flex flex-col items-start px-4 py-2">
+                    <p>Owner</p>
+                    <p class="text-sm text-muted-foreground">
+                      Admin-level access to all resources.
+                    </p>
+                  </CommandItem>
+                </CommandGroup>
+              </CommandList>
+            </Command>
+          </PopoverContent>
+        </Popover>
+      </div>
     </CardContent>
   </Card>
 </template>

apps/www/src/examples/dashboard/components/TeamSwitcher.vue

@@ -92,7 +92,7 @@ const selectedTeam = ref<Team>(groups[0].teams[0])
         </Button>
       </PopoverTrigger>
       <PopoverContent class="w-[200px] p-0">
-        <Command :filter-function="(list, term) => list.filter(i => i.label?.toLowerCase()?.includes(term)) ">
+        <Command>
           <CommandList>
             <CommandInput placeholder="Search team..." />
             <CommandEmpty>No team found.</CommandEmpty>

apps/www/src/examples/tasks/components/DataTableFacetedFilter.vue

@@ -73,9 +73,7 @@ const selectedValues = computed(() => new Set(props.column?.getFilterValue() as
       </Button>
     </PopoverTrigger>
     <PopoverContent class="w-[200px] p-0" align="start">
-      <Command
+      <Command>
-        :filter-function="(list: DataTableFacetedFilter['options'], term) => list.filter(i => i.label.toLowerCase()?.includes(term)) "
-      >
         <CommandInput :placeholder="title" />
         <CommandList>
           <CommandEmpty>No results found.</CommandEmpty>

apps/www/src/lib/registry/default/example/CardChat.vue

@@ -141,10 +141,7 @@ const selectedUsers = ref<User[]>([])
           message.
         </DialogDescription>
       </DialogHeader>
-      <Command
+      <Command class="overflow-hidden rounded-t-none border-t">
-        class="overflow-hidden rounded-t-none border-t"
-        :filter-function="(list: User[], search) => list.filter(l => l.name.toLowerCase().includes(search.toLowerCase()))"
-      >
         <CommandInput placeholder="Search user..." />
         <CommandList>
           <CommandEmpty>No users found.</CommandEmpty>

apps/www/src/lib/registry/new-york/example/CardChat.vue

@@ -141,10 +141,7 @@ const selectedUsers = ref<User[]>([])
           message.
         </DialogDescription>
       </DialogHeader>
-      <Command
+      <Command class="overflow-hidden rounded-t-none border-t">
-        class="overflow-hidden rounded-t-none border-t"
-        :filter-function="(list: User[], search) => list.filter(l => l.name.toLowerCase().includes(search.toLowerCase()))"
-      >
         <CommandInput placeholder="Search user..." />
         <CommandList>
           <CommandEmpty>No users found.</CommandEmpty>

apps/www/src/lib/registry/new-york/example/CardStats.vue

@@ -60,14 +60,14 @@ const data = [
     </Card>
 
     <Card>
-      <CardHeader class="pb-2">
+      <CardHeader class="flex flex-row items-center justify-between space-y-0 pb-2">
-        <CardTitle class="text-lg">
+        <CardTitle class="text-sm font-normal">
           Subscriptions
         </CardTitle>
       </CardHeader>
       <CardContent>
         <div class="text-2xl font-bold">
-          +2,350
+          +2350
         </div>
         <p class="text-xs text-muted-foreground">
           +54.8% from last month

apps/www/src/public/fonts/Geist/LICENSE.TXT

@@ -1,92 +0,0 @@
-Geist Sans and Geist Mono Font
-(C) 2023 Vercel, made in collaboration with basement.studio
-
-This Font Software is licensed under the SIL Open Font License, Version 1.1.
-This license is available with a FAQ at: http://scripts.sil.org/OFL and copied below
-
------------------------------------------------------------
-SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
------------------------------------------------------------
-
-PREAMBLE
-The goals of the Open Font License (OFL) are to stimulate worldwide
-development of collaborative font projects, to support the font creation
-efforts of academic and linguistic communities, and to provide a free and
-open framework in which fonts may be shared and improved in partnership
-with others.
-
-The OFL allows the licensed fonts to be used, studied, modified and
-redistributed freely as long as they are not sold by themselves. The
-fonts, including any derivative works, can be bundled, embedded,
-redistributed and/or sold with any software provided that any reserved
-names are not used by derivative works. The fonts and derivatives,
-however, cannot be released under any other type of license. The
-requirement for fonts to remain under this license does not apply
-to any document created using the fonts or their derivatives.
-
-DEFINITIONS
-"Font Software" refers to the set of files released by the Copyright
-Holder(s) under this license and clearly marked as such. This may
-include source files, build scripts and documentation.
-
-"Reserved Font Name" refers to any names specified as such after the
-copyright statement(s).
-
-"Original Version" refers to the collection of Font Software components as
-distributed by the Copyright Holder(s).
-
-"Modified Version" refers to any derivative made by adding to, deleting,
-or substituting -- in part or in whole -- any of the components of the
-Original Version, by changing formats or by porting the Font Software to a
-new environment.
-
-"Author" refers to any designer, engineer, programmer, technical
-writer or other person who contributed to the Font Software.
-
-PERMISSION AND CONDITIONS
-Permission is hereby granted, free of charge, to any person obtaining
-a copy of the Font Software, to use, study, copy, merge, embed, modify,
-redistribute, and sell modified and unmodified copies of the Font
-Software, subject to the following conditions:
-
-1) Neither the Font Software nor any of its individual components,
-in Original or Modified Versions, may be sold by itself.
-
-2) Original or Modified Versions of the Font Software may be bundled,
-redistributed and/or sold with any software, provided that each copy
-contains the above copyright notice and this license. These can be
-included either as stand-alone text files, human-readable headers or
-in the appropriate machine-readable metadata fields within text or
-binary files as long as those fields can be easily viewed by the user.
-
-3) No Modified Version of the Font Software may use the Reserved Font
-Name(s) unless explicit written permission is granted by the corresponding
-Copyright Holder. This restriction only applies to the primary font name as
-presented to the users.
-
-4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
-Software shall not be used to promote, endorse or advertise any
-Modified Version, except to acknowledge the contribution(s) of the
-Copyright Holder(s) and the Author(s) or with their explicit written
-permission.
-
-5) The Font Software, modified or unmodified, in part or in whole,
-must be distributed entirely under this license, and must not be
-distributed under any other license. The requirement for fonts to
-remain under this license does not apply to any document created
-using the Font Software.
-
-TERMINATION
-This license becomes null and void if any of the above conditions are
-not met.
-
-DISCLAIMER
-THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
-EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
-MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
-OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
-COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
-INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
-DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
-FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
-OTHER DEALINGS IN THE FONT SOFTWARE.

apps/www/tailwind.config.js

@@ -1,22 +1,19 @@
-import defaultTheme from 'tailwindcss/defaultTheme'
+import { fontFamily } from 'tailwindcss/defaultTheme'
 import tailwindcssAnimate from 'tailwindcss-animate'
 
 /** @type {import('tailwindcss').Config} */
 export default {
-  darkMode: 'class',
+  darkMode: ['class'],
   content: ['./src/**/*.{vue,js,ts,jsx,tsx,md}', './.vitepress/**/*.{vue,js,ts,jsx,tsx}'],
   theme: {
     container: {
       center: true,
       padding: '2rem',
       screens: {
-        '2xl': '1400px',
+        '2xl': '1536px',
       },
     },
     extend: {
-      fontFamily: {
-        sans: ['var(--font-geist-sans)', ...defaultTheme.fontFamily.sans],
-      },
       colors: {
         border: 'hsl(var(--border))',
         input: 'hsl(var(--input))',
@@ -32,8 +29,8 @@ export default {
           foreground: 'hsl(var(--secondary-foreground))',
         },
         destructive: {
-          DEFAULT: 'hsl(var(--destructive))',
+          DEFAULT: 'hsl(var(--destructive) / <alpha-value>)',
-          foreground: 'hsl(var(--destructive-foreground))',
+          foreground: 'hsl(var(--destructive-foreground) / <alpha-value>)',
         },
         muted: {
           DEFAULT: 'hsl(var(--muted))',
@@ -68,33 +65,28 @@ export default {
         md: 'calc(var(--radius) - 2px)',
         sm: 'calc(var(--radius) - 4px)',
       },
-      boxShadow: {
+      fontFamily: {
-        switch:
+        sans: ['var(--font-geist-sans)', ...fontFamily.sans],
-					'rgba(0, 0, 0, 0.3) 0px 0px 1px, rgba(0, 0, 0, 0.2) 0px 1px 2px',
+        mono: ['var(--font-geist-mono)', ...fontFamily.mono],
       },
       keyframes: {
         'accordion-down': {
-          from: { height: 0 },
+          from: { height: '0' },
           to: { height: 'var(--reka-accordion-content-height)' },
         },
         'accordion-up': {
           from: { height: 'var(--reka-accordion-content-height)' },
-          to: { height: 0 },
+          to: { height: '0' },
         },
-        'collapsible-down': {
+        'caret-blink': {
-          from: { height: 0 },
+          '0%,70%,100%': { opacity: '1' },
-          to: { height: 'var(--reka-collapsible-content-height)' },
+          '20%,50%': { opacity: '0' },
-        },
-        'collapsible-up': {
-          from: { height: 'var(--reka-collapsible-content-height)' },
-          to: { height: 0 },
         },
       },
       animation: {
-        'accordion-down': 'accordion-down 0.2s ease-in-out',
+        'accordion-down': 'accordion-down 0.2s ease-out',
-        'accordion-up': 'accordion-up 0.2s ease-in-out',
+        'accordion-up': 'accordion-up 0.2s ease-out',
-        'collapsible-down': 'collapsible-down 0.2s ease-in-out',
+        'caret-blink': 'caret-blink 1.25s ease-out infinite',
-        'collapsible-up': 'collapsible-up 0.2s ease-in-out',
       },
     },
   },