chore: add responsive design

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

@@ -9,6 +9,7 @@ import GitHubIcon from '~icons/radix-icons/github-logo'
 import { buttonVariants } from '@/lib/registry/default/ui/button'
 import { Separator } from '@/lib/registry/default/ui/separator'
 import { cn } from '@/lib/utils'
+
 import DashboardExample from '@/examples/dashboard/Example.vue'
 </script>
 
@@ -53,20 +54,14 @@ import DashboardExample from '@/examples/dashboard/Example.vue'
   </PageHeader>
   <ExamplesNav />
   <section class="space-y-8 overflow-hidden rounded-lg border-2 border-primary dark:border-muted md:hidden">
-    <!-- <Image
+    <VPImage
-          src="/examples/dashboard-light.png"
-          width={1280}
-          height={866}
       alt="Dashboard"
-          className="block dark:hidden"
+      width="1280"
+      height="866" class="block" :image="{
+        dark: '/examples/dashboard-dark.png',
+        light: 'examples/dashboard-light.png',
+      }"
     />
-        <Image
-          src="/examples/dashboard-dark.png"
-          width={1280}
-          height={866}
-          alt="Dashboard"
-          className="hidden dark:block"
-        /> -->
   </section>
   <section class="hidden md:block">
     <div class="overflow-hidden rounded-[0.5rem] border bg-background shadow">

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

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+</script>
+
+<template>
+  <a href="/" class="mr-6 flex items-center space-x-2">
+    <svg class="h-6 w-6" viewBox="0 0 256 256" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <g clip-path="url(#clip0_102_1338)">
+        <path d="M208 128L128 208" stroke="#41B883" stroke-width="16" stroke-linecap="round" stroke-linejoin="round" />
+        <path d="M192 40L40 192" stroke="#41B883" stroke-width="16" stroke-linecap="round" stroke-linejoin="round" />
+      </g>
+      <defs>
+        <clipPath id="clip0_102_1338">
+          <rect width="256" height="256" fill="white" />
+        </clipPath>
+      </defs>
+    </svg>
+
+    <span class="hidden font-bold sm:inline-block">
+      shadcn-vue
+    </span>
+  </a>
+</template>

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

@@ -0,0 +1,56 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { docsConfig } from '../config/docs'
+import Logo from './Logo.vue'
+import { Sheet, SheetContent, SheetTrigger } from '@/lib/registry/default/ui/sheet'
+import { Button } from '@/lib/registry/default/ui/button'
+import { ScrollArea } from '@/lib/registry/default/ui/scroll-area'
+import ViewVerticalIcon from '~icons/radix-icons/view-vertical'
+
+const open = ref(false)
+</script>
+
+<template>
+  <Sheet v-model:open="open">
+    <SheetTrigger as-child>
+      <Button
+        variant="ghost"
+        class="mr-2 px-0 text-base hover:bg-transparent focus-visible:bg-transparent focus-visible:ring-0 focus-visible:ring-offset-0 md:hidden"
+      >
+        <ViewVerticalIcon class="h-5 w-5" />
+        <span class="sr-only">Toggle Menu</span>
+      </Button>
+    </SheetTrigger>
+    <SheetContent side="left" class="pr-0">
+      <Logo @click="open = false" />
+      <ScrollArea class="my-4 h-[calc(100vh-8rem)] pb-10 pl-6">
+        <div class="flex flex-col space-y-3">
+          <a
+            v-for="item in docsConfig.mainNav"
+            :key="item.href"
+            :href="item.href"
+            @click="open = false"
+          >
+            {{ item.title }}
+          </a>
+        </div>
+        <div class="flex flex-col space-y-2">
+          <div v-for="(items, index) in docsConfig.sidebarNav" :key="index" class="flex flex-col space-y-3 pt-6">
+            <h4 class="font-medium">
+              {{ items.title }}
+            </h4>
+
+            <a
+              v-for="item in items.items" :key="item.href"
+              :href="item.href"
+              class="text-muted-foreground"
+              @click="open = false"
+            >
+              {{ item.title }}
+            </a>
+          </div>
+        </div>
+      </ScrollArea>
+    </SheetContent>
+  </Sheet>
+</template>

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

