diff --git a/apps/v4/app/(app)/page.tsx b/apps/v4/app/(app)/page.tsx
index 6901f9bd85..20cbcaec68 100644
--- a/apps/v4/app/(app)/page.tsx
+++ b/apps/v4/app/(app)/page.tsx
@@ -49,7 +49,7 @@ import { TooltipDemo } from "@/components/tooltip-demo"
 
 export default function SinkPage() {
   return (
-    <div className="grid flex-1 gap-4 p-4">
+    <div className="@container grid flex-1 gap-4 p-4">
       <ComponentWrapper name="chart" className="w-full">
         <ChartDemo />
       </ComponentWrapper>
@@ -83,7 +83,7 @@ export default function SinkPage() {
       <ComponentWrapper name="card">
         <CardDemo />
       </ComponentWrapper>
-      <ComponentWrapper name="carousel" className="hidden md:flex">
+      <ComponentWrapper name="carousel">
         <CarouselDemo />
       </ComponentWrapper>
       <ComponentWrapper name="checkbox">
diff --git a/apps/v4/components/avatar-demo.tsx b/apps/v4/components/avatar-demo.tsx
index 8766ff251d..d183633aa5 100644
--- a/apps/v4/components/avatar-demo.tsx
+++ b/apps/v4/components/avatar-demo.tsx
@@ -6,7 +6,7 @@ import {
 
 export function AvatarDemo() {
   return (
-    <div className="flex flex-col items-center gap-4 md:flex-row">
+    <div className="flex flex-row flex-wrap items-center gap-4">
       <Avatar>
         <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
         <AvatarFallback>CN</AvatarFallback>
diff --git a/apps/v4/components/badge-demo.tsx b/apps/v4/components/badge-demo.tsx
index 85768b0f87..73acd07a3a 100644
--- a/apps/v4/components/badge-demo.tsx
+++ b/apps/v4/components/badge-demo.tsx
@@ -5,7 +5,7 @@ import { Badge } from "@/registry/new-york-v4/ui/badge"
 export function BadgeDemo() {
   return (
     <div className="flex flex-col items-center gap-2">
-      <div className="flex w-full flex-col gap-2 md:flex-row">
+      <div className="flex w-full flex-wrap gap-2">
         <Badge>Badge</Badge>
         <Badge variant="secondary">Secondary</Badge>
         <Badge variant="destructive">Destructive</Badge>
@@ -34,7 +34,7 @@ export function BadgeDemo() {
           20+
         </Badge>
       </div>
-      <div className="flex w-full flex-col gap-2 md:flex-row">
+      <div className="flex w-full flex-wrap gap-2">
         <Badge asChild>
           <a href="#">
             Link <ArrowRightIcon />
diff --git a/apps/v4/components/button-demo.tsx b/apps/v4/components/button-demo.tsx
index 28120886cd..78cb85a888 100644
--- a/apps/v4/components/button-demo.tsx
+++ b/apps/v4/components/button-demo.tsx
@@ -5,7 +5,7 @@ import { Button } from "@/registry/new-york-v4/ui/button"
 export function ButtonDemo() {
   return (
     <div className="flex flex-col gap-6">
-      <div className="flex flex-col items-center gap-2 md:flex-row">
+      <div className="flex flex-wrap items-center gap-2 md:flex-row">
         <Button>Button</Button>
         <Button variant="outline">Outline</Button>
         <Button variant="ghost">Ghost</Button>
@@ -23,7 +23,7 @@ export function ButtonDemo() {
           Please wait
         </Button>
       </div>
-      <div className="flex flex-col items-center gap-2 md:flex-row">
+      <div className="flex flex-wrap items-center gap-2 md:flex-row">
         <Button size="sm">Small</Button>
         <Button variant="outline" size="sm">
           Outline
@@ -51,7 +51,7 @@ export function ButtonDemo() {
           Please wait
         </Button>
       </div>
-      <div className="flex flex-col flex-wrap items-center gap-2 md:flex-row">
+      <div className="flex flex-wrap items-center gap-2 md:flex-row">
         <Button size="lg">Large</Button>
         <Button variant="outline" size="lg">
           Outline
diff --git a/apps/v4/components/calendar-demo.tsx b/apps/v4/components/calendar-demo.tsx
index d4935664eb..290d65176b 100644
--- a/apps/v4/components/calendar-demo.tsx
+++ b/apps/v4/components/calendar-demo.tsx
@@ -18,7 +18,7 @@ export function CalendarDemo() {
   })
 
   return (
-    <div className="flex flex-col flex-wrap items-start gap-2 md:flex-row">
+    <div className="flex flex-col flex-wrap items-start gap-2 @md:flex-row">
       <Calendar
         mode="single"
         selected={date}
@@ -40,7 +40,7 @@ export function CalendarDemo() {
         selected={range}
         onSelect={setRange}
         numberOfMonths={3}
-        className="rounded-md border shadow-sm [&>div]:gap-5"
+        className="hidden rounded-md border shadow-sm @4xl:flex [&>div]:gap-5"
       />
     </div>
   )
diff --git a/apps/v4/components/carousel-demo.tsx b/apps/v4/components/carousel-demo.tsx
index 88ed7b2e47..88568b0806 100644
--- a/apps/v4/components/carousel-demo.tsx
+++ b/apps/v4/components/carousel-demo.tsx
@@ -11,7 +11,7 @@ import {
 
 export function CarouselDemo() {
   return (
-    <div className="w-full flex-col items-center gap-4 md:flex">
+    <div className="hidden w-full flex-col items-center gap-4 @4xl:flex">
       <Carousel className="max-w-sm *:data-[slot=carousel-next]:hidden *:data-[slot=carousel-previous]:hidden *:data-[slot=carousel-next]:md:inline-flex *:data-[slot=carousel-previous]:md:inline-flex">
         <CarouselContent>
           {Array.from({ length: 5 }).map((_, index) => (
@@ -29,7 +29,6 @@ export function CarouselDemo() {
         <CarouselPrevious />
         <CarouselNext />
       </Carousel>
-
       <Carousel
         className="max-w-sm *:data-[slot=carousel-next]:hidden *:data-[slot=carousel-previous]:hidden *:data-[slot=carousel-next]:md:inline-flex *:data-[slot=carousel-previous]:md:inline-flex"
         opts={{
diff --git a/apps/v4/components/chart-demo.tsx b/apps/v4/components/chart-demo.tsx
index 7da7894114..69299d00df 100644
--- a/apps/v4/components/chart-demo.tsx
+++ b/apps/v4/components/chart-demo.tsx
@@ -1,13 +1,17 @@
 import { ChartAreaDemo } from "@/components/chart-area-demo"
 import { ChartBarDemo } from "@/components/chart-bar-demo"
+import { ChartLineDemo } from "@/components/chart-line-demo"
 import { ChartBarMixed } from "@/registry/new-york-v4/charts/chart-bar-mixed"
 
 export function ChartDemo() {
   return (
-    <div className="flex w-full max-w-screen-xl flex-col flex-wrap gap-4 *:data-[slot=card]:flex-1 md:flex-row">
+    <div className="grid w-full max-w-screen-2xl gap-4 *:data-[slot=card]:flex-1 @2xl:grid-cols-2 @6xl:grid-cols-3">
       <ChartAreaDemo />
       <ChartBarDemo />
       <ChartBarMixed />
+      <div className="@6xl:hidden">
+        <ChartLineDemo />
+      </div>
     </div>
   )
 }
diff --git a/apps/v4/components/combobox-demo.tsx b/apps/v4/components/combobox-demo.tsx
index 40783372e9..920e9ff51c 100644
--- a/apps/v4/components/combobox-demo.tsx
+++ b/apps/v4/components/combobox-demo.tsx
@@ -112,7 +112,7 @@ type Timezone = (typeof timezones)[number]
 
 export function ComboboxDemo() {
   return (
-    <div className="flex w-full flex-col items-start gap-4 md:flex-row">
+    <div className="flex w-full flex-wrap items-start gap-4">
       <FrameworkCombobox frameworks={[...frameworks]} />
       <UserCombobox users={[...users]} selectedUserId={users[0].id} />
       <TimezoneCombobox
diff --git a/apps/v4/components/drawer-demo.tsx b/apps/v4/components/drawer-demo.tsx
index 1c47891f3a..5ba9e12d18 100644
--- a/apps/v4/components/drawer-demo.tsx
+++ b/apps/v4/components/drawer-demo.tsx
@@ -60,7 +60,7 @@ const data = [
 
 export function DrawerDemo() {
   return (
-    <div className="flex flex-col items-start gap-4 md:flex-row md:items-center">
+    <div className="flex flex-wrap items-start gap-4">
       <DrawerBottom />
       <DrawerScrollableContent />
       <DrawerDirections />
diff --git a/apps/v4/components/dropdown-menu-demo.tsx b/apps/v4/components/dropdown-menu-demo.tsx
index 987d2f55f2..fe1c39ecc3 100644
--- a/apps/v4/components/dropdown-menu-demo.tsx
+++ b/apps/v4/components/dropdown-menu-demo.tsx
@@ -43,7 +43,7 @@ import {
 
 export function DropdownMenuDemo() {
   return (
-    <div className="flex flex-col items-center gap-4 md:flex-row">
+    <div className="flex flex-wrap items-start gap-4">
       <DropdownMenuSimple />
       <DropdownMenuCheckboxes />
       <DropdownMenuRadioGroupDemo />
diff --git a/apps/v4/components/navigation-menu-demo.tsx b/apps/v4/components/navigation-menu-demo.tsx
index bc35f513e0..bd41abc98f 100644
--- a/apps/v4/components/navigation-menu-demo.tsx
+++ b/apps/v4/components/navigation-menu-demo.tsx
@@ -54,7 +54,7 @@ const components: { title: string; href: string; description: string }[] = [
 
 export function NavigationMenuDemo() {
   return (
-    <div className="hidden w-full flex-col items-center justify-center gap-6 md:flex">
+    <div className="hidden w-full flex-col items-center justify-center gap-6 @xl:flex">
       <NavigationMenu>
         <NavigationMenuList>
           <NavigationMenuItem>
diff --git a/apps/v4/components/select-demo.tsx b/apps/v4/components/select-demo.tsx
index f880adbbcb..eb4a6a195d 100644
--- a/apps/v4/components/select-demo.tsx
+++ b/apps/v4/components/select-demo.tsx
@@ -18,7 +18,7 @@ import {
 
 export function SelectDemo() {
   return (
-    <div className="flex flex-col gap-4">
+    <div className="flex flex-wrap items-start gap-4">
       <Select>
         <SelectTrigger className="w-[180px]">
           <SelectValue placeholder="Select a fruit" />
diff --git a/apps/v4/components/skeleton-demo.tsx b/apps/v4/components/skeleton-demo.tsx
index 6fc6db2ceb..66a6b61997 100644
--- a/apps/v4/components/skeleton-demo.tsx
+++ b/apps/v4/components/skeleton-demo.tsx
@@ -3,7 +3,7 @@ import { Skeleton } from "@/registry/new-york-v4/ui/skeleton"
 
 export function SkeletonDemo() {
   return (
-    <div className="flex w-full max-w-3xl flex-col gap-6">
+    <div className="flex w-full flex-wrap items-start gap-4">
       <div className="flex items-center gap-4">
         <Skeleton className="size-10 shrink-0 rounded-full" />
         <div className="grid gap-2">
@@ -11,9 +11,9 @@ export function SkeletonDemo() {
           <Skeleton className="h-4 w-[100px]" />
         </div>
       </div>
-      <div className="flex w-full flex-col gap-4 md:flex-row">
+      <div className="flex w-full flex-wrap items-start gap-4">
         {Array.from({ length: 3 }).map((_, index) => (
-          <Card key={index} className="w-full">
+          <Card key={index} className="w-full @md:w-auto @md:min-w-sm">
             <CardHeader>
               <Skeleton className="h-4 w-2/3" />
               <Skeleton className="h-4 w-1/2" />
diff --git a/apps/v4/components/toggle-group-demo.tsx b/apps/v4/components/toggle-group-demo.tsx
index 56ddce0deb..ce8cad4021 100644
--- a/apps/v4/components/toggle-group-demo.tsx
+++ b/apps/v4/components/toggle-group-demo.tsx
@@ -7,7 +7,7 @@ import {
 
 export function ToggleGroupDemo() {
   return (
-    <div className="flex flex-col items-center gap-6 md:flex-row">
+    <div className="flex flex-wrap items-start gap-4">
       <ToggleGroup type="multiple">
         <ToggleGroupItem value="bold" aria-label="Toggle bold">
           <BoldIcon />
diff --git a/apps/v4/components/tooltip-demo.tsx b/apps/v4/components/tooltip-demo.tsx
index 928788af97..cdf55188d9 100644
--- a/apps/v4/components/tooltip-demo.tsx
+++ b/apps/v4/components/tooltip-demo.tsx
@@ -9,7 +9,7 @@ import {
 
 export function TooltipDemo() {
   return (
-    <div className="flex flex-col gap-6 md:flex-row">
+    <div className="flex flex-wrap items-start gap-4">
       <Tooltip>
         <TooltipTrigger asChild>
           <Button variant="outline">Hover</Button>
diff --git a/apps/v4/registry/new-york-v4/ui/toggle.tsx b/apps/v4/registry/new-york-v4/ui/toggle.tsx
index 261f712e21..94ec8f589b 100644
--- a/apps/v4/registry/new-york-v4/ui/toggle.tsx
+++ b/apps/v4/registry/new-york-v4/ui/toggle.tsx
@@ -7,7 +7,7 @@ import { cva, type VariantProps } from "class-variance-authority"
 import { cn } from "@/lib/utils"
 
 const toggleVariants = cva(
-  "inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium hover:bg-muted hover:text-muted-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] outline-none transition-[color,box-shadow] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+  "inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium hover:bg-muted hover:text-muted-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] outline-none transition-[color,box-shadow] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive whitespace-nowrap",
   {
     variants: {
       variant: {
diff --git a/apps/www/public/r/styles/new-york-v4/form.json b/apps/www/public/r/styles/new-york-v4/form.json
index d381cec2e3..9a61163668 100644
--- a/apps/www/public/r/styles/new-york-v4/form.json
+++ b/apps/www/public/r/styles/new-york-v4/form.json
@@ -16,7 +16,7 @@
   "files": [
     {
       "path": "registry/new-york-v4/ui/form.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as LabelPrimitive from \"@radix-ui/react-label\"\nimport { Slot } from \"@radix-ui/react-slot\"\nimport {\n  Controller,\n  ControllerProps,\n  FieldPath,\n  FieldValues,\n  FormProvider,\n  useFormContext,\n  useFormState,\n} from \"react-hook-form\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Label } from \"@/registry/new-york-v4/ui/label\"\n\nconst Form = FormProvider\n\ntype FormFieldContextValue<\n  TFieldValues extends FieldValues = FieldValues,\n  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,\n> = {\n  name: TName\n}\n\nconst FormFieldContext = React.createContext<FormFieldContextValue>(\n  {} as FormFieldContextValue\n)\n\nconst FormField = <\n  TFieldValues extends FieldValues = FieldValues,\n  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,\n>({\n  ...props\n}: ControllerProps<TFieldValues, TName>) => {\n  return (\n    <FormFieldContext.Provider value={{ name: props.name }}>\n      <Controller {...props} />\n    </FormFieldContext.Provider>\n  )\n}\n\nconst useFormField = () => {\n  const fieldContext = React.useContext(FormFieldContext)\n  const itemContext = React.useContext(FormItemContext)\n  const { getFieldState } = useFormContext()\n  const formState = useFormState({ name: fieldContext.name })\n  const fieldState = getFieldState(fieldContext.name, formState)\n\n  if (!fieldContext) {\n    throw new Error(\"useFormField should be used within <FormField>\")\n  }\n\n  const { id } = itemContext\n\n  return {\n    id,\n    name: fieldContext.name,\n    formItemId: `${id}-form-item`,\n    formDescriptionId: `${id}-form-item-description`,\n    formMessageId: `${id}-form-item-message`,\n    ...fieldState,\n  }\n}\n\ntype FormItemContextValue = {\n  id: string\n}\n\nconst FormItemContext = React.createContext<FormItemContextValue>(\n  {} as FormItemContextValue\n)\n\nfunction FormItem({ className, ...props }: React.ComponentProps<\"div\">) {\n  const id = React.useId()\n\n  return (\n    <FormItemContext.Provider value={{ id }}>\n      <div\n        data-slot=\"form-item\"\n        className={cn(\"grid gap-2\", className)}\n        {...props}\n      />\n    </FormItemContext.Provider>\n  )\n}\n\nfunction FormLabel({\n  className,\n  ...props\n}: React.ComponentProps<typeof LabelPrimitive.Root>) {\n  const { error, formItemId } = useFormField()\n\n  return (\n    <Label\n      data-slot=\"form-label\"\n      data-error={!!error}\n      className={cn(\"data-[error=true]:text-destructive-foreground\", className)}\n      htmlFor={formItemId}\n      {...props}\n    />\n  )\n}\n\nfunction FormControl({ ...props }: React.ComponentProps<typeof Slot>) {\n  const { error, formItemId, formDescriptionId, formMessageId } = useFormField()\n\n  return (\n    <Slot\n      data-slot=\"form-control\"\n      id={formItemId}\n      aria-describedby={\n        !error\n          ? `${formDescriptionId}`\n          : `${formDescriptionId} ${formMessageId}`\n      }\n      aria-invalid={!!error}\n      {...props}\n    />\n  )\n}\n\nfunction FormDescription({ className, ...props }: React.ComponentProps<\"p\">) {\n  const { formDescriptionId } = useFormField()\n\n  return (\n    <p\n      data-slot=\"form-description\"\n      id={formDescriptionId}\n      className={cn(\"text-muted-foreground text-sm\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction FormMessage({ className, ...props }: React.ComponentProps<\"p\">) {\n  const { error, formMessageId } = useFormField()\n  const body = error ? String(error?.message) : props.children\n\n  if (!body) {\n    return null\n  }\n\n  return (\n    <p\n      data-slot=\"form-message\"\n      id={formMessageId}\n      className={cn(\"text-destructive-foreground text-sm\", className)}\n      {...props}\n    >\n      {body}\n    </p>\n  )\n}\n\nexport {\n  useFormField,\n  Form,\n  FormItem,\n  FormLabel,\n  FormControl,\n  FormDescription,\n  FormMessage,\n  FormField,\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as LabelPrimitive from \"@radix-ui/react-label\"\nimport { Slot } from \"@radix-ui/react-slot\"\nimport {\n  Controller,\n  ControllerProps,\n  FieldPath,\n  FieldValues,\n  FormProvider,\n  useFormContext,\n  useFormState,\n} from \"react-hook-form\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Label } from \"@/registry/new-york-v4/ui/label\"\n\nconst Form = FormProvider\n\ntype FormFieldContextValue<\n  TFieldValues extends FieldValues = FieldValues,\n  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,\n> = {\n  name: TName\n}\n\nconst FormFieldContext = React.createContext<FormFieldContextValue>(\n  {} as FormFieldContextValue\n)\n\nconst FormField = <\n  TFieldValues extends FieldValues = FieldValues,\n  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,\n>({\n  ...props\n}: ControllerProps<TFieldValues, TName>) => {\n  return (\n    <FormFieldContext.Provider value={{ name: props.name }}>\n      <Controller {...props} />\n    </FormFieldContext.Provider>\n  )\n}\n\nconst useFormField = () => {\n  const fieldContext = React.useContext(FormFieldContext)\n  const itemContext = React.useContext(FormItemContext)\n  const { getFieldState } = useFormContext()\n  const formState = useFormState({ name: fieldContext.name })\n  const fieldState = getFieldState(fieldContext.name, formState)\n\n  if (!fieldContext) {\n    throw new Error(\"useFormField should be used within <FormField>\")\n  }\n\n  const { id } = itemContext\n\n  return {\n    id,\n    name: fieldContext.name,\n    formItemId: `${id}-form-item`,\n    formDescriptionId: `${id}-form-item-description`,\n    formMessageId: `${id}-form-item-message`,\n    ...fieldState,\n  }\n}\n\ntype FormItemContextValue = {\n  id: string\n}\n\nconst FormItemContext = React.createContext<FormItemContextValue>(\n  {} as FormItemContextValue\n)\n\nfunction FormItem({ className, ...props }: React.ComponentProps<\"div\">) {\n  const id = React.useId()\n\n  return (\n    <FormItemContext.Provider value={{ id }}>\n      <div\n        data-slot=\"form-item\"\n        className={cn(\"grid gap-2\", className)}\n        {...props}\n      />\n    </FormItemContext.Provider>\n  )\n}\n\nfunction FormLabel({\n  className,\n  ...props\n}: React.ComponentProps<typeof LabelPrimitive.Root>) {\n  const { error, formItemId } = useFormField()\n\n  return (\n    <Label\n      data-slot=\"form-label\"\n      data-error={!!error}\n      className={cn(\"data-[error=true]:text-destructive-foreground\", className)}\n      htmlFor={formItemId}\n      {...props}\n    />\n  )\n}\n\nfunction FormControl({ ...props }: React.ComponentProps<typeof Slot>) {\n  const { error, formItemId, formDescriptionId, formMessageId } = useFormField()\n\n  return (\n    <Slot\n      data-slot=\"form-control\"\n      id={formItemId}\n      aria-describedby={\n        !error\n          ? `${formDescriptionId}`\n          : `${formDescriptionId} ${formMessageId}`\n      }\n      aria-invalid={!!error}\n      {...props}\n    />\n  )\n}\n\nfunction FormDescription({ className, ...props }: React.ComponentProps<\"p\">) {\n  const { formDescriptionId } = useFormField()\n\n  return (\n    <p\n      data-slot=\"form-description\"\n      id={formDescriptionId}\n      className={cn(\"text-muted-foreground text-sm\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction FormMessage({ className, ...props }: React.ComponentProps<\"p\">) {\n  const { error, formMessageId } = useFormField()\n  const body = error ? String(error?.message ?? \"\") : props.children\n\n  if (!body) {\n    return null\n  }\n\n  return (\n    <p\n      data-slot=\"form-message\"\n      id={formMessageId}\n      className={cn(\"text-destructive-foreground text-sm\", className)}\n      {...props}\n    >\n      {body}\n    </p>\n  )\n}\n\nexport {\n  useFormField,\n  Form,\n  FormItem,\n  FormLabel,\n  FormControl,\n  FormDescription,\n  FormMessage,\n  FormField,\n}\n",
       "type": "registry:ui"
     }
   ]
diff --git a/apps/www/public/r/styles/new-york-v4/toggle.json b/apps/www/public/r/styles/new-york-v4/toggle.json
index 6f6dffa8ba..4fcebb9517 100644
--- a/apps/www/public/r/styles/new-york-v4/toggle.json
+++ b/apps/www/public/r/styles/new-york-v4/toggle.json
@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "registry/new-york-v4/ui/toggle.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as TogglePrimitive from \"@radix-ui/react-toggle\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst toggleVariants = cva(\n  \"inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium hover:bg-muted hover:text-muted-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] outline-none transition-[color,box-shadow] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-transparent\",\n        outline:\n          \"border border-input bg-transparent shadow-xs hover:bg-accent hover:text-accent-foreground\",\n      },\n      size: {\n        default: \"h-9 px-2 min-w-9\",\n        sm: \"h-8 px-1.5 min-w-8\",\n        lg: \"h-10 px-2.5 min-w-10\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n)\n\nfunction Toggle({\n  className,\n  variant,\n  size,\n  ...props\n}: React.ComponentProps<typeof TogglePrimitive.Root> &\n  VariantProps<typeof toggleVariants>) {\n  return (\n    <TogglePrimitive.Root\n      data-slot=\"toggle\"\n      className={cn(toggleVariants({ variant, size, className }))}\n      {...props}\n    />\n  )\n}\n\nexport { Toggle, toggleVariants }\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as TogglePrimitive from \"@radix-ui/react-toggle\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst toggleVariants = cva(\n  \"inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium hover:bg-muted hover:text-muted-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] outline-none transition-[color,box-shadow] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive whitespace-nowrap\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-transparent\",\n        outline:\n          \"border border-input bg-transparent shadow-xs hover:bg-accent hover:text-accent-foreground\",\n      },\n      size: {\n        default: \"h-9 px-2 min-w-9\",\n        sm: \"h-8 px-1.5 min-w-8\",\n        lg: \"h-10 px-2.5 min-w-10\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n)\n\nfunction Toggle({\n  className,\n  variant,\n  size,\n  ...props\n}: React.ComponentProps<typeof TogglePrimitive.Root> &\n  VariantProps<typeof toggleVariants>) {\n  return (\n    <TogglePrimitive.Root\n      data-slot=\"toggle\"\n      className={cn(toggleVariants({ variant, size, className }))}\n      {...props}\n    />\n  )\n}\n\nexport { Toggle, toggleVariants }\n",
       "type": "registry:ui"
     }
   ]
diff --git a/apps/www/registry/default/ui/sidebar.tsx b/apps/www/registry/default/ui/sidebar.tsx
index b4d892f7f8..6a3d3c0f84 100644
--- a/apps/www/registry/default/ui/sidebar.tsx
+++ b/apps/www/registry/default/ui/sidebar.tsx
@@ -15,6 +15,7 @@ import {
   SheetContent,
   SheetDescription,
   SheetHeader,
+  SheetTitle,
 } from "@/registry/default/ui/sheet"
 import { Skeleton } from "@/registry/default/ui/skeleton"
 import {