feat( www): minor updates (#5749)

* feat(www): update mode switcher

* feat(www): update layout

* feat(www): update theme-color handling

* fix(www): docs pages

apps/www/app/(app)/blocks/layout.tsx

@@ -21,7 +21,7 @@ export default function BlocksLayout({
   children: React.ReactNode
 }) {
   return (
-    <div className="container relative">
+    <div className="relative">
       <PageHeader>
         <Announcement />
         <PageHeaderHeading>Building Blocks for the Web</PageHeaderHeading>
@@ -42,9 +42,11 @@ export default function BlocksLayout({
           </Button>
         </PageActions>
       </PageHeader>
-      <section id="blocks" className="scroll-mt-24">
-        {children}
-      </section>
+      <div className="container py-6">
+        <section id="blocks" className="scroll-mt-24">
+          {children}
+        </section>
+      </div>
     </div>
   )
 }

apps/www/app/(app)/charts/layout.tsx

@@ -22,7 +22,7 @@ export default function ChartsLayout({
   children: React.ReactNode
 }) {
   return (
-    <div className="container relative">
+    <div className="relative">
       <PageHeader>
         <Announcement />
         <PageHeaderHeading>Beautiful Charts</PageHeaderHeading>
@@ -38,9 +38,11 @@ export default function ChartsLayout({
           </Button>
         </PageActions>
       </PageHeader>
-      <section id="charts" className="scroll-mt-20">
-        {children}
-      </section>
+      <div className="container py-6">
+        <section id="charts" className="scroll-mt-20">
+          {children}
+        </section>
+      </div>
     </div>
   )
 }

apps/www/app/(app)/colors/layout.tsx

@@ -21,7 +21,7 @@ export default function ColorsLayout({
   children: React.ReactNode
 }) {
   return (
-    <div className="container relative">
+    <div className="relative">
       <PageHeader>
         <Announcement />
         <PageHeaderHeading>Tailwind Colors</PageHeaderHeading>
@@ -37,9 +37,11 @@ export default function ColorsLayout({
           </Button>
         </PageActions>
       </PageHeader>
-      <section id="colors" className="scroll-mt-20">
-        {children}
-      </section>
+      <div className="container py-6">
+        <section id="colors" className="scroll-mt-20">
+          {children}
+        </section>
+      </div>
     </div>
   )
 }

apps/www/app/(app)/docs/[[...slug]]/page.tsx

@@ -138,10 +138,10 @@ export default async function DocPage({ params }: DocPageProps) {
       </div>
       <div className="hidden text-sm xl:block">
         <div className="sticky top-20 -mt-6 h-[calc(100vh-3.5rem)] pt-4">
-          <ScrollArea className="h-full pb-10">
+          <div className="no-scrollbar h-full overflow-auto pb-10">
             {doc.toc && <DashboardTableOfContents toc={toc} />}
             <OpenInV0Cta className="mt-6 max-w-[80%]" />
-          </ScrollArea>
+          </div>
         </div>
       </div>
     </main>

apps/www/app/(app)/docs/layout.tsx

@@ -8,15 +8,13 @@ interface DocsLayoutProps {
 
 export default function DocsLayout({ children }: DocsLayoutProps) {
   return (
-    <div className="border-b border-border/40 dark:border-border">
-      <div className="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 className="fixed top-14 z-30 -ml-2 hidden h-[calc(100vh-3.5rem)] w-full shrink-0 md:sticky md:block">
-          <ScrollArea className="h-full py-6 pr-6 lg:py-8">
-            <DocsSidebarNav config={docsConfig} />
-          </ScrollArea>
-        </aside>
-        {children}
-      </div>
+    <div className="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 className="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">
+        <div className="no-scrollbar h-full overflow-auto py-6 pr-6 lg:py-8">
+          <DocsSidebarNav config={docsConfig} />
+        </div>
+      </aside>
+      {children}
     </div>
   )
 }

apps/www/app/(app)/examples/layout.tsx

@@ -1,7 +1,6 @@
 import { Metadata } from "next"
 import Link from "next/link"
 
-import { cn } from "@/lib/utils"
 import { Announcement } from "@/components/announcement"
 import { ExamplesNav } from "@/components/examples-nav"
 import {
@@ -10,7 +9,7 @@ import {
   PageHeaderDescription,
   PageHeaderHeading,
 } from "@/components/page-header"
-import { Button, buttonVariants } from "@/registry/new-york/ui/button"
+import { Button } from "@/registry/new-york/ui/button"
 
 export const metadata: Metadata = {
   title: "Examples",
@@ -23,7 +22,7 @@ interface ExamplesLayoutProps {
 
 export default function ExamplesLayout({ children }: ExamplesLayoutProps) {
   return (
-    <div className="container relative">
+    <div className="relative">
       <PageHeader>
         <Announcement />
         <PageHeaderHeading className="hidden md:block">
@@ -43,12 +42,14 @@ export default function ExamplesLayout({ children }: ExamplesLayoutProps) {
           </Button>
         </PageActions>
       </PageHeader>
-      <section>
-        <ExamplesNav />
-        <div className="overflow-hidden rounded-[0.5rem] border bg-background shadow">
-          {children}
-        </div>
-      </section>
+      <div className="container py-6">
+        <section>
+          <ExamplesNav />
+          <div className="overflow-hidden rounded-[0.5rem] border bg-background shadow">
+            {children}
+          </div>
+        </section>
+      </div>
     </div>
   )
 }

apps/www/app/(app)/layout.tsx

@@ -7,10 +7,12 @@ interface AppLayoutProps {
 
 export default function AppLayout({ children }: AppLayoutProps) {
   return (
-    <div className="mx-auto w-full border-border/40 dark:border-border min-[1800px]:max-w-[1536px] min-[1800px]:border-x">
-      <SiteHeader />
-      <main className="flex-1">{children}</main>
-      <SiteFooter />
+    <div data-wrapper="" className="border-border/40 dark:border-border">
+      <div className="mx-auto w-full border-border/40 dark:border-border min-[1800px]:max-w-[1536px] min-[1800px]:border-x">
+        <SiteHeader />
+        <main className="flex-1">{children}</main>
+        <SiteFooter />
+      </div>
     </div>
   )
 }

apps/www/app/(app)/page.tsx

@@ -15,7 +15,7 @@ import { Button } from "@/registry/new-york/ui/button"
 
 export default function IndexPage() {
   return (
-    <div className="container relative">
+    <div className="relative">
       <PageHeader>
         <Announcement />
         <PageHeaderHeading>Build your component library</PageHeaderHeading>
@@ -38,26 +38,28 @@ export default function IndexPage() {
           </Button>
         </PageActions>
       </PageHeader>
-      <ExamplesNav className="[&>a:first-child]:text-primary" />
-      <section className="overflow-hidden rounded-lg border bg-background shadow-md md:hidden md:shadow-xl">
-        <Image
-          src="/examples/cards-light.png"
-          width={1280}
-          height={1214}
-          alt="Cards"
-          className="block dark:hidden"
-        />
-        <Image
-          src="/examples/cards-dark.png"
-          width={1280}
-          height={1214}
-          alt="Cards"
-          className="hidden dark:block"
-        />
-      </section>
-      <section className="hidden md:block [&>div]:p-0">
-        <CardsNewYork />
-      </section>
+      <div className="container py-6">
+        <ExamplesNav className="[&>a:first-child]:text-primary" />
+        <section className="overflow-hidden rounded-lg border bg-background shadow-md md:hidden md:shadow-xl">
+          <Image
+            src="/examples/cards-light.png"
+            width={1280}
+            height={1214}
+            alt="Cards"
+            className="block dark:hidden"
+          />
+          <Image
+            src="/examples/cards-dark.png"
+            width={1280}
+            height={1214}
+            alt="Cards"
+            className="hidden dark:block"
+          />
+        </section>
+        <section className="hidden md:block [&>div]:p-0">
+          <CardsNewYork />
+        </section>
+      </div>
     </div>
   )
 }

apps/www/app/(app)/themes/layout.tsx

@@ -0,0 +1,52 @@
+import { Metadata } from "next"
+
+import { Announcement } from "@/components/announcement"
+import {
+  PageActions,
+  PageHeader,
+  PageHeaderDescription,
+  PageHeaderHeading,
+} from "@/components/page-header"
+import { ThemeCustomizer } from "@/components/theme-customizer"
+import { ThemeWrapper } from "@/components/theme-wrapper"
+
+export const metadata: Metadata = {
+  title: "Themes",
+  description: "Hand-picked themes that you can copy and paste into your apps.",
+}
+
+export default function ThemesLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return (
+    <div className="relative">
+      <ThemeWrapper
+        defaultTheme="zinc"
+        className="relative flex w-full flex-col items-start md:flex-row"
+      >
+        <PageHeader>
+          <Announcement />
+          <PageHeaderHeading className="hidden md:block">
+            Add colors. Make it yours.
+          </PageHeaderHeading>
+          <PageHeaderHeading className="md:hidden">
+            Make it yours
+          </PageHeaderHeading>
+          <PageHeaderDescription>
+            Hand-picked themes that you can copy and paste into your apps.
+          </PageHeaderDescription>
+          <PageActions>
+            <ThemeCustomizer />
+          </PageActions>
+        </PageHeader>
+      </ThemeWrapper>
+      <div className="container py-6">
+        <section id="themes" className="scroll-mt-20">
+          {children}
+        </section>
+      </div>
+    </div>
+  )
+}

apps/www/app/(app)/themes/page.tsx

@@ -1,46 +1,7 @@
-import { Metadata } from "next"
-
-import "public/registry/themes.css"
-import { Announcement } from "@/components/announcement"
-import {
-  PageActions,
-  PageHeader,
-  PageHeaderDescription,
-  PageHeaderHeading,
-} from "@/components/page-header"
-import { ThemeCustomizer } from "@/components/theme-customizer"
-import { ThemeWrapper } from "@/components/theme-wrapper"
 import { ThemesTabs } from "@/app/(app)/themes/tabs"
 
-export const metadata: Metadata = {
-  title: "Themes",
-  description: "Hand-picked themes that you can copy and paste into your apps.",
-}
+import "public/registry/themes.css"
 
 export default function ThemesPage() {
-  return (
-    <div className="container">
-      <ThemeWrapper
-        defaultTheme="zinc"
-        className="relative flex w-full flex-col items-start md:flex-row"
-      >
-        <PageHeader className="w-full">
-          <Announcement />
-          <PageHeaderHeading className="hidden md:block">
-            Add colors. Make it yours.
-          </PageHeaderHeading>
-          <PageHeaderHeading className="md:hidden">
-            Make it yours
-          </PageHeaderHeading>
-          <PageHeaderDescription>
-            Hand-picked themes that you can copy and paste into your apps.
-          </PageHeaderDescription>
-          <PageActions>
-            <ThemeCustomizer />
-          </PageActions>
-        </PageHeader>
-      </ThemeWrapper>
-      <ThemesTabs />
-    </div>
-  )
+  return <ThemesTabs />
 }

apps/www/app/(app)/themes/tabs.tsx

@@ -1,73 +1,14 @@
-"use client"
-
 import * as React from "react"
 
-import { useConfig } from "@/hooks/use-config"
 import { ThemeWrapper } from "@/components/theme-wrapper"
-import CardsDefault from "@/registry/default/example/cards"
-import { Skeleton } from "@/registry/default/ui/skeleton"
 import CardsNewYork from "@/registry/new-york/example/cards"
 
 export function ThemesTabs() {
-  const [mounted, setMounted] = React.useState(false)
-  const [config] = useConfig()
-
-  React.useEffect(() => {
-    setMounted(true)
-  }, [])
-
   return (
     <div className="space-y-8">
-      {!mounted ? (
-        <div className="md:grids-col-2 grid md:gap-4 lg:grid-cols-10 xl:gap-6">
-          <div className="space-y-4 lg:col-span-4 xl:col-span-6 xl:space-y-6">
-            <Skeleton className="h-[218px] w-full" />
-            <div className="grid gap-1 sm:grid-cols-[260px_1fr] md:hidden">
-              <Skeleton className="h-[218px] w-full" />
-              <div className="pt-3 sm:pl-2 sm:pt-0 xl:pl-4">
-                <Skeleton className="h-[218px] w-full" />
-              </div>
-              <div className="pt-3 sm:col-span-2 xl:pt-4">
-                <Skeleton className="h-[218px] w-full" />
-              </div>
-            </div>
-            <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-1 xl:grid-cols-2">
-              <div className="space-y-4 xl:space-y-6">
-                <Skeleton className="h-[218px] w-full" />
-                <Skeleton className="h-[218px] w-full" />
-                <Skeleton className="h-[218px] w-full" />
-              </div>
-              <div className="space-y-4 xl:space-y-6">
-                <Skeleton className="h-[218px] w-full" />
-                <Skeleton className="h-[218px] w-full" />
-                <div className="hidden xl:block">
-                  <Skeleton className="h-[218px] w-full" />
-                </div>
-              </div>
-            </div>
-          </div>
-          <div className="space-y-4 lg:col-span-6 xl:col-span-4 xl:space-y-6">
-            <div className="hidden gap-1 sm:grid-cols-[260px_1fr] md:grid">
-              <Skeleton className="h-[218px] w-full" />
-              <div className="pt-3 sm:pl-2 sm:pt-0 xl:pl-4">
-                <Skeleton className="h-[218px] w-full" />
-              </div>
-              <div className="pt-3 sm:col-span-2 xl:pt-4">
-                <Skeleton className="h-[218px] w-full" />
-              </div>
-            </div>
-            <div className="hidden md:block">
-              <Skeleton className="h-[218px] w-full" />
-            </div>
-            <Skeleton className="h-[218px] w-full" />
-          </div>
-        </div>
-      ) : (
-        <ThemeWrapper>
-          {config.style === "new-york" && <CardsNewYork />}
-          {config.style === "default" && <CardsDefault />}
-        </ThemeWrapper>
-      )}
+      <ThemeWrapper>
+        <CardsNewYork />
+      </ThemeWrapper>
     </div>
   )
 }

apps/www/app/layout.tsx

@@ -1,7 +1,7 @@
 import "@/styles/globals.css"
 import { Metadata, Viewport } from "next"
 
-import { siteConfig } from "@/config/site"
+import { META_THEME_COLORS, siteConfig } from "@/config/site"
 import { fontSans } from "@/lib/fonts"
 import { cn } from "@/lib/utils"
 import { Analytics } from "@/components/analytics"
@@ -65,10 +65,7 @@ export const metadata: Metadata = {
 }
 
 export const viewport: Viewport = {
-  themeColor: [
-    { media: "(prefers-color-scheme: light)", color: "white" },
-    { media: "(prefers-color-scheme: dark)", color: "black" },
-  ],
+  themeColor: META_THEME_COLORS.light,
 }
 
 interface RootLayoutProps {
@@ -79,7 +76,19 @@ export default function RootLayout({ children }: RootLayoutProps) {
   return (
     <>
       <html lang="en" suppressHydrationWarning>
-        <head />
+        <head>
+          <script
+            dangerouslySetInnerHTML={{
+              __html: `
+              try {
+                if (localStorage.theme === 'dark' || ((!('theme' in localStorage) || localStorage.theme === 'system') && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
+                  document.querySelector('meta[name="theme-color"]').setAttribute('content', '${META_THEME_COLORS.dark}')
+                }
+              } catch (_) {}
+            `,
+            }}
+          />
+        </head>
         <body
           className={cn(
             "min-h-screen bg-background font-sans antialiased",
@@ -91,6 +100,7 @@ export default function RootLayout({ children }: RootLayoutProps) {
             defaultTheme="system"
             enableSystem
             disableTransitionOnChange
+            enableColorScheme
           >
             <div vaul-drawer-wrapper="">
               <div className="relative flex min-h-screen flex-col bg-background">

apps/www/components/announcement.tsx

@@ -1,16 +1,12 @@
 import Link from "next/link"
-import { ArrowRight, PanelLeft } from "lucide-react"
-
-import { Separator } from "@/registry/new-york/ui/separator"
+import { ArrowRight } from "lucide-react"
 
 export function Announcement() {
   return (
     <Link
       href="/docs/components/sidebar"
-      className="group inline-flex items-center px-0.5 text-sm font-medium"
+      className="group mb-2 inline-flex items-center px-0.5 text-sm font-medium"
     >
-      <PanelLeft className="h-4 w-4" />{" "}
-      <Separator className="mx-2 h-4" orientation="vertical" />{" "}
       <span className="underline-offset-4 group-hover:underline">
         New sidebar component
       </span>

apps/www/components/mobile-nav.tsx

@@ -3,22 +3,32 @@
 import * as React from "react"
 import Link, { LinkProps } from "next/link"
 import { useRouter } from "next/navigation"
-import { MenuIcon } from "lucide-react"
 
 import { docsConfig } from "@/config/docs"
-import { siteConfig } from "@/config/site"
 import { cn } from "@/lib/utils"
-import { Icons } from "@/components/icons"
+import { useMetaColor } from "@/hooks/use-meta-color"
 import { Button } from "@/registry/new-york/ui/button"
-import { ScrollArea } from "@/registry/new-york/ui/scroll-area"
-import { Sheet, SheetContent, SheetTrigger } from "@/registry/new-york/ui/sheet"
+import {
+  Drawer,
+  DrawerContent,
+  DrawerTrigger,
+} from "@/registry/new-york/ui/drawer"
 
 export function MobileNav() {
   const [open, setOpen] = React.useState(false)
+  const { setMetaColor, metaColor } = useMetaColor()
+
+  const onOpenChange = React.useCallback(
+    (open: boolean) => {
+      setOpen(open)
+      setMetaColor(open ? "#09090b" : metaColor)
+    },
+    [setMetaColor, metaColor]
+  )
 
   return (
-    <Sheet open={open} onOpenChange={setOpen}>
-      <SheetTrigger asChild>
+    <Drawer open={open} onOpenChange={onOpenChange}>
+      <DrawerTrigger asChild>
         <Button
           variant="ghost"
           className="-ml-2 mr-2 h-8 w-8 px-0 text-base hover:bg-transparent focus-visible:bg-transparent focus-visible:ring-0 focus-visible:ring-offset-0 md:hidden"
@@ -29,7 +39,7 @@ export function MobileNav() {
             viewBox="0 0 24 24"
             strokeWidth="1.5"
             stroke="currentColor"
-            className="size-6"
+            className="!size-6"
           >
             <path
               strokeLinecap="round"
@@ -39,17 +49,9 @@ export function MobileNav() {
           </svg>
           <span className="sr-only">Toggle Menu</span>
         </Button>
-      </SheetTrigger>
-      <SheetContent side="left" className="pr-0">
-        <MobileLink
-          href="/"
-          className="flex items-center"
-          onOpenChange={setOpen}
-        >
-          <Icons.logo className="mr-2 h-4 w-4" />
-          <span className="font-bold">{siteConfig.name}</span>
-        </MobileLink>
-        <ScrollArea className="my-4 h-[calc(100vh-8rem)] pb-10 pl-6">
+      </DrawerTrigger>
+      <DrawerContent className="max-h-[60svh] p-0">
+        <div className="overflow-auto p-6">
           <div className="flex flex-col space-y-3">
             {docsConfig.mainNav?.map(
               (item) =>
@@ -93,9 +95,9 @@ export function MobileNav() {
               </div>
             ))}
           </div>
-        </ScrollArea>
-      </SheetContent>
-    </Sheet>
+        </div>
+      </DrawerContent>
+    </Drawer>
   )
 }
 
@@ -120,7 +122,7 @@ function MobileLink({
         router.push(href.toString())
         onOpenChange?.(false)
       }}
-      className={cn(className)}
+      className={cn("text-base", className)}
       {...props}
     >
       {children}

apps/www/components/mode-switcher.tsx

@@ -0,0 +1,35 @@
+"use client"
+
+import * as React from "react"
+import { MoonIcon, SunIcon } from "lucide-react"
+import { useTheme } from "next-themes"
+
+import { META_THEME_COLORS } from "@/config/site"
+import { useMetaColor } from "@/hooks/use-meta-color"
+import { Button } from "@/registry/new-york/ui/button"
+
+export function ModeSwitcher() {
+  const { setTheme, resolvedTheme } = useTheme()
+  const { setMetaColor } = useMetaColor()
+
+  const toggleTheme = React.useCallback(() => {
+    setTheme(resolvedTheme === "dark" ? "light" : "dark")
+    setMetaColor(
+      resolvedTheme === "dark"
+        ? META_THEME_COLORS.light
+        : META_THEME_COLORS.dark
+    )
+  }, [resolvedTheme, setTheme, setMetaColor])
+
+  return (
+    <Button
+      variant="ghost"
+      className="group/toggle h-8 w-8 px-0"
+      onClick={toggleTheme}
+    >
+      <SunIcon className="hidden [html.dark_&]:block" />
+      <MoonIcon className="hidden [html.light_&]:block" />
+      <span className="sr-only">Toggle theme</span>
+    </Button>
+  )
+}

apps/www/components/page-header.tsx

@@ -8,12 +8,12 @@ function PageHeader({
   return (
     <section
       className={cn(
-        "mx-auto flex flex-col items-start gap-2 px-4 py-8 md:py-12 md:pb-8 lg:py-12 lg:pb-10",
+        "flex flex-col items-start gap-2 border-b border-border/40 py-8 dark:border-border md:py-10 lg:py-12",
         className
       )}
       {...props}
     >
-      {children}
+      <div className="container">{children}</div>
     </section>
   )
 }

apps/www/components/site-footer.tsx

@@ -2,7 +2,7 @@ import { siteConfig } from "@/config/site"
 
 export function SiteFooter() {
   return (
-    <footer className="py-6 md:px-8 md:py-0">
+    <footer className="border-t border-border/40 py-6 dark:border-border md:px-8 md:py-0">
       <div className="container flex flex-col items-center justify-between gap-4 md:h-24 md:flex-row">
         <p className="text-balance text-center text-sm leading-loose text-muted-foreground md:text-left">
           Built by{" "}

apps/www/components/site-header.tsx

@@ -1,60 +1,35 @@
 import Link from "next/link"
 
 import { siteConfig } from "@/config/site"
-import { cn } from "@/lib/utils"
 import { CommandMenu } from "@/components/command-menu"
 import { Icons } from "@/components/icons"
 import { MainNav } from "@/components/main-nav"
 import { MobileNav } from "@/components/mobile-nav"
-import { ModeToggle } from "@/components/mode-toggle"
-import { buttonVariants } from "@/registry/new-york/ui/button"
+import { ModeSwitcher } from "@/components/mode-switcher"
+import { Button } from "@/registry/new-york/ui/button"
 
 export function SiteHeader() {
   return (
     <header className="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 className="container flex h-14 max-w-screen-2xl items-center">
+      <div className="flex h-14 items-center px-4">
         <MainNav />
         <MobileNav />
-        <div className="flex flex-1 items-center justify-between space-x-2 md:justify-end">
+        <div className="flex flex-1 items-center justify-between gap-2 md:justify-end">
           <div className="w-full flex-1 md:w-auto md:flex-none">
             <CommandMenu />
           </div>
-          <nav className="flex items-center">
-            <Link
-              href={siteConfig.links.github}
-              target="_blank"
-              rel="noreferrer"
-            >
-              <div
-                className={cn(
-                  buttonVariants({
-                    variant: "ghost",
-                  }),
-                  "h-8 w-8 px-0"
-                )}
+          <nav className="flex items-center gap-0.5">
+            <Button variant="ghost" size="icon" className="h-8 w-8 px-0">
+              <Link
+                href={siteConfig.links.github}
+                target="_blank"
+                rel="noreferrer"
               >
                 <Icons.gitHub className="h-4 w-4" />
                 <span className="sr-only">GitHub</span>
-              </div>
-            </Link>
-            <Link
-              href={siteConfig.links.twitter}
-              target="_blank"
-              rel="noreferrer"
-            >
-              <div
-                className={cn(
-                  buttonVariants({
-                    variant: "ghost",
-                  }),
-                  "h-8 w-8 px-0"
-                )}
-              >
-                <Icons.twitter className="h-3 w-3 fill-current" />
-                <span className="sr-only">Twitter</span>
-              </div>
-            </Link>
-            <ModeToggle />
+              </Link>
+            </Button>
+            <ModeSwitcher />
           </nav>
         </div>
       </div>

apps/www/components/theme-customizer.tsx

@@ -2,7 +2,7 @@
 
 import * as React from "react"
 import template from "lodash.template"
-import { Check, Copy, HelpCircle, Moon, Repeat, Sun } from "lucide-react"
+import { Check, Copy, Moon, Repeat, Sun } from "lucide-react"
 import { useTheme } from "next-themes"
 
 import { cn } from "@/lib/utils"
@@ -72,75 +72,6 @@ export function ThemeCustomizer() {
             <Customizer />
           </PopoverContent>
         </Popover>
-        <div className="ml-2 hidden items-center gap-0.5">
-          {mounted ? (
-            <>
-              {["zinc", "rose", "blue", "green", "orange"].map((color) => {
-                const baseColor = baseColors.find(
-                  (baseColor) => baseColor.name === color
-                )
-                const isActive = config.theme === color
-
-                if (!baseColor) {
-                  return null
-                }
-
-                return (
-                  <Tooltip key={baseColor.name}>
-                    <TooltipTrigger asChild>
-                      <button
-                        onClick={() =>
-                          setConfig({
-                            ...config,
-                            theme: baseColor.name,
-                          })
-                        }
-                        className={cn(
-                          "flex h-8 w-8 items-center justify-center rounded-full border-2 text-xs",
-                          isActive
-                            ? "border-[--theme-primary]"
-                            : "border-transparent"
-                        )}
-                        style={
-                          {
-                            "--theme-primary": `hsl(${
-                              baseColor?.activeColor[
-                                mode === "dark" ? "dark" : "light"
-                              ]
-                            })`,
-                          } as React.CSSProperties
-                        }
-                      >
-                        <span
-                          className={cn(
-                            "flex h-5 w-5 items-center justify-center rounded-full bg-[--theme-primary]"
-                          )}
-                        >
-                          {isActive && <Check className="h-4 w-4 text-white" />}
-                        </span>
-                        <span className="sr-only">{baseColor.label}</span>
-                      </button>
-                    </TooltipTrigger>
-                    <TooltipContent
-                      align="center"
-                      className="rounded-[0.5rem] bg-zinc-900 text-zinc-50"
-                    >
-                      {baseColor.label}
-                    </TooltipContent>
-                  </Tooltip>
-                )
-              })}
-            </>
-          ) : (
-            <div className="mr-1 flex items-center gap-4">
-              <Skeleton className="h-5 w-5 rounded-full" />
-              <Skeleton className="h-5 w-5 rounded-full" />
-              <Skeleton className="h-5 w-5 rounded-full" />
-              <Skeleton className="h-5 w-5 rounded-full" />
-              <Skeleton className="h-5 w-5 rounded-full" />
-            </div>
-          )}
-        </div>
       </div>
       <CopyCodeButton variant="ghost" size="sm" className="[&_svg]:hidden" />
     </div>
@@ -164,10 +95,10 @@ function Customizer() {
       <div className="flex items-start pt-4 md:pt-0">
         <div className="space-y-1 pr-2">
           <div className="font-semibold leading-none tracking-tight">
-            Customize
+            Theme Customizer
           </div>
           <div className="text-xs text-muted-foreground">
-            Pick a style and color for your components.
+            Customize your components colors.
           </div>
         </div>
         <Button
@@ -187,105 +118,53 @@ function Customizer() {
         </Button>
       </div>
       <div className="flex flex-1 flex-col space-y-4 md:space-y-6">
-        <div className="space-y-1.5">
-          <div className="flex w-full items-center">
-            <Label className="text-xs">Style</Label>
-            <Popover>
-              <PopoverTrigger>
-                <HelpCircle className="ml-1 h-3 w-3" />
-                <span className="sr-only">About styles</span>
-              </PopoverTrigger>
-              <PopoverContent
-                className="space-y-3 rounded-[0.5rem] text-sm"
-                side="right"
-                align="start"
-                alignOffset={-20}
-              >
-                <p className="font-medium">
-                  What is the difference between the New York and Default style?
-                </p>
-                <p>
-                  A style comes with its own set of components, animations,
-                  icons and more.
-                </p>
-                <p>
-                  The <span className="font-medium">Default</span> style has
-                  larger inputs, uses lucide-react for icons and
-                  tailwindcss-animate for animations.
-                </p>
-                <p>
-                  The <span className="font-medium">New York</span> style ships
-                  with smaller buttons and cards with shadows. It uses icons
-                  from Radix Icons.
-                </p>
-              </PopoverContent>
-            </Popover>
-          </div>
-          <div className="grid grid-cols-3 gap-2">
-            <Button
-              variant={"outline"}
-              size="sm"
-              onClick={() => setConfig({ ...config, style: "default" })}
-              className={cn(
-                config.style === "default" && "border-2 border-primary"
-              )}
-            >
-              Default
-            </Button>
-            <Button
-              variant={"outline"}
-              size="sm"
-              onClick={() => setConfig({ ...config, style: "new-york" })}
-              className={cn(
-                config.style === "new-york" && "border-2 border-primary"
-              )}
-            >
-              New York
-            </Button>
-          </div>
-        </div>
         <div className="space-y-1.5">
           <Label className="text-xs">Color</Label>
           <div className="grid grid-cols-3 gap-2">
-            {baseColors.map((theme) => {
-              const isActive = config.theme === theme.name
-
-              return mounted ? (
-                <Button
-                  variant={"outline"}
-                  size="sm"
-                  key={theme.name}
-                  onClick={() => {
-                    setConfig({
-                      ...config,
-                      theme: theme.name,
-                    })
-                  }}
-                  className={cn(
-                    "justify-start",
-                    isActive && "border-2 border-primary"
-                  )}
-                  style={
-                    {
-                      "--theme-primary": `hsl(${
-                        theme?.activeColor[mode === "dark" ? "dark" : "light"]
-                      })`,
-                    } as React.CSSProperties
-                  }
-                >
-                  <span
-                    className={cn(
-                      "mr-1 flex h-5 w-5 shrink-0 -translate-x-1 items-center justify-center rounded-full bg-[--theme-primary]"
-                    )}
-                  >
-                    {isActive && <Check className="h-4 w-4 text-white" />}
-                  </span>
-                  {theme.label}
-                </Button>
-              ) : (
-                <Skeleton className="h-8 w-full" key={theme.name} />
+            {baseColors
+              .filter(
+                (theme) =>
+                  !["slate", "stone", "gray", "neutral"].includes(theme.name)
               )
-            })}
+              .map((theme) => {
+                const isActive = config.theme === theme.name
+
+                return mounted ? (
+                  <Button
+                    variant={"outline"}
+                    size="sm"
+                    key={theme.name}
+                    onClick={() => {
+                      setConfig({
+                        ...config,
+                        theme: theme.name,
+                      })
+                    }}
+                    className={cn(
+                      "justify-start",
+                      isActive && "border-2 border-primary"
+                    )}
+                    style={
+                      {
+                        "--theme-primary": `hsl(${
+                          theme?.activeColor[mode === "dark" ? "dark" : "light"]
+                        })`,
+                      } as React.CSSProperties
+                    }
+                  >
+                    <span
+                      className={cn(
+                        "mr-1 flex h-5 w-5 shrink-0 -translate-x-1 items-center justify-center rounded-full bg-[--theme-primary]"
+                      )}
+                    >
+                      {isActive && <Check className="h-4 w-4 text-white" />}
+                    </span>
+                    {theme.label}
+                  </Button>
+                ) : (
+                  <Skeleton className="h-8 w-full" key={theme.name} />
+                )
+              })}
           </div>
         </div>
         <div className="space-y-1.5">

apps/www/config/docs.ts

@@ -8,6 +8,10 @@ export interface DocsConfig {
 
 export const docsConfig: DocsConfig = {
   mainNav: [
+    {
+      title: "Home",
+      href: "/",
+    },
     {
       title: "Documentation",
       href: "/docs",

apps/www/config/site.ts

@@ -11,3 +11,8 @@ export const siteConfig = {
 }
 
 export type SiteConfig = typeof siteConfig
+
+export const META_THEME_COLORS = {
+  light: "#ffffff",
+  dark: "#09090b",
+}

apps/www/hooks/use-meta-color.ts

@@ -0,0 +1,25 @@
+import * as React from "react"
+import { useTheme } from "next-themes"
+
+import { META_THEME_COLORS } from "@/config/site"
+
+export function useMetaColor() {
+  const { resolvedTheme } = useTheme()
+
+  const metaColor = React.useMemo(() => {
+    return resolvedTheme !== "dark"
+      ? META_THEME_COLORS.light
+      : META_THEME_COLORS.dark
+  }, [resolvedTheme])
+
+  const setMetaColor = React.useCallback((color: string) => {
+    document
+      .querySelector('meta[name="theme-color"]')
+      ?.setAttribute("content", color)
+  }, [])
+
+  return {
+    metaColor,
+    setMetaColor,
+  }
+}

apps/www/package.json

@@ -85,7 +85,7 @@
     "swr": "2.2.6-beta.3",
     "tailwind-merge": "^1.12.0",
     "ts-morph": "^22.0.0",
-    "vaul": "0.9.0",
+    "vaul": "1.1.1",
     "zod": "^3.21.4"
   },
   "devDependencies": {

apps/www/styles/globals.css

@@ -87,11 +87,17 @@
     @apply scroll-smooth;
   }
   body {
-    @apply bg-background text-foreground;
+    @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;
+    }
+  }
 }
 
 @layer utilities {
@@ -113,6 +119,16 @@
     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) {

pnpm-lock.yaml

@@ -307,8 +307,8 @@ importers:
         specifier: ^22.0.0
         version: 22.0.0
       vaul:
-        specifier: 0.9.0
-        version: 0.9.0(@types/react-dom@18.2.22)(@types/react@18.2.67)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+        specifier: 1.1.1
+        version: 1.1.1(@types/react-dom@18.2.22)(@types/react@18.2.67)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       zod:
         specifier: ^3.21.4
         version: 3.21.4
@@ -7036,11 +7036,11 @@ packages:
   validate-npm-package-name@3.0.0:
     resolution: {integrity: sha512-M6w37eVCMMouJ9V/sdPGnC5H4uDr73/+xdq0FBLO3TFFX1+7wiUY6Es328NN+y43tmY+doUdN9g9J21vqB7iLw==}
 
-  vaul@0.9.0:
-    resolution: {integrity: sha512-bZSySGbAHiTXmZychprnX/dE0EsSige88xtyyL3/MCRbrFotRPQZo7UdydGXZWw+CKbNOw5Ow8gwAo93/nB/Cg==}
+  vaul@1.1.1:
+    resolution: {integrity: sha512-+ejzF6ffQKPcfgS7uOrGn017g39F8SO4yLPXbBhpC7a0H+oPqPna8f1BUfXaz8eU4+pxbQcmjxW+jWBSbxjaFg==}
     peerDependencies:
-      react: ^16.8 || ^17.0 || ^18.0
-      react-dom: ^16.8 || ^17.0 || ^18.0
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0
 
   vfile-location@4.1.0:
     resolution: {integrity: sha512-YF23YMyASIIJXpktBa4vIGLJ5Gs88UB/XePgqPmTa7cDA+JeO3yclbpheQYCHjVHBn/yePzrXuygIL+xbvRYHw==}
@@ -7780,7 +7780,7 @@ snapshots:
       '@types/node': 20.5.1
       chalk: 4.1.2
       cosmiconfig: 8.3.6(typescript@5.5.3)
-      cosmiconfig-typescript-loader: 4.4.0(@types/node@20.5.1)(cosmiconfig@8.3.6(typescript@5.5.3))(ts-node@10.9.2(@types/node@20.5.1)(typescript@5.5.3))(typescript@5.5.3)
+      cosmiconfig-typescript-loader: 4.4.0(@types/node@20.5.1)(cosmiconfig@8.3.6(typescript@5.5.3))(ts-node@10.9.2(@types/node@20.11.27)(typescript@5.5.3))(typescript@5.5.3)
       lodash.isplainobject: 4.0.6
       lodash.merge: 4.6.2
       lodash.uniq: 4.5.0
@@ -10515,7 +10515,7 @@ snapshots:
 
   core-util-is@1.0.3: {}
 
-  cosmiconfig-typescript-loader@4.4.0(@types/node@20.5.1)(cosmiconfig@8.3.6(typescript@5.5.3))(ts-node@10.9.2(@types/node@20.5.1)(typescript@5.5.3))(typescript@5.5.3):
+  cosmiconfig-typescript-loader@4.4.0(@types/node@20.5.1)(cosmiconfig@8.3.6(typescript@5.5.3))(ts-node@10.9.2(@types/node@20.11.27)(typescript@5.5.3))(typescript@5.5.3):
     dependencies:
       '@types/node': 20.5.1
       cosmiconfig: 8.3.6(typescript@5.5.3)
@@ -15026,7 +15026,7 @@ snapshots:
     dependencies:
       builtins: 1.0.3
 
-  vaul@0.9.0(@types/react-dom@18.2.22)(@types/react@18.2.67)(react-dom@18.2.0(react@18.2.0))(react@18.2.0):
+  vaul@1.1.1(@types/react-dom@18.2.22)(@types/react@18.2.67)(react-dom@18.2.0(react@18.2.0))(react@18.2.0):
     dependencies:
       '@radix-ui/react-dialog': 1.1.1(@types/react-dom@18.2.22)(@types/react@18.2.67)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       react: 18.2.0