@@ -3,6 +3,8 @@ import { onContentUpdated } from 'vitepress'
 import { shallowRef } from 'vue'
 import type { TableOfContents, TableOfContentsItem } from '../types/docs'
 import TableOfContentTree from './TableOfContentTree.vue'
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/lib/registry/default/ui/collapsible'
+import { buttonVariants } from '@/lib/registry/default/ui/button'
 
 const headers = shallowRef<TableOfContents>()
 
@@ -50,10 +52,21 @@ onContentUpdated(() => {
 </script>
 
 <template>
-  <div class="space-y-2">
+  <div class="space-y-2 hidden xl:block">
     <p class="font-medium">
       On This Page
     </p>
     <TableOfContentTree :tree="headers" :level="1" />
   </div>
+
+  <div class="block xl:hidden mb-6">
+    <Collapsible>
+      <CollapsibleTrigger :class="buttonVariants({ variant: 'outline' })">
+        On This Page
+      </CollapsibleTrigger>
+      <CollapsibleContent class="text-sm mt-4 border-l pl-4">
+        <TableOfContentTree :tree="headers" :level="1" />
+      </CollapsibleContent>
+    </Collapsible>
+  </div>
 </template>

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

@@ -0,0 +1,46 @@
+<script setup lang="ts">
+import type { DefaultTheme } from 'vitepress/theme'
+import { withBase } from 'vitepress'
+
+defineOptions({ inheritAttrs: false })
+
+defineProps<{
+  image: DefaultTheme.ThemeableImage
+  alt?: string
+}>()
+</script>
+
+<template>
+  <template v-if="image">
+    <img
+      v-if="typeof image === 'string' || 'src' in image"
+      class="VPImage"
+      v-bind="typeof image === 'string' ? $attrs : { ...image, ...$attrs }"
+      :src="withBase(typeof image === 'string' ? image : image.src)"
+      :alt="alt ?? (typeof image === 'string' ? '' : image.alt || '')"
+    >
+    <template v-else>
+      <VPImage
+        class="dark"
+        :image="image.dark"
+        :alt="image.alt"
+        v-bind="$attrs"
+      />
+      <VPImage
+        class="light"
+        :image="image.light"
+        :alt="image.alt"
+        v-bind="$attrs"
+      />
+    </template>
+  </template>
+</template>
+
+<style scoped>
+html:not(.dark) .VPImage.dark {
+  display: none;
+}
+.dark .VPImage.light {
+  display: none;
+}
+</style>

apps/www/.vitepress/theme/components/index.ts

@@ -2,3 +2,4 @@ export { default as ComponentPreview } from './ComponentPreview.vue'
 export { default as Callout } from './Callout.vue'
 export { default as ManualInstall } from './ManualInstall.vue'
 export { default as Steps } from './Steps.vue'
+export { default as VPImage } from './VPImage.vue'

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

@@ -54,6 +54,10 @@ const { frontmatter } = useData()
 
       <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="block xl:hidden">
+            <TableOfContentVue />
+          </div>
+
           <div class="mb-4 flex items-center space-x-1 text-sm text-muted-foreground">
             <div class="overflow-hidden text-ellipsis whitespace-nowrap">
               Docs

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

@@ -2,13 +2,14 @@
 import { useDark, useToggle } from '@vueuse/core'
 import { Content, useData, useRoute } from 'vitepress'
 import { docsConfig } from '../config/docs'
+import Logo from '../components/Logo.vue'
+import MobileNav from '../components/MobileNav.vue'
 import { Button } from '@/lib/registry/default/ui/button'
 import { Kbd } from '@/lib/registry/default/ui/kbd'
 import RadixIconsGithubLogo from '~icons/radix-icons/github-logo'
 import TablerBrandX from '~icons/tabler/brand-x'
 import RadixIconsMoon from '~icons/radix-icons/moon'
 import RadixIconsSun from '~icons/radix-icons/sun'
-import LucidePanelRightOpen from '~icons/lucide/panel-right-open'
 import LucideSearch from '~icons/lucide/search'
 
 const { frontmatter } = useData()
@@ -36,27 +37,10 @@ const links = [
   <div class="flex min-h-screen flex-col bg-background">
     <header class="sticky z-40 top-0 bg-background/80 backdrop-blur-lg border-b border-border">
       <div
-        class="container flex h-[58px] items-center justify-between p-4 mx-auto"
+        class="container flex h-14 items-center"
       >
         <div class="mr-4 hidden md:flex">
-          <a href="/" class="mr-6 flex items-center space-x-2">
+          <Logo />
-            <svg class="h-6 w-6" viewBox="0 0 256 256" fill="none" xmlns="http://www.w3.org/2000/svg">
-              <g clip-path="url(#clip0_102_1338)">
-                <path d="M208 128L128 208" stroke="#41B883" stroke-width="16" stroke-linecap="round" stroke-linejoin="round" />
-                <path d="M192 40L40 192" stroke="#41B883" stroke-width="16" stroke-linecap="round" stroke-linejoin="round" />
-              </g>
-              <defs>
-                <clipPath id="clip0_102_1338">
-                  <rect width="256" height="256" fill="white" />
-                </clipPath>
-              </defs>
-            </svg>
-
-            <span class="hidden font-bold sm:inline-block">
-
-              shadcn-vue
-            </span>
-          </a>
 
           <nav
             class="flex items-center space-x-6 text-sm font-medium"
@@ -111,14 +95,9 @@ const links = [
               class="w-5 h-5 text-foreground"
             />
           </button>
-
-          <button class="flex md:hidden items-center justify-center">
-            <LucidePanelRightOpen class="w-5 h-5 text-foreground" />
-          </button>
         </div>
-        <button class="flex md:hidden items-center justify-center">
+
-          <LucidePanelRightOpen class="w-5 h-5 text-foreground" />
+        <MobileNav />
-        </button>
       </div>
     </header>
 

apps/www/src/content/docs/introduction.md

@@ -22,13 +22,11 @@ _Use this as a reference to build your own component libraries._
 ## FAQ
 
 
-<AccordionRoot multiple>
+<Accordion  type="multiple">
 
 <AccordionItem value="faq-1">
 <AccordionTrigger>
-
 Why not packaged as a dependency?
-
 </AccordionTrigger>
 <AccordionContent>
 
@@ -60,4 +58,4 @@ Yes. Free to use for personal and commercial projects. No attribution required.
 But let us know if you do use it. We'd love to see what you build with it.
 </AccordionContent>
 </AccordionItem>
-</AccordionRoot>
+</Accordion>

apps/www/src/examples/authentication/Example.vue

@@ -5,22 +5,17 @@ import { buttonVariants } from '@/lib/registry/default/ui/button'
 </script>
 
 <template>
-  <!-- <div class="md:hidden">
+  <div class="md:hidden">
-        <Image
+    <VPImage
-          src="/examples/authentication-light.png"
-          width={1280}
-          height={843}
       alt="Authentication"
-          class="block dark:hidden"
+      width="1280"
+      height="1214" class="block" :image="{
+        dark: '/examples/authentication-dark.png',
+        light: 'examples/authentication-light.png',
+      }"
     />
-        <Image
+  </div>
-          src="/examples/authentication-dark.png"
+
-          width={1280}
-          height={843}
-          alt="Authentication"
-          class="hidden dark:block"
-        />
-      </div> -->
   <div class="container relative hidden h-[800px] flex-col items-center justify-center md:grid lg:max-w-none lg:grid-cols-2 lg:px-0">
     <a
       href="/examples/authentication"

apps/www/src/examples/cards/Example.vue

@@ -12,22 +12,17 @@ import TeamMembers from './components/TeamMembers.vue'
 </script>
 
 <template>
-  <!-- <div class="md:hidden">
+  <div class="md:hidden">
-        <Image
+    <VPImage
-          src="/examples/cards-light.png"
-          width={1280}
-          height={1214}
       alt="Cards"
-          class="block dark:hidden"
+      width="1280"
+      height="1214" class="block" :image="{
+        dark: '/examples/cards-dark.png',
+        light: 'examples/cards-light.png',
+      }"
     />
-        <Image
+  </div>
-          src="/examples/cards-dark.png"
+
-          width={1280}
-          height={1214}
-          alt="Cards"
-          class="hidden dark:block"
-        />
-      </div> -->
   <div class="hidden items-start justify-center gap-6 rounded-lg p-8 md:grid lg:grid-cols-2 xl:grid-cols-3">
     <div class="col-span-2 grid items-start gap-6 lg:col-span-1">
       <Container>

apps/www/src/examples/dashboard/Example.vue

@@ -24,22 +24,17 @@ import {
 </script>
 
 <template>
-  <!-- <div class="md:hidden">
+  <div class="md:hidden">
-    <img
+    <VPImage
-      src="/examples/dashboard-light.png"
+      alt="Dashboard"
       width="1280"
-      height="866"
+      height="1214" class="block" :image="{
-      alt="Dashboard"
+        dark: '/examples/dashboard-dark.png',
-      class="block dark:hidden"
+        light: 'examples/dashboard-light.png',
-    >
+      }"
-    <img
+    />
-      src="/examples/dashboard-dark.png"
+  </div>
-      width="{1280}"
+
-      height="{866}"
-      alt="Dashboard"
-      class="hidden dark:block"
-    >
-  </div> -->
   <div class="hidden flex-col md:flex">
     <div class="border-b">
       <div class="flex h-16 items-center px-4">

apps/www/src/examples/music/Example.vue

@@ -19,22 +19,16 @@ import PlusCircledIcon from '~icons/radix-icons/plus-circled'
 </script>
 
 <template>
-  <!-- <div class="md:hidden">
+  <div class="md:hidden">
-        <Image
+    <VPImage
-          src="/examples/music-light.png"
-          width={1280}
-          height={1114}
       alt="Music"
-          class="block dark:hidden"
+      width="1280"
+      height="1214" class="block" :image="{
+        dark: '/examples/music-dark.png',
+        light: 'examples/music-light.png',
+      }"
     />
-        <Image
+  </div>
-          src="/examples/music-dark.png"
-          width={1280}
-          height={1114}
-          alt="Music"
-          class="hidden dark:block"
-        />
-      </div> -->
   <div class="hidden md:block">
     <Menu />
     <div class="border-t">

apps/www/src/examples/playground/Example.vue

@@ -29,21 +29,16 @@ import CounterClockwiseClockIcon from '~icons/radix-icons/counter-clockwise-cloc
 
 <template>
   <div class="md:hidden">
-    <Image
+    <VPImage
-      src="/examples/playground-light.png"
-      width="{1280}"
-      height="{916}"
       alt="Playground"
-      class="block dark:hidden"
+      width="1280"
-    />
+      height="1214" class="block" :image="{
-    <Image
+        dark: '/examples/playground-dark.png',
-      src="/examples/playground-dark.png"
+        light: 'examples/playground-light.png',
-      width="{1280}"
+      }"
-      height="{916}"
-      alt="Playground"
-      class="hidden dark:block"
     />
   </div>
+
   <div class="hidden h-full flex-col md:flex">
     <div class="container flex flex-col items-start justify-between space-y-2 py-4 sm:flex-row sm:items-center sm:space-y-0 md:h-16">
       <h2 class="text-lg font-semibold">

apps/www/src/examples/tasks/Example.vue

@@ -6,22 +6,17 @@ import { columns } from './components/columns'
 </script>
 
 <template>
-  <!-- <div className="md:hidden">
+  <div class="md:hidden">
-        <Image
+    <VPImage
-          src="/examples/tasks-light.png"
+      alt="Tasks"
-          width={1280}
+      width="1280"
-          height={998}
+      height="1214" class="block" :image="{
-          alt="Playground"
+        dark: '/examples/tasks-dark.png',
-          className="block dark:hidden"
+        light: 'examples/tasks-light.png',
+      }"
     />
-        <Image
+  </div>
-          src="/examples/tasks-dark.png"
+
-          width={1280}
-          height={998}
-          alt="Playground"
-          className="hidden dark:block"
-        />
-      </div> -->
   <div className="hidden h-full flex-1 flex-col space-y-8 p-8 md:flex">
     <div className="flex items-center justify-between space-y-2">
       <div>