diff --git a/apps/www/__registry__/default/block/charts-01.tsx b/apps/www/__registry__/default/block/charts-01.tsx
index 806272513b..716c65d126 100644
--- a/apps/www/__registry__/default/block/charts-01.tsx
+++ b/apps/www/__registry__/default/block/charts-01.tsx
@@ -44,7 +44,9 @@ export default function Charts() {
   return (
     <div className="chart-wrapper mx-auto flex max-w-6xl flex-col flex-wrap items-start justify-center gap-6 p-6 sm:flex-row sm:p-8">
       <div className="grid w-full gap-6 sm:grid-cols-2 lg:max-w-[22rem] lg:grid-cols-1 xl:max-w-[25rem]">
-        <Card className="lg:max-w-md" x-chunk="charts-01-chunk-0">
+        <Card
+          className="lg:max-w-md" x-chunk="charts-01-chunk-0"
+        >
           <CardHeader className="space-y-0 pb-2">
             <CardDescription>Today</CardDescription>
             <CardTitle className="text-4xl tabular-nums">
@@ -170,7 +172,9 @@ export default function Charts() {
             </CardDescription>
           </CardFooter>
         </Card>
-        <Card className="flex flex-col lg:max-w-md" x-chunk="charts-01-chunk-1">
+        <Card
+          className="flex flex-col lg:max-w-md" x-chunk="charts-01-chunk-1"
+        >
           <CardHeader className="flex flex-row items-center gap-4 space-y-0 pb-2 [&>div]:flex-1">
             <div>
               <CardDescription>Resting HR</CardDescription>
@@ -291,7 +295,9 @@ export default function Charts() {
         </Card>
       </div>
       <div className="grid w-full flex-1 gap-6 lg:max-w-[20rem]">
-        <Card className="max-w-xs" x-chunk="charts-01-chunk-2">
+        <Card
+          className="max-w-xs" x-chunk="charts-01-chunk-2"
+        >
           <CardHeader>
             <CardTitle>Progress</CardTitle>
             <CardDescription>
@@ -403,7 +409,9 @@ export default function Charts() {
             </div>
           </CardContent>
         </Card>
-        <Card className="max-w-xs" x-chunk="charts-01-chunk-3">
+        <Card
+          className="max-w-xs" x-chunk="charts-01-chunk-3"
+        >
           <CardHeader className="p-4 pb-0">
             <CardTitle>Walking Distance</CardTitle>
             <CardDescription>
@@ -485,7 +493,9 @@ export default function Charts() {
             </ChartContainer>
           </CardContent>
         </Card>
-        <Card className="max-w-xs" x-chunk="charts-01-chunk-4">
+        <Card
+          className="max-w-xs" x-chunk="charts-01-chunk-4"
+        >
           <CardContent className="flex gap-4 p-4 pb-2">
             <ChartContainer
               config={{
@@ -592,7 +602,9 @@ export default function Charts() {
         </Card>
       </div>
       <div className="grid w-full flex-1 gap-6">
-        <Card className="max-w-xs" x-chunk="charts-01-chunk-5">
+        <Card
+          className="max-w-xs" x-chunk="charts-01-chunk-5"
+        >
           <CardContent className="flex gap-4 p-4">
             <div className="grid items-center gap-2">
               <div className="grid flex-1 auto-rows-min gap-0.5">
@@ -680,7 +692,9 @@ export default function Charts() {
             </ChartContainer>
           </CardContent>
         </Card>
-        <Card className="max-w-xs" x-chunk="charts-01-chunk-6">
+        <Card
+          className="max-w-xs" x-chunk="charts-01-chunk-6"
+        >
           <CardHeader className="p-4 pb-0">
             <CardTitle>Active Energy</CardTitle>
             <CardDescription>
@@ -761,7 +775,9 @@ export default function Charts() {
             </ChartContainer>
           </CardContent>
         </Card>
-        <Card className="max-w-xs" x-chunk="charts-01-chunk-7">
+        <Card
+          className="max-w-xs" x-chunk="charts-01-chunk-7"
+        >
           <CardHeader className="space-y-0 pb-0">
             <CardDescription>Time in Bed</CardDescription>
             <CardTitle className="flex items-baseline gap-1 text-4xl tabular-nums">
diff --git a/apps/www/__registry__/default/block/dashboard-01.tsx b/apps/www/__registry__/default/block/dashboard-01.tsx
index 74bc72a8cd..f503c767f8 100644
--- a/apps/www/__registry__/default/block/dashboard-01.tsx
+++ b/apps/www/__registry__/default/block/dashboard-01.tsx
@@ -229,7 +229,9 @@ export default function Dashboard() {
           </Card>
         </div>
         <div className="grid gap-4 md:gap-8 lg:grid-cols-2 xl:grid-cols-3">
-          <Card className="xl:col-span-2" x-chunk="dashboard-01-chunk-4">
+          <Card
+            className="xl:col-span-2" x-chunk="dashboard-01-chunk-4"
+          >
             <CardHeader className="flex flex-row items-center">
               <div className="grid gap-2">
                 <CardTitle>Transactions</CardTitle>
diff --git a/apps/www/__registry__/default/block/dashboard-02.tsx b/apps/www/__registry__/default/block/dashboard-02.tsx
index 10e217352a..7da1285d98 100644
--- a/apps/www/__registry__/default/block/dashboard-02.tsx
+++ b/apps/www/__registry__/default/block/dashboard-02.tsx
@@ -227,8 +227,7 @@ export default function Dashboard() {
             <h1 className="text-lg font-semibold md:text-2xl">Inventory</h1>
           </div>
           <div
-            className="flex flex-1 items-center justify-center rounded-lg border border-dashed shadow-sm"
-            x-chunk="dashboard-02-chunk-1"
+            className="flex flex-1 items-center justify-center rounded-lg border border-dashed shadow-sm" x-chunk="dashboard-02-chunk-1"
           >
             <div className="flex flex-col items-center gap-1 text-center">
               <h3 className="text-2xl font-bold tracking-tight">
diff --git a/apps/www/__registry__/default/block/dashboard-03.tsx b/apps/www/__registry__/default/block/dashboard-03.tsx
index ea89e0e67a..bb71b92b2f 100644
--- a/apps/www/__registry__/default/block/dashboard-03.tsx
+++ b/apps/www/__registry__/default/block/dashboard-03.tsx
@@ -302,8 +302,7 @@ export default function Dashboard() {
         </header>
         <main className="grid flex-1 gap-4 overflow-auto p-4 md:grid-cols-2 lg:grid-cols-3">
           <div
-            className="relative hidden flex-col items-start gap-8 md:flex"
-            x-chunk="dashboard-03-chunk-0"
+            className="relative hidden flex-col items-start gap-8 md:flex" x-chunk="dashboard-03-chunk-0"
           >
             <form className="grid w-full items-start gap-6">
               <fieldset className="grid gap-6 rounded-lg border p-4">
@@ -420,8 +419,7 @@ export default function Dashboard() {
             </Badge>
             <div className="flex-1" />
             <form
-              className="relative overflow-hidden rounded-lg border bg-background focus-within:ring-1 focus-within:ring-ring"
-              x-chunk="dashboard-03-chunk-1"
+              className="relative overflow-hidden rounded-lg border bg-background focus-within:ring-1 focus-within:ring-ring" x-chunk="dashboard-03-chunk-1"
             >
               <Label htmlFor="message" className="sr-only">
                 Message
diff --git a/apps/www/__registry__/default/block/dashboard-04.tsx b/apps/www/__registry__/default/block/dashboard-04.tsx
index 991a45cc95..4beff40b9f 100644
--- a/apps/www/__registry__/default/block/dashboard-04.tsx
+++ b/apps/www/__registry__/default/block/dashboard-04.tsx
@@ -157,8 +157,7 @@ export default function Dashboard() {
         </div>
         <div className="mx-auto grid w-full max-w-6xl items-start gap-6 md:grid-cols-[180px_1fr] lg:grid-cols-[250px_1fr]">
           <nav
-            className="grid gap-4 text-sm text-muted-foreground"
-            x-chunk="dashboard-04-chunk-0"
+            className="grid gap-4 text-sm text-muted-foreground" x-chunk="dashboard-04-chunk-0"
           >
             <Link href="#" className="font-semibold text-primary">
               General
diff --git a/apps/www/__registry__/default/block/dashboard-05.tsx b/apps/www/__registry__/default/block/dashboard-05.tsx
index f94522d7f1..57f6d27ed1 100644
--- a/apps/www/__registry__/default/block/dashboard-05.tsx
+++ b/apps/www/__registry__/default/block/dashboard-05.tsx
@@ -283,7 +283,9 @@ export default function Dashboard() {
         <main className="grid flex-1 items-start gap-4 p-4 sm:px-6 sm:py-0 md:gap-8 lg:grid-cols-3 xl:grid-cols-3">
           <div className="grid auto-rows-max items-start gap-4 md:gap-8 lg:col-span-2">
             <div className="grid gap-4 sm:grid-cols-2 md:grid-cols-4 lg:grid-cols-2 xl:grid-cols-4">
-              <Card className="sm:col-span-2" x-chunk="dashboard-05-chunk-0">
+              <Card
+                className="sm:col-span-2" x-chunk="dashboard-05-chunk-0"
+              >
                 <CardHeader className="pb-3">
                   <CardTitle>Your Orders</CardTitle>
                   <CardDescription className="max-w-lg text-balance leading-relaxed">
@@ -561,7 +563,9 @@ export default function Dashboard() {
             </Tabs>
           </div>
           <div>
-            <Card className="overflow-hidden" x-chunk="dashboard-05-chunk-4">
+            <Card
+              className="overflow-hidden" x-chunk="dashboard-05-chunk-4"
+            >
               <CardHeader className="flex flex-row items-start bg-muted/50">
                 <div className="grid gap-0.5">
                   <CardTitle className="group flex items-center gap-2 text-lg">
diff --git a/apps/www/__registry__/default/block/dashboard-07.tsx b/apps/www/__registry__/default/block/dashboard-07.tsx
index 5c78dee056..e1d03c2c2d 100644
--- a/apps/www/__registry__/default/block/dashboard-07.tsx
+++ b/apps/www/__registry__/default/block/dashboard-07.tsx
@@ -535,8 +535,7 @@ export default function Dashboard() {
                   </CardContent>
                 </Card>
                 <Card
-                  className="overflow-hidden"
-                  x-chunk="dashboard-07-chunk-4"
+                  className="overflow-hidden" x-chunk="dashboard-07-chunk-4"
                 >
                   <CardHeader>
                     <CardTitle>Product Images</CardTitle>
diff --git a/apps/www/__registry__/default/block/sidebar-01.tsx b/apps/www/__registry__/default/block/sidebar-01.tsx
index 0a1b24984b..3e39cd9948 100644
--- a/apps/www/__registry__/default/block/sidebar-01.tsx
+++ b/apps/www/__registry__/default/block/sidebar-01.tsx
@@ -8,9 +8,12 @@ export const iframeHeight = "870px"
 
 export const containerClassName = "w-full h-full"
 
-export default function Page() {
+export default async function Page() {
+  const { cookies } = await import("next/headers")
   return (
-    <SidebarLayout>
+    <SidebarLayout
+      defaultOpen={cookies().get("sidebar:state")?.value === "true"}
+    >
       <AppSidebar />
       <main className="flex flex-1 flex-col p-2 transition-all duration-300 ease-in-out">
         <div className="h-full rounded-md border-2 border-dashed p-2">
diff --git a/apps/www/__registry__/new-york/block/charts-01.tsx b/apps/www/__registry__/new-york/block/charts-01.tsx
index d9567003c4..ab6a4df6de 100644
--- a/apps/www/__registry__/new-york/block/charts-01.tsx
+++ b/apps/www/__registry__/new-york/block/charts-01.tsx
@@ -44,7 +44,9 @@ export default function Charts() {
   return (
     <div className="chart-wrapper mx-auto flex max-w-6xl flex-col flex-wrap items-start justify-center gap-6 p-6 sm:flex-row sm:p-8">
       <div className="grid w-full gap-6 sm:grid-cols-2 lg:max-w-[22rem] lg:grid-cols-1 xl:max-w-[25rem]">
-        <Card className="lg:max-w-md" x-chunk="charts-01-chunk-0">
+        <Card
+          className="lg:max-w-md" x-chunk="charts-01-chunk-0"
+        >
           <CardHeader className="space-y-0 pb-2">
             <CardDescription>Today</CardDescription>
             <CardTitle className="text-4xl tabular-nums">
@@ -170,7 +172,9 @@ export default function Charts() {
             </CardDescription>
           </CardFooter>
         </Card>
-        <Card className="flex flex-col lg:max-w-md" x-chunk="charts-01-chunk-1">
+        <Card
+          className="flex flex-col lg:max-w-md" x-chunk="charts-01-chunk-1"
+        >
           <CardHeader className="flex flex-row items-center gap-4 space-y-0 pb-2 [&>div]:flex-1">
             <div>
               <CardDescription>Resting HR</CardDescription>
@@ -291,7 +295,9 @@ export default function Charts() {
         </Card>
       </div>
       <div className="grid w-full flex-1 gap-6 lg:max-w-[20rem]">
-        <Card className="max-w-xs" x-chunk="charts-01-chunk-2">
+        <Card
+          className="max-w-xs" x-chunk="charts-01-chunk-2"
+        >
           <CardHeader>
             <CardTitle>Progress</CardTitle>
             <CardDescription>
@@ -403,7 +409,9 @@ export default function Charts() {
             </div>
           </CardContent>
         </Card>
-        <Card className="max-w-xs" x-chunk="charts-01-chunk-3">
+        <Card
+          className="max-w-xs" x-chunk="charts-01-chunk-3"
+        >
           <CardHeader className="p-4 pb-0">
             <CardTitle>Walking Distance</CardTitle>
             <CardDescription>
@@ -485,7 +493,9 @@ export default function Charts() {
             </ChartContainer>
           </CardContent>
         </Card>
-        <Card className="max-w-xs" x-chunk="charts-01-chunk-4">
+        <Card
+          className="max-w-xs" x-chunk="charts-01-chunk-4"
+        >
           <CardContent className="flex gap-4 p-4 pb-2">
             <ChartContainer
               config={{
@@ -592,7 +602,9 @@ export default function Charts() {
         </Card>
       </div>
       <div className="grid w-full flex-1 gap-6">
-        <Card className="max-w-xs" x-chunk="charts-01-chunk-5">
+        <Card
+          className="max-w-xs" x-chunk="charts-01-chunk-5"
+        >
           <CardContent className="flex gap-4 p-4">
             <div className="grid items-center gap-2">
               <div className="grid flex-1 auto-rows-min gap-0.5">
@@ -680,7 +692,9 @@ export default function Charts() {
             </ChartContainer>
           </CardContent>
         </Card>
-        <Card className="max-w-xs" x-chunk="charts-01-chunk-6">
+        <Card
+          className="max-w-xs" x-chunk="charts-01-chunk-6"
+        >
           <CardHeader className="p-4 pb-0">
             <CardTitle>Active Energy</CardTitle>
             <CardDescription>
@@ -761,7 +775,9 @@ export default function Charts() {
             </ChartContainer>
           </CardContent>
         </Card>
-        <Card className="max-w-xs" x-chunk="charts-01-chunk-7">
+        <Card
+          className="max-w-xs" x-chunk="charts-01-chunk-7"
+        >
           <CardHeader className="space-y-0 pb-0">
             <CardDescription>Time in Bed</CardDescription>
             <CardTitle className="flex items-baseline gap-1 text-4xl tabular-nums">
diff --git a/apps/www/__registry__/new-york/block/dashboard-01.tsx b/apps/www/__registry__/new-york/block/dashboard-01.tsx
index 2c4672f5c6..67077abe1c 100644
--- a/apps/www/__registry__/new-york/block/dashboard-01.tsx
+++ b/apps/www/__registry__/new-york/block/dashboard-01.tsx
@@ -229,7 +229,9 @@ export default function Dashboard() {
           </Card>
         </div>
         <div className="grid gap-4 md:gap-8 lg:grid-cols-2 xl:grid-cols-3">
-          <Card className="xl:col-span-2" x-chunk="dashboard-01-chunk-4">
+          <Card
+            className="xl:col-span-2" x-chunk="dashboard-01-chunk-4"
+          >
             <CardHeader className="flex flex-row items-center">
               <div className="grid gap-2">
                 <CardTitle>Transactions</CardTitle>
diff --git a/apps/www/__registry__/new-york/block/dashboard-02.tsx b/apps/www/__registry__/new-york/block/dashboard-02.tsx
index 5f9215f554..853c34bddd 100644
--- a/apps/www/__registry__/new-york/block/dashboard-02.tsx
+++ b/apps/www/__registry__/new-york/block/dashboard-02.tsx
@@ -227,8 +227,7 @@ export default function Dashboard() {
             <h1 className="text-lg font-semibold md:text-2xl">Inventory</h1>
           </div>
           <div
-            className="flex flex-1 items-center justify-center rounded-lg border border-dashed shadow-sm"
-            x-chunk="dashboard-02-chunk-1"
+            className="flex flex-1 items-center justify-center rounded-lg border border-dashed shadow-sm" x-chunk="dashboard-02-chunk-1"
           >
             <div className="flex flex-col items-center gap-1 text-center">
               <h3 className="text-2xl font-bold tracking-tight">
diff --git a/apps/www/__registry__/new-york/block/dashboard-03.tsx b/apps/www/__registry__/new-york/block/dashboard-03.tsx
index b8808b42f0..3ca48dc417 100644
--- a/apps/www/__registry__/new-york/block/dashboard-03.tsx
+++ b/apps/www/__registry__/new-york/block/dashboard-03.tsx
@@ -302,8 +302,7 @@ export default function Dashboard() {
         </header>
         <main className="grid flex-1 gap-4 overflow-auto p-4 md:grid-cols-2 lg:grid-cols-3">
           <div
-            className="relative hidden flex-col items-start gap-8 md:flex"
-            x-chunk="dashboard-03-chunk-0"
+            className="relative hidden flex-col items-start gap-8 md:flex" x-chunk="dashboard-03-chunk-0"
           >
             <form className="grid w-full items-start gap-6">
               <fieldset className="grid gap-6 rounded-lg border p-4">
@@ -420,8 +419,7 @@ export default function Dashboard() {
             </Badge>
             <div className="flex-1" />
             <form
-              className="relative overflow-hidden rounded-lg border bg-background focus-within:ring-1 focus-within:ring-ring"
-              x-chunk="dashboard-03-chunk-1"
+              className="relative overflow-hidden rounded-lg border bg-background focus-within:ring-1 focus-within:ring-ring" x-chunk="dashboard-03-chunk-1"
             >
               <Label htmlFor="message" className="sr-only">
                 Message
diff --git a/apps/www/__registry__/new-york/block/dashboard-04.tsx b/apps/www/__registry__/new-york/block/dashboard-04.tsx
index 69e19a57a2..ad0853d906 100644
--- a/apps/www/__registry__/new-york/block/dashboard-04.tsx
+++ b/apps/www/__registry__/new-york/block/dashboard-04.tsx
@@ -157,8 +157,7 @@ export default function Dashboard() {
         </div>
         <div className="mx-auto grid w-full max-w-6xl items-start gap-6 md:grid-cols-[180px_1fr] lg:grid-cols-[250px_1fr]">
           <nav
-            className="grid gap-4 text-sm text-muted-foreground"
-            x-chunk="dashboard-04-chunk-0"
+            className="grid gap-4 text-sm text-muted-foreground" x-chunk="dashboard-04-chunk-0"
           >
             <Link href="#" className="font-semibold text-primary">
               General
diff --git a/apps/www/__registry__/new-york/block/dashboard-05.tsx b/apps/www/__registry__/new-york/block/dashboard-05.tsx
index bb35ec41d0..5c4837c9c0 100644
--- a/apps/www/__registry__/new-york/block/dashboard-05.tsx
+++ b/apps/www/__registry__/new-york/block/dashboard-05.tsx
@@ -284,7 +284,9 @@ export default function Dashboard() {
         <main className="grid flex-1 items-start gap-4 p-4 sm:px-6 sm:py-0 md:gap-8 lg:grid-cols-3 xl:grid-cols-3">
           <div className="grid auto-rows-max items-start gap-4 md:gap-8 lg:col-span-2">
             <div className="grid gap-4 sm:grid-cols-2 md:grid-cols-4 lg:grid-cols-2 xl:grid-cols-4">
-              <Card className="sm:col-span-2" x-chunk="dashboard-05-chunk-0">
+              <Card
+                className="sm:col-span-2" x-chunk="dashboard-05-chunk-0"
+              >
                 <CardHeader className="pb-3">
                   <CardTitle>Your Orders</CardTitle>
                   <CardDescription className="text-balance max-w-lg leading-relaxed">
@@ -562,7 +564,9 @@ export default function Dashboard() {
             </Tabs>
           </div>
           <div>
-            <Card className="overflow-hidden" x-chunk="dashboard-05-chunk-4">
+            <Card
+              className="overflow-hidden" x-chunk="dashboard-05-chunk-4"
+            >
               <CardHeader className="flex flex-row items-start bg-muted/50">
                 <div className="grid gap-0.5">
                   <CardTitle className="group flex items-center gap-2 text-lg">
diff --git a/apps/www/__registry__/new-york/block/dashboard-07.tsx b/apps/www/__registry__/new-york/block/dashboard-07.tsx
index bf65a01873..60624f9488 100644
--- a/apps/www/__registry__/new-york/block/dashboard-07.tsx
+++ b/apps/www/__registry__/new-york/block/dashboard-07.tsx
@@ -535,8 +535,7 @@ export default function Dashboard() {
                   </CardContent>
                 </Card>
                 <Card
-                  className="overflow-hidden"
-                  x-chunk="dashboard-07-chunk-4"
+                  className="overflow-hidden" x-chunk="dashboard-07-chunk-4"
                 >
                   <CardHeader>
                     <CardTitle>Product Images</CardTitle>
diff --git a/apps/www/__registry__/new-york/block/sidebar-01.tsx b/apps/www/__registry__/new-york/block/sidebar-01.tsx
index 71ac9cef57..3e39cd9948 100644
--- a/apps/www/__registry__/new-york/block/sidebar-01.tsx
+++ b/apps/www/__registry__/new-york/block/sidebar-01.tsx
@@ -1,5 +1,3 @@
-import { cookies } from "next/headers"
-
 import { AppSidebar } from "@/registry/new-york/block/sidebar-01/components/app-sidebar"
 import {
   SidebarLayout,
@@ -10,7 +8,8 @@ export const iframeHeight = "870px"
 
 export const containerClassName = "w-full h-full"
 
-export default function Page() {
+export default async function Page() {
+  const { cookies } = await import("next/headers")
   return (
     <SidebarLayout
       defaultOpen={cookies().get("sidebar:state")?.value === "true"}
diff --git a/apps/www/app/(app)/sink/layout.tsx b/apps/www/app/(app)/sink/layout.tsx
index 2b34130ae1..70da365c39 100644
--- a/apps/www/app/(app)/sink/layout.tsx
+++ b/apps/www/app/(app)/sink/layout.tsx
@@ -1,7 +1,7 @@
 import Link from "next/link"
 
 import { ThemeWrapper } from "@/components/theme-wrapper"
-import { styles } from "@/registry/styles"
+import { styles } from "@/registry/registry-styles"
 
 interface SinkLayoutProps {
   children: React.ReactNode
diff --git a/apps/www/components/component-preview.tsx b/apps/www/components/component-preview.tsx
index b538144941..f21523ee41 100644
--- a/apps/www/components/component-preview.tsx
+++ b/apps/www/components/component-preview.tsx
@@ -16,7 +16,7 @@ import {
   TabsList,
   TabsTrigger,
 } from "@/registry/new-york/ui/tabs"
-import { styles } from "@/registry/styles"
+import { styles } from "@/registry/registry-styles"
 
 interface ComponentPreviewProps extends React.HTMLAttributes<HTMLDivElement> {
   name: string
diff --git a/apps/www/components/mdx-components.tsx b/apps/www/components/mdx-components.tsx
index 34fef38ace..50649437ce 100644
--- a/apps/www/components/mdx-components.tsx
+++ b/apps/www/components/mdx-components.tsx
@@ -36,7 +36,7 @@ import {
   TabsList,
   TabsTrigger,
 } from "@/registry/new-york/ui/tabs"
-import { Style } from "@/registry/styles"
+import { Style } from "@/registry/registry-styles"
 
 const components = {
   Accordion,
diff --git a/apps/www/components/style-wrapper.tsx b/apps/www/components/style-wrapper.tsx
index c53352fffb..ecd34854bd 100644
--- a/apps/www/components/style-wrapper.tsx
+++ b/apps/www/components/style-wrapper.tsx
@@ -3,7 +3,7 @@
 import * as React from "react"
 
 import { useConfig } from "@/hooks/use-config"
-import { Style } from "@/registry/styles"
+import { Style } from "@/registry/registry-styles"
 
 interface StyleWrapperProps extends React.HTMLAttributes<HTMLDivElement> {
   styleName?: Style["name"]
diff --git a/apps/www/components/v0-button.tsx b/apps/www/components/v0-button.tsx
index 495c75f161..c84b582703 100644
--- a/apps/www/components/v0-button.tsx
+++ b/apps/www/components/v0-button.tsx
@@ -13,8 +13,8 @@ import {
   TooltipContent,
   TooltipTrigger,
 } from "@/registry/new-york/ui/tooltip"
+import { Style } from "@/registry/registry-styles"
 import { Block } from "@/registry/schema"
-import { Style } from "@/registry/styles"
 
 type Size = "default" | "icon"
 
diff --git a/apps/www/hooks/use-config.ts b/apps/www/hooks/use-config.ts
index 7c473bdcab..1fd3549f90 100644
--- a/apps/www/hooks/use-config.ts
+++ b/apps/www/hooks/use-config.ts
@@ -1,12 +1,12 @@
 import { useAtom } from "jotai"
 import { atomWithStorage } from "jotai/utils"
 
-import { Style } from "@/registry/styles"
-import { Theme } from "@/registry/themes"
+import { BaseColor } from "@/registry/registry-base-colors"
+import { Style } from "@/registry/registry-styles"
 
 type Config = {
   style: Style["name"]
-  theme: Theme["name"]
+  theme: BaseColor["name"]
   radius: number
 }
 
diff --git a/apps/www/public/registry/styles/default/sidebar-01.json b/apps/www/public/registry/styles/default/sidebar-01.json
index f75f4b9906..11224429f1 100644
--- a/apps/www/public/registry/styles/default/sidebar-01.json
+++ b/apps/www/public/registry/styles/default/sidebar-01.json
@@ -19,28 +19,28 @@
   "files": [
     {
       "path": "block/sidebar-01/page.tsx",
-      "content": "import { AppSidebar } from \"@/registry/new-york/block/sidebar-01/components/app-sidebar\"\nimport {\n  SidebarLayout,\n  SidebarTrigger,\n} from \"@/registry/new-york/block/sidebar-01/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarLayout>\n      <AppSidebar />\n      <main className=\"flex flex-1 flex-col p-2 transition-all duration-300 ease-in-out\">\n        <div className=\"h-full rounded-md border-2 border-dashed p-2\">\n          <SidebarTrigger />\n        </div>\n      </main>\n    </SidebarLayout>\n  )\n}\n",
+      "content": "import { AppSidebar } from \"@/registry/new-york/block/sidebar-01/components/app-sidebar\"\nimport {\n  SidebarLayout,\n  SidebarTrigger,\n} from \"@/registry/new-york/block/sidebar-01/ui/sidebar\"\n\nexport default async function Page() {\n  const { cookies } = await import(\"next/headers\")\n  return (\n    <SidebarLayout\n      defaultOpen={cookies().get(\"sidebar:state\")?.value === \"true\"}\n    >\n      <AppSidebar />\n      <main className=\"flex flex-1 flex-col p-2 transition-all duration-300 ease-in-out\">\n        <div className=\"h-full rounded-md border-2 border-dashed p-2\">\n          <SidebarTrigger />\n        </div>\n      </main>\n    </SidebarLayout>\n  )\n}\n",
       "type": "registry:page",
       "target": "app/dashboard/page.tsx"
     },
     {
       "path": "block/sidebar-01/components/app-sidebar.tsx",
-      "content": "\"use client\"\n\nimport {\n  Atom,\n  Bird,\n  BookOpen,\n  Bot,\n  Code2,\n  Eclipse,\n  Frame,\n  History,\n  LifeBuoy,\n  Map,\n  PieChart,\n  Rabbit,\n  Send,\n  Settings2,\n  SquareTerminal,\n  Star,\n  Turtle,\n} from \"lucide-react\"\n\nimport { NavMain } from \"@/registry/new-york/block/sidebar-01/components/nav-main\"\nimport { NavProjects } from \"@/registry/new-york/block/sidebar-01/components/nav-projects\"\nimport { NavSecondary } from \"@/registry/new-york/block/sidebar-01/components/nav-secondary\"\nimport { NavUser } from \"@/registry/new-york/block/sidebar-01/components/nav-user\"\nimport { StorageCard } from \"@/registry/new-york/block/sidebar-01/components/storage-card\"\nimport { TeamSwitcher } from \"@/registry/new-york/block/sidebar-01/components/team-switcher\"\nimport { Sidebar } from \"@/registry/new-york/block/sidebar-01/ui/sidebar\"\nconst data = {\n  teams: [\n    {\n      name: \"Acme Inc\",\n      logo: Atom,\n      plan: \"Enterprise\",\n    },\n    {\n      name: \"Acme Corp.\",\n      logo: Eclipse,\n      plan: \"Startup\",\n    },\n    {\n      name: \"Evil Corp.\",\n      logo: Rabbit,\n      plan: \"Free\",\n    },\n  ],\n  user: {\n    name: \"shadcn\",\n    email: \"m@example.com\",\n    avatar: \"/avatars/shadcn.jpg\",\n  },\n  navMain: [\n    {\n      title: \"Playground\",\n      url: \"#\",\n      icon: SquareTerminal,\n      items: [\n        {\n          title: \"History\",\n          url: \"#\",\n          icon: History,\n          description: \"View your recent prompts\",\n        },\n        {\n          title: \"Starred\",\n          url: \"#\",\n          icon: Star,\n          description: \"Browse your starred prompts\",\n        },\n        {\n          title: \"Settings\",\n          url: \"#\",\n          icon: Settings2,\n          description: \"Configure your playground\",\n        },\n      ],\n    },\n    {\n      title: \"Models\",\n      url: \"#\",\n      icon: Bot,\n      items: [\n        {\n          title: \"Genesis\",\n          url: \"#\",\n          icon: Rabbit,\n          description: \"Our fastest model for general use cases.\",\n        },\n        {\n          title: \"Explorer\",\n          url: \"#\",\n          icon: Bird,\n          description: \"Performance and speed for efficiency.\",\n        },\n        {\n          title: \"Quantum\",\n          url: \"#\",\n          icon: Turtle,\n          description: \"The most powerful model for complex computations.\",\n        },\n      ],\n    },\n    {\n      title: \"Documentation\",\n      url: \"#\",\n      icon: BookOpen,\n      items: [\n        {\n          title: \"Introduction\",\n          url: \"#\",\n        },\n        {\n          title: \"Get Started\",\n          url: \"#\",\n        },\n        {\n          title: \"Tutorials\",\n          url: \"#\",\n        },\n        {\n          title: \"Changelog\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"API\",\n      url: \"#\",\n      icon: Code2,\n      items: [\n        {\n          title: \"Chat\",\n          url: \"#\",\n        },\n        {\n          title: \"Completion\",\n          url: \"#\",\n        },\n        {\n          title: \"Images\",\n          url: \"#\",\n        },\n        {\n          title: \"Video\",\n          url: \"#\",\n        },\n        {\n          title: \"Speech\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Settings\",\n      url: \"#\",\n      icon: Settings2,\n      items: [\n        {\n          title: \"General\",\n          url: \"#\",\n        },\n        {\n          title: \"Team\",\n          url: \"#\",\n        },\n        {\n          title: \"Billing\",\n          url: \"#\",\n        },\n        {\n          title: \"Limits\",\n          url: \"#\",\n        },\n      ],\n    },\n  ],\n\n  navSecondary: [\n    {\n      title: \"Support\",\n      url: \"#\",\n      icon: LifeBuoy,\n    },\n    {\n      title: \"Feedback\",\n      url: \"#\",\n      icon: Send,\n    },\n  ],\n  projects: [\n    {\n      name: \"Design Engineering\",\n      url: \"#\",\n      icon: Frame,\n    },\n    {\n      name: \"Sales & Marketing\",\n      url: \"#\",\n      icon: PieChart,\n    },\n    {\n      name: \"Travel\",\n      url: \"#\",\n      icon: Map,\n    },\n  ],\n  searchResults: [\n    {\n      title: \"Routing Fundamentals\",\n      teaser:\n        \"The skeleton of every application is routing. This page will introduce you to the fundamental concepts of routing for the web and how to handle routing in Next.js.\",\n      url: \"#\",\n    },\n    {\n      title: \"Layouts and Templates\",\n      teaser:\n        \"The special files layout.js and template.js allow you to create UI that is shared between routes. This page will guide you through how and when to use these special files.\",\n      url: \"#\",\n    },\n    {\n      title: \"Data Fetching, Caching, and Revalidating\",\n      teaser:\n        \"Data fetching is a core part of any application. This page goes through how you can fetch, cache, and revalidate data in React and Next.js.\",\n      url: \"#\",\n    },\n    {\n      title: \"Server and Client Composition Patterns\",\n      teaser:\n        \"When building React applications, you will need to consider what parts of your application should be rendered on the server or the client. \",\n      url: \"#\",\n    },\n    {\n      title: \"Server Actions and Mutations\",\n      teaser:\n        \"Server Actions are asynchronous functions that are executed on the server. They can be used in Server and Client Components to handle form submissions and data mutations in Next.js applications.\",\n      url: \"#\",\n    },\n  ],\n}\n\nexport function AppSidebar() {\n  return (\n    <Sidebar>\n      <div className=\"group relative flex h-12 items-center gap-2 border-b px-2.5 py-2 transition-all ease-in-out\">\n        <TeamSwitcher teams={data.teams} />\n      </div>\n      <div className=\"flex flex-1 flex-col gap-5 overflow-auto py-4\">\n        <NavProjects projects={data.projects} />\n        <NavMain\n          heading=\"Platform\"\n          items={data.navMain}\n          searchResults={data.searchResults}\n        />\n        <NavSecondary heading=\"Help\" items={data.navSecondary} />\n        <div className=\"px-4\">\n          <StorageCard />\n        </div>\n      </div>\n      <div className=\"border-t p-2\">\n        <NavUser user={data.user} />\n      </div>\n    </Sidebar>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport {\n  Atom,\n  Bird,\n  BookOpen,\n  Bot,\n  Code2,\n  Eclipse,\n  Frame,\n  History,\n  LifeBuoy,\n  Map,\n  PieChart,\n  Rabbit,\n  Send,\n  Settings2,\n  SquareTerminal,\n  Star,\n  Turtle,\n} from \"lucide-react\"\n\nimport { NavMain } from \"@/registry/new-york/block/sidebar-01/components/nav-main\"\nimport { NavProjects } from \"@/registry/new-york/block/sidebar-01/components/nav-projects\"\nimport { NavSecondary } from \"@/registry/new-york/block/sidebar-01/components/nav-secondary\"\nimport { NavUser } from \"@/registry/new-york/block/sidebar-01/components/nav-user\"\nimport { StorageCard } from \"@/registry/new-york/block/sidebar-01/components/storage-card\"\nimport { TeamSwitcher } from \"@/registry/new-york/block/sidebar-01/components/team-switcher\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarHeader,\n  SidebarItem,\n  SidebarLabel,\n} from \"@/registry/new-york/block/sidebar-01/ui/sidebar\"\nconst data = {\n  teams: [\n    {\n      name: \"Acme Inc\",\n      logo: Atom,\n      plan: \"Enterprise\",\n    },\n    {\n      name: \"Acme Corp.\",\n      logo: Eclipse,\n      plan: \"Startup\",\n    },\n    {\n      name: \"Evil Corp.\",\n      logo: Rabbit,\n      plan: \"Free\",\n    },\n  ],\n  user: {\n    name: \"shadcn\",\n    email: \"m@example.com\",\n    avatar: \"/avatars/shadcn.jpg\",\n  },\n  navMain: [\n    {\n      title: \"Playground\",\n      url: \"#\",\n      icon: SquareTerminal,\n      isActive: true,\n      items: [\n        {\n          title: \"History\",\n          url: \"#\",\n          icon: History,\n          description: \"View your recent prompts\",\n        },\n        {\n          title: \"Starred\",\n          url: \"#\",\n          icon: Star,\n          description: \"Browse your starred prompts\",\n        },\n        {\n          title: \"Settings\",\n          url: \"#\",\n          icon: Settings2,\n          description: \"Configure your playground\",\n        },\n      ],\n    },\n    {\n      title: \"Models\",\n      url: \"#\",\n      icon: Bot,\n      items: [\n        {\n          title: \"Genesis\",\n          url: \"#\",\n          icon: Rabbit,\n          description: \"Our fastest model for general use cases.\",\n        },\n        {\n          title: \"Explorer\",\n          url: \"#\",\n          icon: Bird,\n          description: \"Performance and speed for efficiency.\",\n        },\n        {\n          title: \"Quantum\",\n          url: \"#\",\n          icon: Turtle,\n          description: \"The most powerful model for complex computations.\",\n        },\n      ],\n    },\n    {\n      title: \"Documentation\",\n      url: \"#\",\n      icon: BookOpen,\n      items: [\n        {\n          title: \"Introduction\",\n          url: \"#\",\n        },\n        {\n          title: \"Get Started\",\n          url: \"#\",\n        },\n        {\n          title: \"Tutorials\",\n          url: \"#\",\n        },\n        {\n          title: \"Changelog\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"API\",\n      url: \"#\",\n      icon: Code2,\n      items: [\n        {\n          title: \"Chat\",\n          url: \"#\",\n        },\n        {\n          title: \"Completion\",\n          url: \"#\",\n        },\n        {\n          title: \"Images\",\n          url: \"#\",\n        },\n        {\n          title: \"Video\",\n          url: \"#\",\n        },\n        {\n          title: \"Speech\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Settings\",\n      url: \"#\",\n      icon: Settings2,\n      items: [\n        {\n          title: \"General\",\n          url: \"#\",\n        },\n        {\n          title: \"Team\",\n          url: \"#\",\n        },\n        {\n          title: \"Billing\",\n          url: \"#\",\n        },\n        {\n          title: \"Limits\",\n          url: \"#\",\n        },\n      ],\n    },\n  ],\n\n  navSecondary: [\n    {\n      title: \"Support\",\n      url: \"#\",\n      icon: LifeBuoy,\n    },\n    {\n      title: \"Feedback\",\n      url: \"#\",\n      icon: Send,\n    },\n  ],\n  projects: [\n    {\n      name: \"Design Engineering\",\n      url: \"#\",\n      icon: Frame,\n    },\n    {\n      name: \"Sales & Marketing\",\n      url: \"#\",\n      icon: PieChart,\n    },\n    {\n      name: \"Travel\",\n      url: \"#\",\n      icon: Map,\n    },\n  ],\n  searchResults: [\n    {\n      title: \"Routing Fundamentals\",\n      teaser:\n        \"The skeleton of every application is routing. This page will introduce you to the fundamental concepts of routing for the web and how to handle routing in Next.js.\",\n      url: \"#\",\n    },\n    {\n      title: \"Layouts and Templates\",\n      teaser:\n        \"The special files layout.js and template.js allow you to create UI that is shared between routes. This page will guide you through how and when to use these special files.\",\n      url: \"#\",\n    },\n    {\n      title: \"Data Fetching, Caching, and Revalidating\",\n      teaser:\n        \"Data fetching is a core part of any application. This page goes through how you can fetch, cache, and revalidate data in React and Next.js.\",\n      url: \"#\",\n    },\n    {\n      title: \"Server and Client Composition Patterns\",\n      teaser:\n        \"When building React applications, you will need to consider what parts of your application should be rendered on the server or the client. \",\n      url: \"#\",\n    },\n    {\n      title: \"Server Actions and Mutations\",\n      teaser:\n        \"Server Actions are asynchronous functions that are executed on the server. They can be used in Server and Client Components to handle form submissions and data mutations in Next.js applications.\",\n      url: \"#\",\n    },\n  ],\n}\n\nexport function AppSidebar() {\n  return (\n    <Sidebar>\n      <SidebarHeader>\n        <TeamSwitcher teams={data.teams} />\n      </SidebarHeader>\n      <SidebarContent>\n        <SidebarItem>\n          <SidebarLabel>Platform</SidebarLabel>\n          <NavMain items={data.navMain} searchResults={data.searchResults} />\n        </SidebarItem>\n        <SidebarItem>\n          <SidebarLabel>Projects</SidebarLabel>\n          <NavProjects projects={data.projects} />\n        </SidebarItem>\n        <SidebarItem className=\"mt-auto\">\n          <SidebarLabel>Help</SidebarLabel>\n          <NavSecondary items={data.navSecondary} />\n        </SidebarItem>\n        <SidebarItem>\n          <StorageCard />\n        </SidebarItem>\n      </SidebarContent>\n      <SidebarFooter>\n        <NavUser user={data.user} />\n      </SidebarFooter>\n    </Sidebar>\n  )\n}\n",
       "type": "registry:component"
     },
     {
       "path": "block/sidebar-01/components/nav-main.tsx",
-      "content": "\"use client\"\n\nimport Link from \"next/link\"\nimport { ChevronRight, Search, type LucideIcon } from \"lucide-react\"\n\nimport { useIsMobile } from \"@/registry/new-york/hooks/use-mobile\"\nimport { Button } from \"@/registry/new-york/ui/button\"\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/new-york/ui/collapsible\"\nimport {\n  Drawer,\n  DrawerContent,\n  DrawerTrigger,\n} from \"@/registry/new-york/ui/drawer\"\nimport { Input } from \"@/registry/new-york/ui/input\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/new-york/ui/popover\"\nimport { Separator } from \"@/registry/new-york/ui/separator\"\n\nexport function NavMain({\n  heading,\n  items,\n  searchResults,\n}: {\n  heading: string\n  items: {\n    title: string\n    url: string\n    icon: LucideIcon\n    items?: {\n      title: string\n      url: string\n    }[]\n  }[]\n  searchResults: React.ComponentProps<typeof SidebarSearch>[\"results\"]\n}) {\n  return (\n    <nav className=\"grid gap-2 px-2.5\">\n      {heading && (\n        <div className=\"px-1.5 text-xs font-medium text-muted-foreground\">\n          {heading}\n        </div>\n      )}\n      <ul className=\"grid gap-0.5\">\n        <li>\n          <SidebarSearch results={searchResults} />\n        </li>\n        {items.map((item, index) => (\n          <Collapsible key={item.title} asChild defaultOpen={index === 0}>\n            <li>\n              <div className=\"relative flex items-center\">\n                <Link\n                  href={item.url}\n                  className=\"min-w-8 flex h-8 flex-1 items-center gap-2 overflow-hidden rounded-md px-1.5 text-sm font-medium outline-none ring-ring transition-all hover:bg-accent hover:text-accent-foreground focus-visible:ring-2\"\n                >\n                  <item.icon className=\"h-4 w-4 shrink-0\" />\n                  <div className=\"flex flex-1 overflow-hidden\">\n                    <div className=\"line-clamp-1 pr-6\">{item.title}</div>\n                  </div>\n                </Link>\n                <CollapsibleTrigger asChild>\n                  <Button\n                    variant=\"ghost\"\n                    className=\"absolute right-1 h-6 w-6 rounded-md p-0 ring-ring transition-all focus-visible:ring-2 data-[state=open]:rotate-90\"\n                  >\n                    <ChevronRight className=\"h-4 w-4 text-muted-foreground\" />\n                    <span className=\"sr-only\">Toggle</span>\n                  </Button>\n                </CollapsibleTrigger>\n              </div>\n              <CollapsibleContent className=\"px-4 py-0.5\">\n                <ul className=\"grid border-l px-2\">\n                  {item.items?.map((subItem) => (\n                    <li key={subItem.title}>\n                      <Link\n                        href={subItem.url}\n                        className=\"min-w-8 flex h-8 items-center gap-2 overflow-hidden rounded-md px-2 text-sm font-medium text-muted-foreground ring-ring transition-all hover:bg-accent hover:text-accent-foreground focus-visible:ring-2\"\n                      >\n                        <div className=\"line-clamp-1\">{subItem.title}</div>\n                      </Link>\n                    </li>\n                  ))}\n                </ul>\n              </CollapsibleContent>\n            </li>\n          </Collapsible>\n        ))}\n      </ul>\n    </nav>\n  )\n}\n\nfunction SidebarSearch({\n  results,\n}: {\n  results: {\n    title: string\n    teaser: string\n    url: string\n  }[]\n}) {\n  const isMobile = useIsMobile()\n\n  if (isMobile) {\n    return (\n      <Drawer>\n        <DrawerTrigger className=\"min-w-8 flex h-8 w-full flex-1 items-center gap-2 overflow-hidden rounded-md px-1.5 text-sm font-medium outline-none ring-ring transition-all hover:bg-accent hover:text-accent-foreground focus-visible:ring-2 data-[state=open]:bg-accent data-[state=open]:text-accent-foreground\">\n          <Search className=\"h-4 w-4 shrink-0\" />\n          <div className=\"flex flex-1 overflow-hidden\">\n            <div className=\"line-clamp-1 pr-6\">Search</div>\n          </div>\n        </DrawerTrigger>\n        <DrawerContent>\n          <form>\n            <div className=\"border-b p-2.5\">\n              <Input\n                type=\"search\"\n                placeholder=\"Search...\"\n                className=\"h-8 rounded-sm shadow-none focus-visible:ring-0\"\n              />\n            </div>\n          </form>\n          <div className=\"grid gap-1 p-1.5 text-sm\">\n            {results.map((result) => (\n              <Link\n                href={result.url}\n                key={result.title}\n                className=\"rounded-md p-2.5 outline-none ring-ring hover:bg-accent hover:text-accent-foreground focus-visible:ring-2\"\n              >\n                <div className=\"font-medium\">{result.title}</div>\n                <div className=\"line-clamp-2 text-muted-foreground\">\n                  {result.teaser}\n                </div>\n              </Link>\n            ))}\n            <Separator className=\"my-1.5\" />\n            <Link\n              href=\"#\"\n              className=\"rounded-md px-2.5 py-1 text-muted-foreground outline-none ring-ring hover:text-foreground focus-visible:ring-2\"\n            >\n              See all results\n            </Link>\n          </div>\n        </DrawerContent>\n      </Drawer>\n    )\n  }\n\n  return (\n    <Popover>\n      <PopoverTrigger className=\"min-w-8 flex h-8 w-full flex-1 items-center gap-2 overflow-hidden rounded-md px-1.5 text-sm font-medium outline-none ring-ring transition-all hover:bg-accent hover:text-accent-foreground focus-visible:ring-2 data-[state=open]:bg-accent data-[state=open]:text-accent-foreground\">\n        <Search className=\"h-4 w-4 shrink-0\" />\n        <div className=\"flex flex-1 overflow-hidden\">\n          <div className=\"line-clamp-1 pr-6\">Search</div>\n        </div>\n      </PopoverTrigger>\n      <PopoverContent\n        side=\"right\"\n        align=\"start\"\n        sideOffset={4}\n        className=\"w-96 p-0\"\n      >\n        <form>\n          <div className=\"border-b p-2.5\">\n            <Input\n              type=\"search\"\n              placeholder=\"Search...\"\n              className=\"h-8 rounded-sm shadow-none focus-visible:ring-0\"\n            />\n          </div>\n        </form>\n        <div className=\"grid gap-1 p-1.5 text-sm\">\n          {results.map((result) => (\n            <Link\n              href={result.url}\n              key={result.title}\n              className=\"rounded-md p-2.5 outline-none ring-ring hover:bg-accent hover:text-accent-foreground focus-visible:ring-2\"\n            >\n              <div className=\"font-medium\">{result.title}</div>\n              <div className=\"line-clamp-2 text-muted-foreground\">\n                {result.teaser}\n              </div>\n            </Link>\n          ))}\n          <Separator className=\"my-1.5\" />\n          <Link\n            href=\"#\"\n            className=\"rounded-md px-2.5 py-1 text-muted-foreground outline-none ring-ring hover:text-foreground focus-visible:ring-2\"\n          >\n            See all results\n          </Link>\n        </div>\n      </PopoverContent>\n    </Popover>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport Link from \"next/link\"\nimport { ChevronRight, Search, type LucideIcon } from \"lucide-react\"\n\nimport { useIsMobile } from \"@/registry/new-york/hooks/use-mobile\"\nimport { cn } from \"@/registry/new-york/lib/utils\"\nimport { Button } from \"@/registry/new-york/ui/button\"\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/new-york/ui/collapsible\"\nimport {\n  Drawer,\n  DrawerContent,\n  DrawerTrigger,\n} from \"@/registry/new-york/ui/drawer\"\nimport { Input } from \"@/registry/new-york/ui/input\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/new-york/ui/popover\"\nimport { Separator } from \"@/registry/new-york/ui/separator\"\n\nexport function NavMain({\n  className,\n  items,\n  searchResults,\n}: {\n  items: {\n    title: string\n    url: string\n    icon: LucideIcon\n    isActive?: boolean\n    items?: {\n      title: string\n      url: string\n    }[]\n  }[]\n  searchResults: React.ComponentProps<typeof SidebarSearch>[\"results\"]\n} & React.ComponentProps<\"ul\">) {\n  return (\n    <ul className={cn(\"grid gap-0.5\", className)}>\n      <li>\n        <SidebarSearch results={searchResults} />\n      </li>\n      {items.map((item) => (\n        <Collapsible key={item.title} asChild defaultOpen={item.isActive}>\n          <li>\n            <div className=\"relative flex items-center\">\n              <Link\n                href={item.url}\n                className=\"min-w-8 flex h-8 flex-1 items-center gap-2 overflow-hidden rounded-md px-1.5 text-sm font-medium outline-none ring-ring transition-all hover:bg-accent hover:text-accent-foreground focus-visible:ring-2\"\n              >\n                <item.icon className=\"h-4 w-4 shrink-0\" />\n                <div className=\"flex flex-1 overflow-hidden\">\n                  <div className=\"line-clamp-1 pr-6\">{item.title}</div>\n                </div>\n              </Link>\n              <CollapsibleTrigger asChild>\n                <Button\n                  variant=\"ghost\"\n                  className=\"absolute right-1 h-6 w-6 rounded-md p-0 ring-ring transition-all focus-visible:ring-2 data-[state=open]:rotate-90\"\n                >\n                  <ChevronRight className=\"h-4 w-4 text-muted-foreground\" />\n                  <span className=\"sr-only\">Toggle</span>\n                </Button>\n              </CollapsibleTrigger>\n            </div>\n            <CollapsibleContent className=\"px-4 py-0.5\">\n              <ul className=\"grid border-l px-2\">\n                {item.items?.map((subItem) => (\n                  <li key={subItem.title}>\n                    <Link\n                      href={subItem.url}\n                      className=\"min-w-8 flex h-8 items-center gap-2 overflow-hidden rounded-md px-2 text-sm font-medium text-muted-foreground ring-ring transition-all hover:bg-accent hover:text-accent-foreground focus-visible:ring-2\"\n                    >\n                      <div className=\"line-clamp-1\">{subItem.title}</div>\n                    </Link>\n                  </li>\n                ))}\n              </ul>\n            </CollapsibleContent>\n          </li>\n        </Collapsible>\n      ))}\n    </ul>\n  )\n}\n\nfunction SidebarSearch({\n  results,\n}: {\n  results: {\n    title: string\n    teaser: string\n    url: string\n  }[]\n}) {\n  const isMobile = useIsMobile()\n\n  if (isMobile) {\n    return (\n      <Drawer>\n        <DrawerTrigger className=\"min-w-8 flex h-8 w-full flex-1 items-center gap-2 overflow-hidden rounded-md px-1.5 text-sm font-medium outline-none ring-ring transition-all hover:bg-accent hover:text-accent-foreground focus-visible:ring-2 data-[state=open]:bg-accent data-[state=open]:text-accent-foreground\">\n          <Search className=\"h-4 w-4 shrink-0\" />\n          <div className=\"flex flex-1 overflow-hidden\">\n            <div className=\"line-clamp-1 pr-6\">Search</div>\n          </div>\n        </DrawerTrigger>\n        <DrawerContent>\n          <form>\n            <div className=\"border-b p-2.5\">\n              <Input\n                type=\"search\"\n                placeholder=\"Search...\"\n                className=\"h-8 rounded-sm shadow-none focus-visible:ring-0\"\n              />\n            </div>\n          </form>\n          <div className=\"grid gap-1 p-1.5 text-sm\">\n            {results.map((result) => (\n              <Link\n                href={result.url}\n                key={result.title}\n                className=\"rounded-md p-2.5 outline-none ring-ring hover:bg-accent hover:text-accent-foreground focus-visible:ring-2\"\n              >\n                <div className=\"font-medium\">{result.title}</div>\n                <div className=\"line-clamp-2 text-muted-foreground\">\n                  {result.teaser}\n                </div>\n              </Link>\n            ))}\n            <Separator className=\"my-1.5\" />\n            <Link\n              href=\"#\"\n              className=\"rounded-md px-2.5 py-1 text-muted-foreground outline-none ring-ring hover:text-foreground focus-visible:ring-2\"\n            >\n              See all results\n            </Link>\n          </div>\n        </DrawerContent>\n      </Drawer>\n    )\n  }\n\n  return (\n    <Popover>\n      <PopoverTrigger className=\"min-w-8 flex h-8 w-full flex-1 items-center gap-2 overflow-hidden rounded-md px-1.5 text-sm font-medium outline-none ring-ring transition-all hover:bg-accent hover:text-accent-foreground focus-visible:ring-2 data-[state=open]:bg-accent data-[state=open]:text-accent-foreground\">\n        <Search className=\"h-4 w-4 shrink-0\" />\n        <div className=\"flex flex-1 overflow-hidden\">\n          <div className=\"line-clamp-1 pr-6\">Search</div>\n        </div>\n      </PopoverTrigger>\n      <PopoverContent\n        side=\"right\"\n        align=\"start\"\n        sideOffset={4}\n        className=\"w-96 p-0\"\n      >\n        <form>\n          <div className=\"border-b p-2.5\">\n            <Input\n              type=\"search\"\n              placeholder=\"Search...\"\n              className=\"h-8 rounded-sm shadow-none focus-visible:ring-0\"\n            />\n          </div>\n        </form>\n        <div className=\"grid gap-1 p-1.5 text-sm\">\n          {results.map((result) => (\n            <Link\n              href={result.url}\n              key={result.title}\n              className=\"rounded-md p-2.5 outline-none ring-ring hover:bg-accent hover:text-accent-foreground focus-visible:ring-2\"\n            >\n              <div className=\"font-medium\">{result.title}</div>\n              <div className=\"line-clamp-2 text-muted-foreground\">\n                {result.teaser}\n              </div>\n            </Link>\n          ))}\n          <Separator className=\"my-1.5\" />\n          <Link\n            href=\"#\"\n            className=\"rounded-md px-2.5 py-1 text-muted-foreground outline-none ring-ring hover:text-foreground focus-visible:ring-2\"\n          >\n            See all results\n          </Link>\n        </div>\n      </PopoverContent>\n    </Popover>\n  )\n}\n",
       "type": "registry:component"
     },
     {
       "path": "block/sidebar-01/components/nav-projects.tsx",
-      "content": "import Link from \"next/link\"\nimport { MoreHorizontal, PlusSquare, type LucideIcon } from \"lucide-react\"\n\nimport { Button } from \"@/registry/new-york/ui/button\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/new-york/ui/dropdown-menu\"\n\nexport type Project = {\n  name: string\n  url: string\n  icon: LucideIcon\n}\n\nexport function NavProjects({ projects }: { projects: Project[] }) {\n  return (\n    <nav className=\"grid gap-2 px-2.5\">\n      <div className=\"px-1.5 text-xs font-medium text-muted-foreground\">\n        Recent Projects\n      </div>\n      <ul className=\"grid gap-0.5\">\n        {projects.map((item) => (\n          <li\n            key={item.name}\n            className=\"has-[[data-state=open]]:bg-accent has-[[data-state=open]]:text-accent-foreground group relative rounded-md hover:bg-accent hover:text-accent-foreground\"\n          >\n            <Link\n              href={item.url}\n              className=\"flex h-7 items-center gap-2.5 overflow-hidden rounded-md px-1.5 text-xs outline-none ring-ring transition-all hover:bg-accent hover:text-accent-foreground focus-visible:ring-2\"\n            >\n              <item.icon className=\"h-4 w-4 shrink-0 translate-x-0.5 text-muted-foreground\" />\n              <div className=\"line-clamp-1 grow overflow-hidden pr-6 font-medium\">\n                {item.name}\n              </div>\n            </Link>\n            <DropdownMenu>\n              <DropdownMenuTrigger asChild>\n                <Button\n                  variant=\"ghost\"\n                  className=\"peer absolute right-1 top-0.5 h-6 w-6 shrink-0 rounded-md bg-accent p-0 text-accent-foreground opacity-0 ring-ring transition-all focus-visible:ring-2 group-focus-within:opacity-100 group-hover:opacity-100 data-[state=open]:bg-accent data-[state=open]:opacity-100\"\n                >\n                  <MoreHorizontal className=\"h-4 w-4 text-muted-foreground\" />\n                  <span className=\"sr-only\">Toggle</span>\n                </Button>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent side=\"right\" align=\"start\" sideOffset={20}>\n                <DropdownMenuItem>Share</DropdownMenuItem>\n                <DropdownMenuItem>Rename</DropdownMenuItem>\n                <DropdownMenuSeparator />\n                <DropdownMenuItem>Archive</DropdownMenuItem>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </li>\n        ))}\n        <li>\n          <button className=\"flex h-7 w-full items-center gap-2.5 overflow-hidden rounded-md px-1.5 text-left text-xs ring-ring transition-all hover:bg-muted focus-visible:outline-none focus-visible:ring-2\">\n            <PlusSquare className=\"h-4 w-4 shrink-0 translate-x-0.5 text-muted-foreground\" />\n            <div className=\"line-clamp-1 overflow-hidden font-medium text-muted-foreground\">\n              Add Project\n            </div>\n          </button>\n        </li>\n      </ul>\n    </nav>\n  )\n}\n",
+      "content": "import Link from \"next/link\"\nimport { MoreHorizontal, PlusSquare, type LucideIcon } from \"lucide-react\"\n\nimport { cn } from \"@/registry/new-york/lib/utils\"\nimport { Button } from \"@/registry/new-york/ui/button\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/new-york/ui/dropdown-menu\"\n\nexport function NavProjects({\n  projects,\n  className,\n}: {\n  projects: {\n    name: string\n    url: string\n    icon: LucideIcon\n  }[]\n} & React.ComponentProps<\"ul\">) {\n  return (\n    <ul className={cn(\"grid gap-0.5\", className)}>\n      {projects.map((item) => (\n        <li\n          key={item.name}\n          className=\"has-[[data-state=open]]:bg-accent has-[[data-state=open]]:text-accent-foreground group relative rounded-md hover:bg-accent hover:text-accent-foreground\"\n        >\n          <Link\n            href={item.url}\n            className=\"flex h-7 items-center gap-2.5 overflow-hidden rounded-md px-1.5 text-xs outline-none ring-ring transition-all hover:bg-accent hover:text-accent-foreground focus-visible:ring-2\"\n          >\n            <item.icon className=\"h-4 w-4 shrink-0 translate-x-0.5 text-muted-foreground\" />\n            <div className=\"line-clamp-1 grow overflow-hidden pr-6 font-medium\">\n              {item.name}\n            </div>\n          </Link>\n          <DropdownMenu>\n            <DropdownMenuTrigger asChild>\n              <Button\n                variant=\"ghost\"\n                className=\"peer absolute right-1 top-0.5 h-6 w-6 shrink-0 rounded-md bg-accent p-0 text-accent-foreground opacity-0 ring-ring transition-all focus-visible:ring-2 group-focus-within:opacity-100 group-hover:opacity-100 data-[state=open]:bg-accent data-[state=open]:opacity-100\"\n              >\n                <MoreHorizontal className=\"h-4 w-4 text-muted-foreground\" />\n                <span className=\"sr-only\">Toggle</span>\n              </Button>\n            </DropdownMenuTrigger>\n            <DropdownMenuContent side=\"right\" align=\"start\" sideOffset={20}>\n              <DropdownMenuItem>Share</DropdownMenuItem>\n              <DropdownMenuItem>Rename</DropdownMenuItem>\n              <DropdownMenuSeparator />\n              <DropdownMenuItem>Archive</DropdownMenuItem>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        </li>\n      ))}\n      <li>\n        <button className=\"flex h-7 w-full items-center gap-2.5 overflow-hidden rounded-md px-1.5 text-left text-xs ring-ring transition-all hover:bg-muted focus-visible:outline-none focus-visible:ring-2\">\n          <PlusSquare className=\"h-4 w-4 shrink-0 translate-x-0.5 text-muted-foreground\" />\n          <div className=\"line-clamp-1 overflow-hidden font-medium text-muted-foreground\">\n            Add Project\n          </div>\n        </button>\n      </li>\n    </ul>\n  )\n}\n",
       "type": "registry:component"
     },
     {
       "path": "block/sidebar-01/components/nav-secondary.tsx",
-      "content": "\"use client\"\n\nimport Link from \"next/link\"\nimport { type LucideIcon } from \"lucide-react\"\n\ntype NavItem = {\n  title: string\n  url: string\n  icon: LucideIcon\n  items?: Pick<NavItem, \"title\" | \"url\">[]\n}\n\nexport function NavSecondary({\n  heading,\n  items,\n}: {\n  heading?: string\n  items: NavItem[]\n}) {\n  if (!items?.length) {\n    return null\n  }\n\n  return (\n    <nav className=\"mt-auto grid gap-2 px-2.5\">\n      {heading && (\n        <div className=\"px-1.5 text-xs font-medium text-muted-foreground\">\n          {heading}\n        </div>\n      )}\n      <ul className=\"grid gap-0.5\">\n        {items.map((item) => (\n          <li key={item.title}>\n            <Link\n              href={item.url}\n              className=\"flex h-7 items-center gap-2.5 overflow-hidden rounded-md px-1.5 text-xs ring-ring transition-all hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2\"\n            >\n              <item.icon className=\"h-4 w-4 shrink-0 translate-x-0.5 text-muted-foreground\" />\n              <div className=\"line-clamp-1 grow overflow-hidden pr-6 font-medium text-muted-foreground\">\n                {item.title}\n              </div>\n            </Link>\n          </li>\n        ))}\n      </ul>\n    </nav>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport Link from \"next/link\"\nimport { type LucideIcon } from \"lucide-react\"\n\nimport { cn } from \"@/registry/new-york/lib/utils\"\n\nexport function NavSecondary({\n  className,\n  items,\n}: {\n  items: {\n    title: string\n    url: string\n    icon: LucideIcon\n    items?: {\n      title: string\n      url: string\n    }[]\n  }[]\n} & React.ComponentProps<\"ul\">) {\n  if (!items?.length) {\n    return null\n  }\n\n  return (\n    <ul className={cn(\"grid gap-0.5\", className)}>\n      {items.map((item) => (\n        <li key={item.title}>\n          <Link\n            href={item.url}\n            className=\"flex h-7 items-center gap-2.5 overflow-hidden rounded-md px-1.5 text-xs ring-ring transition-all hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2\"\n          >\n            <item.icon className=\"h-4 w-4 shrink-0 translate-x-0.5 text-muted-foreground\" />\n            <div className=\"line-clamp-1 grow overflow-hidden pr-6 font-medium text-muted-foreground\">\n              {item.title}\n            </div>\n          </Link>\n        </li>\n      ))}\n    </ul>\n  )\n}\n",
       "type": "registry:component"
     },
     {
@@ -65,7 +65,7 @@
     },
     {
       "path": "block/sidebar-01/ui/sidebar.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { PanelLeft } from \"lucide-react\"\n\nimport { cn } from \"@/registry/new-york/lib/utils\"\nimport { Button } from \"@/registry/new-york/ui/button\"\nimport { Sheet, SheetContent } from \"@/registry/new-york/ui/sheet\"\n\nfunction useSidebar() {\n  const [state, setState] = React.useState<\"closed\" | \"open\">(\"open\")\n\n  return {\n    open: state === \"open\",\n    onOpenChange: (open: boolean) => setState(open ? \"open\" : \"closed\"),\n  }\n}\n\nconst SidebarLayout = React.forwardRef<\n  HTMLDivElement,\n  React.ComponentPropsWithoutRef<\"div\">\n>((props, ref) => {\n  const { open } = useSidebar()\n\n  return (\n    <div\n      ref={ref}\n      data-sidebar={open}\n      style={\n        {\n          \"--sidebar-width\": \"16rem\",\n        } as React.CSSProperties\n      }\n      className=\"flex min-h-screen bg-accent/50 pl-0 transition-all duration-300 ease-in-out data-[sidebar=closed]:pl-0 sm:pl-[--sidebar-width]\"\n      {...props}\n    />\n  )\n})\nSidebarLayout.displayName = \"SidebarLayout\"\n\nconst Sidebar = React.forwardRef<HTMLDivElement, React.ComponentProps<\"div\">>(\n  ({ className, children }, ref) => {\n    const { onOpenChange } = useSidebar()\n\n    const sidebar = (\n      <div\n        ref={ref}\n        className={cn(\"flex h-full flex-col border-r bg-background\", className)}\n      >\n        {children}\n      </div>\n    )\n\n    return (\n      <>\n        <aside className=\"fixed inset-y-0 left-0 z-10 hidden w-[--sidebar-width] transition-all duration-300 ease-in-out md:block [[data-sidebar=closed]_&]:left-[calc(var(--sidebar-width)*-1)]\">\n          {sidebar}\n        </aside>\n        <Sheet onOpenChange={onOpenChange}>\n          <SheetContent className=\"p-0\" side=\"left\">\n            {sidebar}\n          </SheetContent>\n        </Sheet>\n      </>\n    )\n  }\n)\nSidebar.displayName = \"Sidebar\"\n\nconst SidebarTrigger = React.forwardRef<\n  HTMLButtonElement,\n  React.ComponentProps<\"button\">\n>(({ className, ...props }, ref) => {\n  const { onOpenChange } = useSidebar()\n\n  return (\n    <Button\n      ref={ref}\n      variant=\"ghost\"\n      size=\"sm\"\n      className={cn(\"flex h-8 w-8 md:hidden\", className)}\n      onClick={() => onOpenChange(!open)}\n      {...props}\n    >\n      <PanelLeft className=\"absolute h-4 w-4\" />\n      <span className=\"sr-only\">Toggle Sidebar</span>\n    </Button>\n  )\n})\nSidebarTrigger.displayName = \"SidebarTrigger\"\n\nexport { Sidebar, SidebarLayout, SidebarTrigger, useSidebar }\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { PanelLeft } from \"lucide-react\"\n\nimport { useIsMobile } from \"@/registry/new-york/hooks/use-mobile\"\nimport { cn } from \"@/registry/new-york/lib/utils\"\nimport { Button } from \"@/registry/new-york/ui/button\"\nimport { Sheet, SheetContent } from \"@/registry/new-york/ui/sheet\"\n\nexport const SIDEBAR_STATE_COOKIE = \"sidebar:state\"\n\ntype SidebarContext = {\n  state: \"open\" | \"closed\"\n  open: boolean\n  onOpenChange: (open: boolean) => void\n}\n\nconst SidebarContext = React.createContext<SidebarContext>({\n  state: \"open\",\n  open: true,\n  onOpenChange: () => {},\n})\n\nfunction useSidebar() {\n  return React.useContext(SidebarContext)\n}\n\nconst SidebarLayout = React.forwardRef<\n  HTMLDivElement,\n  React.ComponentProps<\"div\"> & {\n    defaultOpen?: boolean\n  }\n>(({ defaultOpen, className, ...props }, ref) => {\n  const [open, setOpen] = React.useState(defaultOpen ?? true)\n\n  const onOpenChange = React.useCallback((open: boolean) => {\n    setOpen(open)\n    document.cookie = `${SIDEBAR_STATE_COOKIE}=${open}; path=/; max-age=${\n      60 * 60 * 24 * 7\n    }`\n  }, [])\n\n  const state = open ? \"open\" : \"closed\"\n\n  return (\n    <SidebarContext.Provider value={{ state, open, onOpenChange }}>\n      <div\n        ref={ref}\n        data-sidebar={state}\n        style={\n          {\n            \"--sidebar-width\": \"16rem\",\n          } as React.CSSProperties\n        }\n        className={cn(\n          \"flex min-h-screen bg-accent/50 pl-0 transition-all duration-300 ease-in-out data-[sidebar=closed]:pl-0 sm:pl-[--sidebar-width]\",\n          className\n        )}\n        {...props}\n      />\n    </SidebarContext.Provider>\n  )\n})\nSidebarLayout.displayName = \"SidebarLayout\"\n\nconst SidebarTrigger = React.forwardRef<\n  HTMLButtonElement,\n  React.ComponentProps<\"button\">\n>(({ className, ...props }, ref) => {\n  const { open, onOpenChange } = useSidebar()\n\n  return (\n    <Button\n      ref={ref}\n      variant=\"ghost\"\n      size=\"icon\"\n      className={cn(\"h-8 w-8\", className)}\n      onClick={() => onOpenChange(!open)}\n      {...props}\n    >\n      <PanelLeft className=\"h-4 w-4\" />\n      <span className=\"sr-only\">Toggle Sidebar</span>\n    </Button>\n  )\n})\nSidebarTrigger.displayName = \"SidebarTrigger\"\n\nconst Sidebar = React.forwardRef<HTMLDivElement, React.ComponentProps<\"div\">>(\n  ({ className, children }, ref) => {\n    const isMobile = useIsMobile()\n    const { open, onOpenChange } = useSidebar()\n\n    const sidebar = (\n      <div\n        ref={ref}\n        className={cn(\"flex h-full flex-col border-r bg-background\", className)}\n      >\n        {children}\n      </div>\n    )\n\n    if (isMobile) {\n      return (\n        <Sheet open={open} onOpenChange={onOpenChange}>\n          <SheetContent className=\"w-[--sidebar-width] p-0\" side=\"left\">\n            {sidebar}\n          </SheetContent>\n        </Sheet>\n      )\n    }\n\n    return (\n      <aside className=\"fixed inset-y-0 left-0 z-10 hidden w-[--sidebar-width] transition-all duration-300 ease-in-out md:block [[data-sidebar=closed]_&]:left-[calc(var(--sidebar-width)*-1)]\">\n        {sidebar}\n      </aside>\n    )\n  }\n)\nSidebar.displayName = \"Sidebar\"\n\nconst SidebarHeader = React.forwardRef<\n  HTMLDivElement,\n  React.ComponentProps<\"div\">\n>(({ className, ...props }, ref) => {\n  return (\n    <div\n      ref={ref}\n      className={cn(\"flex items-center border-b px-2.5 py-2\", className)}\n      {...props}\n    />\n  )\n})\nSidebarHeader.displayName = \"SidebarHeader\"\n\nconst SidebarFooter = React.forwardRef<\n  HTMLDivElement,\n  React.ComponentProps<\"div\">\n>(({ className, ...props }, ref) => {\n  return (\n    <div\n      ref={ref}\n      className={cn(\"flex items-center border-t px-2.5 py-2\", className)}\n      {...props}\n    />\n  )\n})\nSidebarFooter.displayName = \"SidebarFooter\"\n\nconst SidebarContent = React.forwardRef<\n  HTMLDivElement,\n  React.ComponentProps<\"div\">\n>(({ className, ...props }, ref) => {\n  return (\n    <div\n      ref={ref}\n      className={cn(\"flex flex-1 flex-col gap-5 overflow-auto py-4\", className)}\n      {...props}\n    />\n  )\n})\nSidebarContent.displayName = \"SidebarContent\"\n\nconst SidebarItem = React.forwardRef<\n  HTMLDivElement,\n  React.ComponentProps<\"div\">\n>(({ className, ...props }, ref) => {\n  return (\n    <div ref={ref} className={cn(\"grid gap-2 px-2.5\", className)} {...props} />\n  )\n})\nSidebarItem.displayName = \"SidebarItem\"\n\nconst SidebarLabel = React.forwardRef<\n  HTMLDivElement,\n  React.ComponentProps<\"div\">\n>(({ className, ...props }, ref) => {\n  return (\n    <div\n      ref={ref}\n      className={cn(\n        \"px-1.5 text-xs font-medium text-muted-foreground\",\n        className\n      )}\n      {...props}\n    />\n  )\n})\nSidebarLabel.displayName = \"SidebarLabel\"\n\nexport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarHeader,\n  SidebarItem,\n  SidebarLabel,\n  SidebarLayout,\n  SidebarTrigger,\n  useSidebar,\n}\n",
       "type": "registry:ui"
     }
   ]
diff --git a/apps/www/public/registry/styles/new-york/sidebar-01.json b/apps/www/public/registry/styles/new-york/sidebar-01.json
index 285a57e2c8..11224429f1 100644
--- a/apps/www/public/registry/styles/new-york/sidebar-01.json
+++ b/apps/www/public/registry/styles/new-york/sidebar-01.json
@@ -19,7 +19,7 @@
   "files": [
     {
       "path": "block/sidebar-01/page.tsx",
-      "content": "import { cookies } from \"next/headers\"\n\nimport { AppSidebar } from \"@/registry/new-york/block/sidebar-01/components/app-sidebar\"\nimport {\n  SidebarLayout,\n  SidebarTrigger,\n} from \"@/registry/new-york/block/sidebar-01/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarLayout\n      defaultOpen={cookies().get(\"sidebar:state\")?.value === \"true\"}\n    >\n      <AppSidebar />\n      <main className=\"flex flex-1 flex-col p-2 transition-all duration-300 ease-in-out\">\n        <div className=\"h-full rounded-md border-2 border-dashed p-2\">\n          <SidebarTrigger />\n        </div>\n      </main>\n    </SidebarLayout>\n  )\n}\n",
+      "content": "import { AppSidebar } from \"@/registry/new-york/block/sidebar-01/components/app-sidebar\"\nimport {\n  SidebarLayout,\n  SidebarTrigger,\n} from \"@/registry/new-york/block/sidebar-01/ui/sidebar\"\n\nexport default async function Page() {\n  const { cookies } = await import(\"next/headers\")\n  return (\n    <SidebarLayout\n      defaultOpen={cookies().get(\"sidebar:state\")?.value === \"true\"}\n    >\n      <AppSidebar />\n      <main className=\"flex flex-1 flex-col p-2 transition-all duration-300 ease-in-out\">\n        <div className=\"h-full rounded-md border-2 border-dashed p-2\">\n          <SidebarTrigger />\n        </div>\n      </main>\n    </SidebarLayout>\n  )\n}\n",
       "type": "registry:page",
       "target": "app/dashboard/page.tsx"
     },
diff --git a/apps/www/registry/default/block/sidebar-01/components/app-sidebar.tsx b/apps/www/registry/default/block/sidebar-01/components/app-sidebar.tsx
index a93282909e..961b7b2b4e 100644
--- a/apps/www/registry/default/block/sidebar-01/components/app-sidebar.tsx
+++ b/apps/www/registry/default/block/sidebar-01/components/app-sidebar.tsx
@@ -26,7 +26,14 @@ import { NavSecondary } from "@/registry/new-york/block/sidebar-01/components/na
 import { NavUser } from "@/registry/new-york/block/sidebar-01/components/nav-user"
 import { StorageCard } from "@/registry/new-york/block/sidebar-01/components/storage-card"
 import { TeamSwitcher } from "@/registry/new-york/block/sidebar-01/components/team-switcher"
-import { Sidebar } from "@/registry/new-york/block/sidebar-01/ui/sidebar"
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarHeader,
+  SidebarItem,
+  SidebarLabel,
+} from "@/registry/new-york/block/sidebar-01/ui/sidebar"
 
 export const iframeHeight = "870px"
 
@@ -60,6 +67,7 @@ const data = {
       title: "Playground",
       url: "#",
       icon: SquareTerminal,
+      isActive: true,
       items: [
         {
           title: "History",
@@ -247,24 +255,29 @@ const data = {
 export function AppSidebar() {
   return (
     <Sidebar>
-      <div className="group relative flex h-12 items-center gap-2 border-b px-2.5 py-2 transition-all ease-in-out">
+      <SidebarHeader>
         <TeamSwitcher teams={data.teams} />
-      </div>
-      <div className="flex flex-1 flex-col gap-5 overflow-auto py-4">
-        <NavProjects projects={data.projects} />
-        <NavMain
-          heading="Platform"
-          items={data.navMain}
-          searchResults={data.searchResults}
-        />
-        <NavSecondary heading="Help" items={data.navSecondary} />
-        <div className="px-4">
+      </SidebarHeader>
+      <SidebarContent>
+        <SidebarItem>
+          <SidebarLabel>Platform</SidebarLabel>
+          <NavMain items={data.navMain} searchResults={data.searchResults} />
+        </SidebarItem>
+        <SidebarItem>
+          <SidebarLabel>Projects</SidebarLabel>
+          <NavProjects projects={data.projects} />
+        </SidebarItem>
+        <SidebarItem className="mt-auto">
+          <SidebarLabel>Help</SidebarLabel>
+          <NavSecondary items={data.navSecondary} />
+        </SidebarItem>
+        <SidebarItem>
           <StorageCard />
-        </div>
-      </div>
-      <div className="border-t p-2">
+        </SidebarItem>
+      </SidebarContent>
+      <SidebarFooter>
         <NavUser user={data.user} />
-      </div>
+      </SidebarFooter>
     </Sidebar>
   )
 }
diff --git a/apps/www/registry/default/block/sidebar-01/components/nav-main.tsx b/apps/www/registry/default/block/sidebar-01/components/nav-main.tsx
index d827820007..dad2e4d7b8 100644
--- a/apps/www/registry/default/block/sidebar-01/components/nav-main.tsx
+++ b/apps/www/registry/default/block/sidebar-01/components/nav-main.tsx
@@ -4,6 +4,7 @@ import Link from "next/link"
 import { ChevronRight, Search, type LucideIcon } from "lucide-react"
 
 import { useIsMobile } from "@/registry/new-york/hooks/use-mobile"
+import { cn } from "@/registry/new-york/lib/utils"
 import { Button } from "@/registry/new-york/ui/button"
 import {
   Collapsible,
@@ -24,75 +25,68 @@ import {
 import { Separator } from "@/registry/new-york/ui/separator"
 
 export function NavMain({
-  heading,
+  className,
   items,
   searchResults,
 }: {
-  heading: string
   items: {
     title: string
     url: string
     icon: LucideIcon
+    isActive?: boolean
     items?: {
       title: string
       url: string
     }[]
   }[]
   searchResults: React.ComponentProps<typeof SidebarSearch>["results"]
-}) {
+} & React.ComponentProps<"ul">) {
   return (
-    <nav className="grid gap-2 px-2.5">
-      {heading && (
-        <div className="px-1.5 text-xs font-medium text-muted-foreground">
-          {heading}
-        </div>
-      )}
-      <ul className="grid gap-0.5">
-        <li>
-          <SidebarSearch results={searchResults} />
-        </li>
-        {items.map((item, index) => (
-          <Collapsible key={item.title} asChild defaultOpen={index === 0}>
-            <li>
-              <div className="relative flex items-center">
-                <Link
-                  href={item.url}
-                  className="min-w-8 flex h-8 flex-1 items-center gap-2 overflow-hidden rounded-md px-1.5 text-sm font-medium outline-none ring-ring transition-all hover:bg-accent hover:text-accent-foreground focus-visible:ring-2"
+    <ul className={cn("grid gap-0.5", className)}>
+      <li>
+        <SidebarSearch results={searchResults} />
+      </li>
+      {items.map((item) => (
+        <Collapsible key={item.title} asChild defaultOpen={item.isActive}>
+          <li>
+            <div className="relative flex items-center">
+              <Link
+                href={item.url}
+                className="min-w-8 flex h-8 flex-1 items-center gap-2 overflow-hidden rounded-md px-1.5 text-sm font-medium outline-none ring-ring transition-all hover:bg-accent hover:text-accent-foreground focus-visible:ring-2"
+              >
+                <item.icon className="h-4 w-4 shrink-0" />
+                <div className="flex flex-1 overflow-hidden">
+                  <div className="line-clamp-1 pr-6">{item.title}</div>
+                </div>
+              </Link>
+              <CollapsibleTrigger asChild>
+                <Button
+                  variant="ghost"
+                  className="absolute right-1 h-6 w-6 rounded-md p-0 ring-ring transition-all focus-visible:ring-2 data-[state=open]:rotate-90"
                 >
-                  <item.icon className="h-4 w-4 shrink-0" />
-                  <div className="flex flex-1 overflow-hidden">
-                    <div className="line-clamp-1 pr-6">{item.title}</div>
-                  </div>
-                </Link>
-                <CollapsibleTrigger asChild>
-                  <Button
-                    variant="ghost"
-                    className="absolute right-1 h-6 w-6 rounded-md p-0 ring-ring transition-all focus-visible:ring-2 data-[state=open]:rotate-90"
-                  >
-                    <ChevronRight className="h-4 w-4 text-muted-foreground" />
-                    <span className="sr-only">Toggle</span>
-                  </Button>
-                </CollapsibleTrigger>
-              </div>
-              <CollapsibleContent className="px-4 py-0.5">
-                <ul className="grid border-l px-2">
-                  {item.items?.map((subItem) => (
-                    <li key={subItem.title}>
-                      <Link
-                        href={subItem.url}
-                        className="min-w-8 flex h-8 items-center gap-2 overflow-hidden rounded-md px-2 text-sm font-medium text-muted-foreground ring-ring transition-all hover:bg-accent hover:text-accent-foreground focus-visible:ring-2"
-                      >
-                        <div className="line-clamp-1">{subItem.title}</div>
-                      </Link>
-                    </li>
-                  ))}
-                </ul>
-              </CollapsibleContent>
-            </li>
-          </Collapsible>
-        ))}
-      </ul>
-    </nav>
+                  <ChevronRight className="h-4 w-4 text-muted-foreground" />
+                  <span className="sr-only">Toggle</span>
+                </Button>
+              </CollapsibleTrigger>
+            </div>
+            <CollapsibleContent className="px-4 py-0.5">
+              <ul className="grid border-l px-2">
+                {item.items?.map((subItem) => (
+                  <li key={subItem.title}>
+                    <Link
+                      href={subItem.url}
+                      className="min-w-8 flex h-8 items-center gap-2 overflow-hidden rounded-md px-2 text-sm font-medium text-muted-foreground ring-ring transition-all hover:bg-accent hover:text-accent-foreground focus-visible:ring-2"
+                    >
+                      <div className="line-clamp-1">{subItem.title}</div>
+                    </Link>
+                  </li>
+                ))}
+              </ul>
+            </CollapsibleContent>
+          </li>
+        </Collapsible>
+      ))}
+    </ul>
   )
 }
 
diff --git a/apps/www/registry/default/block/sidebar-01/components/nav-projects.tsx b/apps/www/registry/default/block/sidebar-01/components/nav-projects.tsx
index d34b4af0bd..4ddd8a937a 100644
--- a/apps/www/registry/default/block/sidebar-01/components/nav-projects.tsx
+++ b/apps/www/registry/default/block/sidebar-01/components/nav-projects.tsx
@@ -1,6 +1,7 @@
 import Link from "next/link"
 import { MoreHorizontal, PlusSquare, type LucideIcon } from "lucide-react"
 
+import { cn } from "@/registry/new-york/lib/utils"
 import { Button } from "@/registry/new-york/ui/button"
 import {
   DropdownMenu,
@@ -10,61 +11,59 @@ import {
   DropdownMenuTrigger,
 } from "@/registry/new-york/ui/dropdown-menu"
 
-export type Project = {
-  name: string
-  url: string
-  icon: LucideIcon
-}
-
-export function NavProjects({ projects }: { projects: Project[] }) {
+export function NavProjects({
+  projects,
+  className,
+}: {
+  projects: {
+    name: string
+    url: string
+    icon: LucideIcon
+  }[]
+} & React.ComponentProps<"ul">) {
   return (
-    <nav className="grid gap-2 px-2.5">
-      <div className="px-1.5 text-xs font-medium text-muted-foreground">
-        Recent Projects
-      </div>
-      <ul className="grid gap-0.5">
-        {projects.map((item) => (
-          <li
-            key={item.name}
-            className="has-[[data-state=open]]:bg-accent has-[[data-state=open]]:text-accent-foreground group relative rounded-md hover:bg-accent hover:text-accent-foreground"
+    <ul className={cn("grid gap-0.5", className)}>
+      {projects.map((item) => (
+        <li
+          key={item.name}
+          className="has-[[data-state=open]]:bg-accent has-[[data-state=open]]:text-accent-foreground group relative rounded-md hover:bg-accent hover:text-accent-foreground"
+        >
+          <Link
+            href={item.url}
+            className="flex h-7 items-center gap-2.5 overflow-hidden rounded-md px-1.5 text-xs outline-none ring-ring transition-all hover:bg-accent hover:text-accent-foreground focus-visible:ring-2"
           >
-            <Link
-              href={item.url}
-              className="flex h-7 items-center gap-2.5 overflow-hidden rounded-md px-1.5 text-xs outline-none ring-ring transition-all hover:bg-accent hover:text-accent-foreground focus-visible:ring-2"
-            >
-              <item.icon className="h-4 w-4 shrink-0 translate-x-0.5 text-muted-foreground" />
-              <div className="line-clamp-1 grow overflow-hidden pr-6 font-medium">
-                {item.name}
-              </div>
-            </Link>
-            <DropdownMenu>
-              <DropdownMenuTrigger asChild>
-                <Button
-                  variant="ghost"
-                  className="peer absolute right-1 top-0.5 h-6 w-6 shrink-0 rounded-md bg-accent p-0 text-accent-foreground opacity-0 ring-ring transition-all focus-visible:ring-2 group-focus-within:opacity-100 group-hover:opacity-100 data-[state=open]:bg-accent data-[state=open]:opacity-100"
-                >
-                  <MoreHorizontal className="h-4 w-4 text-muted-foreground" />
-                  <span className="sr-only">Toggle</span>
-                </Button>
-              </DropdownMenuTrigger>
-              <DropdownMenuContent side="right" align="start" sideOffset={20}>
-                <DropdownMenuItem>Share</DropdownMenuItem>
-                <DropdownMenuItem>Rename</DropdownMenuItem>
-                <DropdownMenuSeparator />
-                <DropdownMenuItem>Archive</DropdownMenuItem>
-              </DropdownMenuContent>
-            </DropdownMenu>
-          </li>
-        ))}
-        <li>
-          <button className="flex h-7 w-full items-center gap-2.5 overflow-hidden rounded-md px-1.5 text-left text-xs ring-ring transition-all hover:bg-muted focus-visible:outline-none focus-visible:ring-2">
-            <PlusSquare className="h-4 w-4 shrink-0 translate-x-0.5 text-muted-foreground" />
-            <div className="line-clamp-1 overflow-hidden font-medium text-muted-foreground">
-              Add Project
+            <item.icon className="h-4 w-4 shrink-0 translate-x-0.5 text-muted-foreground" />
+            <div className="line-clamp-1 grow overflow-hidden pr-6 font-medium">
+              {item.name}
             </div>
-          </button>
+          </Link>
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <Button
+                variant="ghost"
+                className="peer absolute right-1 top-0.5 h-6 w-6 shrink-0 rounded-md bg-accent p-0 text-accent-foreground opacity-0 ring-ring transition-all focus-visible:ring-2 group-focus-within:opacity-100 group-hover:opacity-100 data-[state=open]:bg-accent data-[state=open]:opacity-100"
+              >
+                <MoreHorizontal className="h-4 w-4 text-muted-foreground" />
+                <span className="sr-only">Toggle</span>
+              </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent side="right" align="start" sideOffset={20}>
+              <DropdownMenuItem>Share</DropdownMenuItem>
+              <DropdownMenuItem>Rename</DropdownMenuItem>
+              <DropdownMenuSeparator />
+              <DropdownMenuItem>Archive</DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
         </li>
-      </ul>
-    </nav>
+      ))}
+      <li>
+        <button className="flex h-7 w-full items-center gap-2.5 overflow-hidden rounded-md px-1.5 text-left text-xs ring-ring transition-all hover:bg-muted focus-visible:outline-none focus-visible:ring-2">
+          <PlusSquare className="h-4 w-4 shrink-0 translate-x-0.5 text-muted-foreground" />
+          <div className="line-clamp-1 overflow-hidden font-medium text-muted-foreground">
+            Add Project
+          </div>
+        </button>
+      </li>
+    </ul>
   )
 }
diff --git a/apps/www/registry/default/block/sidebar-01/components/nav-secondary.tsx b/apps/www/registry/default/block/sidebar-01/components/nav-secondary.tsx
index f5398320c8..bdf9a84a96 100644
--- a/apps/www/registry/default/block/sidebar-01/components/nav-secondary.tsx
+++ b/apps/www/registry/default/block/sidebar-01/components/nav-secondary.tsx
@@ -3,46 +3,41 @@
 import Link from "next/link"
 import { type LucideIcon } from "lucide-react"
 
-type NavItem = {
-  title: string
-  url: string
-  icon: LucideIcon
-  items?: Pick<NavItem, "title" | "url">[]
-}
+import { cn } from "@/registry/new-york/lib/utils"
 
 export function NavSecondary({
-  heading,
+  className,
   items,
 }: {
-  heading?: string
-  items: NavItem[]
-}) {
+  items: {
+    title: string
+    url: string
+    icon: LucideIcon
+    items?: {
+      title: string
+      url: string
+    }[]
+  }[]
+} & React.ComponentProps<"ul">) {
   if (!items?.length) {
     return null
   }
 
   return (
-    <nav className="mt-auto grid gap-2 px-2.5">
-      {heading && (
-        <div className="px-1.5 text-xs font-medium text-muted-foreground">
-          {heading}
-        </div>
-      )}
-      <ul className="grid gap-0.5">
-        {items.map((item) => (
-          <li key={item.title}>
-            <Link
-              href={item.url}
-              className="flex h-7 items-center gap-2.5 overflow-hidden rounded-md px-1.5 text-xs ring-ring transition-all hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2"
-            >
-              <item.icon className="h-4 w-4 shrink-0 translate-x-0.5 text-muted-foreground" />
-              <div className="line-clamp-1 grow overflow-hidden pr-6 font-medium text-muted-foreground">
-                {item.title}
-              </div>
-            </Link>
-          </li>
-        ))}
-      </ul>
-    </nav>
+    <ul className={cn("grid gap-0.5", className)}>
+      {items.map((item) => (
+        <li key={item.title}>
+          <Link
+            href={item.url}
+            className="flex h-7 items-center gap-2.5 overflow-hidden rounded-md px-1.5 text-xs ring-ring transition-all hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2"
+          >
+            <item.icon className="h-4 w-4 shrink-0 translate-x-0.5 text-muted-foreground" />
+            <div className="line-clamp-1 grow overflow-hidden pr-6 font-medium text-muted-foreground">
+              {item.title}
+            </div>
+          </Link>
+        </li>
+      ))}
+    </ul>
   )
 }
diff --git a/apps/www/registry/default/block/sidebar-01/page.tsx b/apps/www/registry/default/block/sidebar-01/page.tsx
index 0a1b24984b..3e39cd9948 100644
--- a/apps/www/registry/default/block/sidebar-01/page.tsx
+++ b/apps/www/registry/default/block/sidebar-01/page.tsx
@@ -8,9 +8,12 @@ export const iframeHeight = "870px"
 
 export const containerClassName = "w-full h-full"
 
-export default function Page() {
+export default async function Page() {
+  const { cookies } = await import("next/headers")
   return (
-    <SidebarLayout>
+    <SidebarLayout
+      defaultOpen={cookies().get("sidebar:state")?.value === "true"}
+    >
       <AppSidebar />
       <main className="flex flex-1 flex-col p-2 transition-all duration-300 ease-in-out">
         <div className="h-full rounded-md border-2 border-dashed p-2">
diff --git a/apps/www/registry/default/block/sidebar-01/ui/sidebar.tsx b/apps/www/registry/default/block/sidebar-01/ui/sidebar.tsx
index 6ebebc7280..f4759f8dbc 100644
--- a/apps/www/registry/default/block/sidebar-01/ui/sidebar.tsx
+++ b/apps/www/registry/default/block/sidebar-01/ui/sidebar.tsx
@@ -3,44 +3,93 @@
 import * as React from "react"
 import { PanelLeft } from "lucide-react"
 
+import { useIsMobile } from "@/registry/new-york/hooks/use-mobile"
 import { cn } from "@/registry/new-york/lib/utils"
 import { Button } from "@/registry/new-york/ui/button"
 import { Sheet, SheetContent } from "@/registry/new-york/ui/sheet"
 
-function useSidebar() {
-  const [state, setState] = React.useState<"closed" | "open">("open")
+export const SIDEBAR_STATE_COOKIE = "sidebar:state"
 
-  return {
-    open: state === "open",
-    onOpenChange: (open: boolean) => setState(open ? "open" : "closed"),
-  }
+type SidebarContext = {
+  state: "open" | "closed"
+  open: boolean
+  onOpenChange: (open: boolean) => void
+}
+
+const SidebarContext = React.createContext<SidebarContext>({
+  state: "open",
+  open: true,
+  onOpenChange: () => {},
+})
+
+function useSidebar() {
+  return React.useContext(SidebarContext)
 }
 
 const SidebarLayout = React.forwardRef<
   HTMLDivElement,
-  React.ComponentPropsWithoutRef<"div">
->((props, ref) => {
-  const { open } = useSidebar()
+  React.ComponentProps<"div"> & {
+    defaultOpen?: boolean
+  }
+>(({ defaultOpen, className, ...props }, ref) => {
+  const [open, setOpen] = React.useState(defaultOpen ?? true)
+
+  const onOpenChange = React.useCallback((open: boolean) => {
+    setOpen(open)
+    document.cookie = `${SIDEBAR_STATE_COOKIE}=${open}; path=/; max-age=${
+      60 * 60 * 24 * 7
+    }`
+  }, [])
+
+  const state = open ? "open" : "closed"
 
   return (
-    <div
-      ref={ref}
-      data-sidebar={open}
-      style={
-        {
-          "--sidebar-width": "16rem",
-        } as React.CSSProperties
-      }
-      className="flex min-h-screen bg-accent/50 pl-0 transition-all duration-300 ease-in-out data-[sidebar=closed]:pl-0 sm:pl-[--sidebar-width]"
-      {...props}
-    />
+    <SidebarContext.Provider value={{ state, open, onOpenChange }}>
+      <div
+        ref={ref}
+        data-sidebar={state}
+        style={
+          {
+            "--sidebar-width": "16rem",
+          } as React.CSSProperties
+        }
+        className={cn(
+          "flex min-h-screen bg-accent/50 pl-0 transition-all duration-300 ease-in-out data-[sidebar=closed]:pl-0 sm:pl-[--sidebar-width]",
+          className
+        )}
+        {...props}
+      />
+    </SidebarContext.Provider>
   )
 })
 SidebarLayout.displayName = "SidebarLayout"
 
+const SidebarTrigger = React.forwardRef<
+  HTMLButtonElement,
+  React.ComponentProps<"button">
+>(({ className, ...props }, ref) => {
+  const { open, onOpenChange } = useSidebar()
+
+  return (
+    <Button
+      ref={ref}
+      variant="ghost"
+      size="icon"
+      className={cn("h-8 w-8", className)}
+      onClick={() => onOpenChange(!open)}
+      {...props}
+    >
+      <PanelLeft className="h-4 w-4" />
+      <span className="sr-only">Toggle Sidebar</span>
+    </Button>
+  )
+})
+SidebarTrigger.displayName = "SidebarTrigger"
+
 const Sidebar = React.forwardRef<HTMLDivElement, React.ComponentProps<"div">>(
   ({ className, children }, ref) => {
-    const { onOpenChange } = useSidebar()
+    const isMobile = useIsMobile()
+    const { open, onOpenChange } = useSidebar()
 
     const sidebar = (
       <div
@@ -51,42 +100,102 @@ const Sidebar = React.forwardRef<HTMLDivElement, React.ComponentProps<"div">>(
       </div>
     )
 
-    return (
-      <>
-        <aside className="fixed inset-y-0 left-0 z-10 hidden w-[--sidebar-width] transition-all duration-300 ease-in-out md:block [[data-sidebar=closed]_&]:left-[calc(var(--sidebar-width)*-1)]">
-          {sidebar}
-        </aside>
-        <Sheet onOpenChange={onOpenChange}>
-          <SheetContent className="p-0" side="left">
+    if (isMobile) {
+      return (
+        <Sheet open={open} onOpenChange={onOpenChange}>
+          <SheetContent className="w-[--sidebar-width] p-0" side="left">
             {sidebar}
           </SheetContent>
         </Sheet>
-      </>
+      )
+    }
+
+    return (
+      <aside className="fixed inset-y-0 left-0 z-10 hidden w-[--sidebar-width] transition-all duration-300 ease-in-out md:block [[data-sidebar=closed]_&]:left-[calc(var(--sidebar-width)*-1)]">
+        {sidebar}
+      </aside>
     )
   }
 )
 Sidebar.displayName = "Sidebar"
 
-const SidebarTrigger = React.forwardRef<
-  HTMLButtonElement,
-  React.ComponentProps<"button">
+const SidebarHeader = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<"div">
 >(({ className, ...props }, ref) => {
-  const { onOpenChange } = useSidebar()
-
   return (
-    <Button
+    <div
       ref={ref}
-      variant="ghost"
-      size="sm"
-      className={cn("flex h-8 w-8 md:hidden", className)}
-      onClick={() => onOpenChange(!open)}
+      className={cn("flex items-center border-b px-2.5 py-2", className)}
       {...props}
-    >
-      <PanelLeft className="absolute h-4 w-4" />
-      <span className="sr-only">Toggle Sidebar</span>
-    </Button>
+    />
   )
 })
-SidebarTrigger.displayName = "SidebarTrigger"
+SidebarHeader.displayName = "SidebarHeader"
 
-export { Sidebar, SidebarLayout, SidebarTrigger, useSidebar }
+const SidebarFooter = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<"div">
+>(({ className, ...props }, ref) => {
+  return (
+    <div
+      ref={ref}
+      className={cn("flex items-center border-t px-2.5 py-2", className)}
+      {...props}
+    />
+  )
+})
+SidebarFooter.displayName = "SidebarFooter"
+
+const SidebarContent = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<"div">
+>(({ className, ...props }, ref) => {
+  return (
+    <div
+      ref={ref}
+      className={cn("flex flex-1 flex-col gap-5 overflow-auto py-4", className)}
+      {...props}
+    />
+  )
+})
+SidebarContent.displayName = "SidebarContent"
+
+const SidebarItem = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<"div">
+>(({ className, ...props }, ref) => {
+  return (
+    <div ref={ref} className={cn("grid gap-2 px-2.5", className)} {...props} />
+  )
+})
+SidebarItem.displayName = "SidebarItem"
+
+const SidebarLabel = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<"div">
+>(({ className, ...props }, ref) => {
+  return (
+    <div
+      ref={ref}
+      className={cn(
+        "px-1.5 text-xs font-medium text-muted-foreground",
+        className
+      )}
+      {...props}
+    />
+  )
+})
+SidebarLabel.displayName = "SidebarLabel"
+
+export {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarHeader,
+  SidebarItem,
+  SidebarLabel,
+  SidebarLayout,
+  SidebarTrigger,
+  useSidebar,
+}
diff --git a/apps/www/registry/new-york/block/sidebar-01/page.tsx b/apps/www/registry/new-york/block/sidebar-01/page.tsx
index 71ac9cef57..3e39cd9948 100644
--- a/apps/www/registry/new-york/block/sidebar-01/page.tsx
+++ b/apps/www/registry/new-york/block/sidebar-01/page.tsx
@@ -1,5 +1,3 @@
-import { cookies } from "next/headers"
-
 import { AppSidebar } from "@/registry/new-york/block/sidebar-01/components/app-sidebar"
 import {
   SidebarLayout,
@@ -10,7 +8,8 @@ export const iframeHeight = "870px"
 
 export const containerClassName = "w-full h-full"
 
-export default function Page() {
+export default async function Page() {
+  const { cookies } = await import("next/headers")
   return (
     <SidebarLayout
       defaultOpen={cookies().get("sidebar:state")?.value === "true"}