chore(release): version packages (#2420 )

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Update models.ts (#2374 )
2026-06-19 05:41:33 +00:00 · 2024-01-14 16:06:43 +04:00 · 2024-01-14 11:27:26 +00:00 · 2024-01-14 15:21:57 +04:00 · 2024-01-07 09:24:23 +00:00 · 2024-01-07 09:23:35 +00:00
35 changed files with 66 additions and 32 deletions
--- a/apps/www/app/examples/authentication/components/user-auth-form.tsx
+++ b/apps/www/app/examples/authentication/components/user-auth-form.tsx
@@ -64,7 +64,7 @@ export function UserAuthForm({ className, ...props }: UserAuthFormProps) {
        ) : (
          <Icons.gitHub className="mr-2 h-4 w-4" />
        )}{" "}
-        Github
+        GitHub
      </Button>
    </div>
  )
--- a/apps/www/app/examples/mail/components/mail-display.tsx
+++ b/apps/www/app/examples/mail/components/mail-display.tsx
@@ -236,7 +236,11 @@ export function MailDisplay({ mail }: MailDisplayProps) {
                    <Switch id="mute" aria-label="Mute thread" /> Mute this
                    thread
                  </Label>
-                  <Button size="sm" className="ml-auto">
+                  <Button
+                    onClick={(e) => e.preventDefault()}
+                    size="sm"
+                    className="ml-auto"
+                  >
                    Send
                  </Button>
                </div>
--- a/apps/www/app/examples/playground/components/preset-actions.tsx
+++ b/apps/www/app/examples/playground/components/preset-actions.tsx
@@ -95,7 +95,7 @@ export function PresetActions() {
      <AlertDialog open={showDeleteDialog} onOpenChange={setShowDeleteDialog}>
        <AlertDialogContent>
          <AlertDialogHeader>
-            <AlertDialogTitle>Are you sure absolutely sure?</AlertDialogTitle>
+            <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
            <AlertDialogDescription>
              This action cannot be undone. This preset will no longer be
              accessible by you or others you&apos;ve shared it with.
--- a/apps/www/app/examples/playground/data/models.ts
+++ b/apps/www/app/examples/playground/data/models.ts
@@ -36,7 +36,7 @@ export const models: Model<ModelType>[] = [
    strengths: "Moderate classification, semantic search",
  },
  {
-    id: " be638fb1-973b-4471-a49c-290325085802",
+    id: "be638fb1-973b-4471-a49c-290325085802",
    name: "text-ada-001",
    description:
      "Capable of very simple tasks, usually the fastest model in the GPT-3 series, and lowest cost.",
--- a/apps/www/content/docs/components/carousel.mdx
+++ b/apps/www/content/docs/components/carousel.mdx
@@ -61,7 +61,7 @@ import {
  CarouselItem,
  CarouselNext,
  CarouselPrevious,
-} from "@/registry/new-york/ui/carousel"
+} from "@/components/ui/carousel"
 ```

 ```tsx
--- a/apps/www/content/docs/components/dialog.mdx
+++ b/apps/www/content/docs/components/dialog.mdx
@@ -66,7 +66,7 @@ import {
  <DialogTrigger>Open</DialogTrigger>
  <DialogContent>
    <DialogHeader>
-      <DialogTitle>Are you sure absolutely sure?</DialogTitle>
+      <DialogTitle>Are you absolutely sure?</DialogTitle>
      <DialogDescription>
        This action cannot be undone. This will permanently delete your account
        and remove your data from our servers.
@@ -103,7 +103,7 @@ To activate the `Dialog` component from within a `Context Menu` or `Dropdown Men
  </ContextMenu>
  <DialogContent>
    <DialogHeader>
-      <DialogTitle>Are you sure absolutely sure?</DialogTitle>
+      <DialogTitle>Are you absolutely sure?</DialogTitle>
      <DialogDescription>
        This action cannot be undone. Are you sure you want to permanently
        delete this file from our servers?
--- a/apps/www/content/docs/components/drawer.mdx
+++ b/apps/www/content/docs/components/drawer.mdx
@@ -70,7 +70,7 @@ import {
  <DrawerTrigger>Open</DrawerTrigger>
  <DrawerContent>
    <DrawerHeader>
-      <DrawerTitle>Are you sure absolutely sure?</DrawerTitle>
+      <DrawerTitle>Are you absolutely sure?</DrawerTitle>
      <DrawerDescription>This action cannot be undone.</DrawerDescription>
    </DrawerHeader>
    <DrawerFooter>
--- a/apps/www/content/docs/components/resizable.mdx
+++ b/apps/www/content/docs/components/resizable.mdx
@@ -110,7 +110,7 @@ import {

 export default function Example() {
  return (
-    <ResizablePanelGroup direction="vertical">
+    <ResizablePanelGroup direction="horizontal">
      <ResizablePanel>One</ResizablePanel>
      <ResizableHandle withHandle />
      <ResizablePanel>Two</ResizablePanel>
--- a/apps/www/content/docs/components/sheet.mdx
+++ b/apps/www/content/docs/components/sheet.mdx
@@ -65,7 +65,7 @@ import {
  <SheetTrigger>Open</SheetTrigger>
  <SheetContent>
    <SheetHeader>
-      <SheetTitle>Are you sure absolutely sure?</SheetTitle>
+      <SheetTitle>Are you absolutely sure?</SheetTitle>
      <SheetDescription>
        This action cannot be undone. This will permanently delete your account
        and remove your data from our servers.
@@ -92,7 +92,7 @@ You can adjust the size of the sheet using CSS classes:
  <SheetTrigger>Open</SheetTrigger>
  <SheetContent className="w-[400px] sm:w-[540px]">
    <SheetHeader>
-      <SheetTitle>Are you sure absolutely sure?</SheetTitle>
+      <SheetTitle>Are you absolutely sure?</SheetTitle>
      <SheetDescription>
        This action cannot be undone. This will permanently delete your account
        and remove your data from our servers.
--- a/apps/www/content/docs/installation/next.mdx
+++ b/apps/www/content/docs/installation/next.mdx
@@ -31,6 +31,7 @@ Which style would you like to use? › Default
 Which color would you like to use as base color? › Slate
 Where is your global CSS file? › › app/globals.css
 Do you want to use CSS variables for colors? › no / yes
+Are you using a custom tailwind prefix eg. tw-? (Leave blank if not) ...
 Where is your tailwind.config.js located? › tailwind.config.js
 Configure the import alias for components: › @/components
 Configure the import alias for utils: › @/lib/utils
--- a/apps/www/public/registry/styles/default/carousel.json
+++ b/apps/www/public/registry/styles/default/carousel.json
--- a/apps/www/public/registry/styles/default/resizable.json
+++ b/apps/www/public/registry/styles/default/resizable.json
@@ -6,7 +6,7 @@
  "files": [
    {
      "name": "resizable.tsx",
-      "content": "import { GripVertical } from \"lucide-react\"\nimport * as ResizablePrimitive from \"react-resizable-panels\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst ResizablePanelGroup = ({\n  className,\n  ...props\n}: React.ComponentProps<typeof ResizablePrimitive.PanelGroup>) => (\n  <ResizablePrimitive.PanelGroup\n    className={cn(\n      \"flex h-full w-full data-[panel-group-direction=vertical]:flex-col\",\n      className\n    )}\n    {...props}\n  />\n)\n\nconst ResizablePanel = ResizablePrimitive.Panel\n\nconst ResizableHandle = ({\n  withHandle,\n  className,\n  ...props\n}: React.ComponentProps<typeof ResizablePrimitive.PanelResizeHandle> & {\n  withHandle?: boolean\n}) => (\n  <ResizablePrimitive.PanelResizeHandle\n    className={cn(\n      \"relative flex w-px items-center justify-center bg-border after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:-translate-y-1/2 data-[panel-group-direction=vertical]:after:translate-x-0 [&[data-panel-group-direction=vertical]>div]:rotate-90\",\n      className\n    )}\n    {...props}\n  >\n    {withHandle && (\n      <div className=\"z-10 flex h-4 w-3 items-center justify-center rounded-sm border bg-border\">\n        <GripVertical className=\"h-2.5 w-2.5\" />\n      </div>\n    )}\n  </ResizablePrimitive.PanelResizeHandle>\n)\n\nexport { ResizablePanelGroup, ResizablePanel, ResizableHandle }\n"
+      "content": "\"use client\"\n\nimport { GripVertical } from \"lucide-react\"\nimport * as ResizablePrimitive from \"react-resizable-panels\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst ResizablePanelGroup = ({\n  className,\n  ...props\n}: React.ComponentProps<typeof ResizablePrimitive.PanelGroup>) => (\n  <ResizablePrimitive.PanelGroup\n    className={cn(\n      \"flex h-full w-full data-[panel-group-direction=vertical]:flex-col\",\n      className\n    )}\n    {...props}\n  />\n)\n\nconst ResizablePanel = ResizablePrimitive.Panel\n\nconst ResizableHandle = ({\n  withHandle,\n  className,\n  ...props\n}: React.ComponentProps<typeof ResizablePrimitive.PanelResizeHandle> & {\n  withHandle?: boolean\n}) => (\n  <ResizablePrimitive.PanelResizeHandle\n    className={cn(\n      \"relative flex w-px items-center justify-center bg-border after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:-translate-y-1/2 data-[panel-group-direction=vertical]:after:translate-x-0 [&[data-panel-group-direction=vertical]>div]:rotate-90\",\n      className\n    )}\n    {...props}\n  >\n    {withHandle && (\n      <div className=\"z-10 flex h-4 w-3 items-center justify-center rounded-sm border bg-border\">\n        <GripVertical className=\"h-2.5 w-2.5\" />\n      </div>\n    )}\n  </ResizablePrimitive.PanelResizeHandle>\n)\n\nexport { ResizablePanelGroup, ResizablePanel, ResizableHandle }\n"
    }
  ],
  "type": "components:ui"
--- a/apps/www/public/registry/styles/new-york/carousel.json
+++ b/apps/www/public/registry/styles/new-york/carousel.json
--- a/apps/www/public/registry/styles/new-york/resizable.json
+++ b/apps/www/public/registry/styles/new-york/resizable.json
@@ -6,7 +6,7 @@
  "files": [
    {
      "name": "resizable.tsx",
-      "content": "import { DragHandleDots2Icon } from \"@radix-ui/react-icons\"\nimport * as ResizablePrimitive from \"react-resizable-panels\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst ResizablePanelGroup = ({\n  className,\n  ...props\n}: React.ComponentProps<typeof ResizablePrimitive.PanelGroup>) => (\n  <ResizablePrimitive.PanelGroup\n    className={cn(\n      \"flex h-full w-full data-[panel-group-direction=vertical]:flex-col\",\n      className\n    )}\n    {...props}\n  />\n)\n\nconst ResizablePanel = ResizablePrimitive.Panel\n\nconst ResizableHandle = ({\n  withHandle,\n  className,\n  ...props\n}: React.ComponentProps<typeof ResizablePrimitive.PanelResizeHandle> & {\n  withHandle?: boolean\n}) => (\n  <ResizablePrimitive.PanelResizeHandle\n    className={cn(\n      \"relative flex w-px items-center justify-center bg-border after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:-translate-y-1/2 data-[panel-group-direction=vertical]:after:translate-x-0 [&[data-panel-group-direction=vertical]>div]:rotate-90\",\n      className\n    )}\n    {...props}\n  >\n    {withHandle && (\n      <div className=\"z-10 flex h-4 w-3 items-center justify-center rounded-sm border bg-border\">\n        <DragHandleDots2Icon className=\"h-2.5 w-2.5\" />\n      </div>\n    )}\n  </ResizablePrimitive.PanelResizeHandle>\n)\n\nexport { ResizablePanelGroup, ResizablePanel, ResizableHandle }\n"
+      "content": "\"use client\"\n\nimport { DragHandleDots2Icon } from \"@radix-ui/react-icons\"\nimport * as ResizablePrimitive from \"react-resizable-panels\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst ResizablePanelGroup = ({\n  className,\n  ...props\n}: React.ComponentProps<typeof ResizablePrimitive.PanelGroup>) => (\n  <ResizablePrimitive.PanelGroup\n    className={cn(\n      \"flex h-full w-full data-[panel-group-direction=vertical]:flex-col\",\n      className\n    )}\n    {...props}\n  />\n)\n\nconst ResizablePanel = ResizablePrimitive.Panel\n\nconst ResizableHandle = ({\n  withHandle,\n  className,\n  ...props\n}: React.ComponentProps<typeof ResizablePrimitive.PanelResizeHandle> & {\n  withHandle?: boolean\n}) => (\n  <ResizablePrimitive.PanelResizeHandle\n    className={cn(\n      \"relative flex w-px items-center justify-center bg-border after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:-translate-y-1/2 data-[panel-group-direction=vertical]:after:translate-x-0 [&[data-panel-group-direction=vertical]>div]:rotate-90\",\n      className\n    )}\n    {...props}\n  >\n    {withHandle && (\n      <div className=\"z-10 flex h-4 w-3 items-center justify-center rounded-sm border bg-border\">\n        <DragHandleDots2Icon className=\"h-2.5 w-2.5\" />\n      </div>\n    )}\n  </ResizablePrimitive.PanelResizeHandle>\n)\n\nexport { ResizablePanelGroup, ResizablePanel, ResizableHandle }\n"
    }
  ],
  "type": "components:ui"
--- a/apps/www/registry/default/example/toggle-demo.tsx
+++ b/apps/www/registry/default/example/toggle-demo.tsx
@@ -4,7 +4,7 @@ import { Toggle } from "@/registry/default/ui/toggle"

 export default function ToggleDemo() {
  return (
-    <Toggle aria-label="Toggle italic">
+    <Toggle aria-label="Toggle bold">
      <Bold className="h-4 w-4" />
    </Toggle>
  )
--- a/apps/www/registry/default/example/toggle-disabled.tsx
+++ b/apps/www/registry/default/example/toggle-disabled.tsx
@@ -4,7 +4,7 @@ import { Toggle } from "@/registry/default/ui/toggle"

 export default function ToggleDisabled() {
  return (
-    <Toggle aria-label="Toggle italic" disabled>
+    <Toggle aria-label="Toggle underline" disabled>
      <Underline className="h-4 w-4" />
    </Toggle>
  )
--- a/apps/www/registry/default/example/toggle-group-demo.tsx
+++ b/apps/www/registry/default/example/toggle-group-demo.tsx
@@ -14,7 +14,7 @@ export default function ToggleGroupDemo() {
      <ToggleGroupItem value="italic" aria-label="Toggle italic">
        <Italic className="h-4 w-4" />
      </ToggleGroupItem>
-      <ToggleGroupItem value="strikethrough" aria-label="Toggle strikethrough">
+      <ToggleGroupItem value="underline" aria-label="Toggle underline">
        <Underline className="h-4 w-4" />
      </ToggleGroupItem>
    </ToggleGroup>
--- a/apps/www/registry/default/example/toggle-group-disabled.tsx
+++ b/apps/www/registry/default/example/toggle-group-disabled.tsx
@@ -14,7 +14,7 @@ export default function ToggleGroupDemo() {
      <ToggleGroupItem value="italic" aria-label="Toggle italic">
        <Italic className="h-4 w-4" />
      </ToggleGroupItem>
-      <ToggleGroupItem value="strikethrough" aria-label="Toggle strikethrough">
+      <ToggleGroupItem value="underline" aria-label="Toggle underline">
        <Underline className="h-4 w-4" />
      </ToggleGroupItem>
    </ToggleGroup>
--- a/apps/www/registry/default/example/toggle-group-lg.tsx
+++ b/apps/www/registry/default/example/toggle-group-lg.tsx
@@ -14,7 +14,7 @@ export default function ToggleGroupDemo() {
      <ToggleGroupItem value="italic" aria-label="Toggle italic">
        <Italic className="h-4 w-4" />
      </ToggleGroupItem>
-      <ToggleGroupItem value="strikethrough" aria-label="Toggle strikethrough">
+      <ToggleGroupItem value="underline" aria-label="Toggle underline">
        <Underline className="h-4 w-4" />
      </ToggleGroupItem>
    </ToggleGroup>
--- a/apps/www/registry/default/example/toggle-group-outline.tsx
+++ b/apps/www/registry/default/example/toggle-group-outline.tsx
@@ -14,7 +14,7 @@ export default function ToggleGroupDemo() {
      <ToggleGroupItem value="italic" aria-label="Toggle italic">
        <Italic className="h-4 w-4" />
      </ToggleGroupItem>
-      <ToggleGroupItem value="strikethrough" aria-label="Toggle strikethrough">
+      <ToggleGroupItem value="underline" aria-label="Toggle underline">
        <Underline className="h-4 w-4" />
      </ToggleGroupItem>
    </ToggleGroup>
--- a/apps/www/registry/default/example/toggle-group-single.tsx
+++ b/apps/www/registry/default/example/toggle-group-single.tsx
@@ -14,7 +14,7 @@ export default function ToggleGroupDemo() {
      <ToggleGroupItem value="italic" aria-label="Toggle italic">
        <Italic className="h-4 w-4" />
      </ToggleGroupItem>
-      <ToggleGroupItem value="strikethrough" aria-label="Toggle strikethrough">
+      <ToggleGroupItem value="underline" aria-label="Toggle underline">
        <Underline className="h-4 w-4" />
      </ToggleGroupItem>
    </ToggleGroup>
--- a/apps/www/registry/default/example/toggle-group-sm.tsx
+++ b/apps/www/registry/default/example/toggle-group-sm.tsx
@@ -14,7 +14,7 @@ export default function ToggleGroupDemo() {
      <ToggleGroupItem value="italic" aria-label="Toggle italic">
        <Italic className="h-4 w-4" />
      </ToggleGroupItem>
-      <ToggleGroupItem value="strikethrough" aria-label="Toggle strikethrough">
+      <ToggleGroupItem value="underline" aria-label="Toggle underline">
        <Underline className="h-4 w-4" />
      </ToggleGroupItem>
    </ToggleGroup>
--- a/apps/www/registry/default/example/typography-large.tsx
+++ b/apps/www/registry/default/example/typography-large.tsx
@@ -1,5 +1,3 @@
 export default function TypographyLarge() {
-  return (
-    <div className="text-lg font-semibold">Are you sure absolutely sure?</div>
-  )
+  return <div className="text-lg font-semibold">Are you absolutely sure?</div>
 }
--- a/apps/www/registry/default/ui/carousel.tsx
+++ b/apps/www/registry/default/ui/carousel.tsx
@@ -1,3 +1,5 @@
+"use client"
+
 import * as React from "react"
 import useEmblaCarousel, {
  type EmblaCarouselType as CarouselApi,
--- a/apps/www/registry/default/ui/resizable.tsx
+++ b/apps/www/registry/default/ui/resizable.tsx
@@ -1,3 +1,5 @@
+"use client"
+
 import { GripVertical } from "lucide-react"
 import * as ResizablePrimitive from "react-resizable-panels"

--- a/apps/www/registry/new-york/example/cards/create-account.tsx
+++ b/apps/www/registry/new-york/example/cards/create-account.tsx
@@ -26,7 +26,7 @@ export function CardsCreateAccount() {
        <div className="grid grid-cols-2 gap-6">
          <Button variant="outline">
            <Icons.gitHub className="mr-2 h-4 w-4" />
-            Github
+            GitHub
          </Button>
          <Button variant="outline">
            <Icons.google className="mr-2 h-4 w-4" />
--- a/apps/www/registry/new-york/example/typography-large.tsx
+++ b/apps/www/registry/new-york/example/typography-large.tsx
@@ -1,5 +1,3 @@
 export default function TypographyLarge() {
-  return (
-    <div className="text-lg font-semibold">Are you sure absolutely sure?</div>
-  )
+  return <div className="text-lg font-semibold">Are you absolutely sure?</div>
 }
--- a/apps/www/registry/new-york/ui/carousel.tsx
+++ b/apps/www/registry/new-york/ui/carousel.tsx
@@ -1,3 +1,5 @@
+"use client"
+
 import * as React from "react"
 import { ArrowLeftIcon, ArrowRightIcon } from "@radix-ui/react-icons"
 import useEmblaCarousel, {
--- a/apps/www/registry/new-york/ui/resizable.tsx
+++ b/apps/www/registry/new-york/ui/resizable.tsx
@@ -1,3 +1,5 @@
+"use client"
+
 import { DragHandleDots2Icon } from "@radix-ui/react-icons"
 import * as ResizablePrimitive from "react-resizable-panels"

--- a/apps/www/registry/registry.ts
+++ b/apps/www/registry/registry.ts
@@ -60,6 +60,7 @@ const ui: Registry = [
    files: ["ui/carousel.tsx"],
    registryDependencies: ["button"],
    dependencies: ["embla-carousel-react"],
+    devDependencies: ["embla-carousel"],
  },
  {
    name: "checkbox",
--- a/apps/www/registry/schema.ts
+++ b/apps/www/registry/schema.ts
@@ -4,6 +4,7 @@ export const registrySchema = z.array(
  z.object({
    name: z.string(),
    dependencies: z.array(z.string()).optional(),
+    devDependencies: z.array(z.string()).optional(),
    registryDependencies: z.array(z.string()).optional(),
    files: z.array(z.string()),
    type: z.enum([
--- a/packages/cli/CHANGELOG.md
+++ b/packages/cli/CHANGELOG.md
@@ -1,5 +1,11 @@
 # @shadcn/ui

+## 0.7.0
+
+### Minor Changes
+
+- [#2419](https://github.com/shadcn-ui/ui/pull/2419) [`7640ef7`](https://github.com/shadcn-ui/ui/commit/7640ef7bbc5fea280a8b5227a2455bb840478573) Thanks [@shadcn](https://github.com/shadcn)! - add support for devDependencies
+
 ## 0.6.0

 ### Minor Changes
--- a/packages/cli/package.json
+++ b/packages/cli/package.json
@@ -1,6 +1,6 @@
 {
  "name": "shadcn-ui",
-  "version": "0.6.0",
+  "version": "0.7.0",
  "description": "Add components to your apps.",
  "publishConfig": {
    "access": "public"
--- a/packages/cli/src/commands/add.ts
+++ b/packages/cli/src/commands/add.ts
@@ -180,9 +180,10 @@ export const add = new Command()
          await fs.writeFile(filePath, content)
        }

+        const packageManager = await getPackageManager(cwd)
+
        // Install dependencies.
        if (item.dependencies?.length) {
-          const packageManager = await getPackageManager(cwd)
          await execa(
            packageManager,
            [
@@ -194,6 +195,21 @@ export const add = new Command()
            }
          )
        }
+
+        // Install devDependencies.
+        if (item.devDependencies?.length) {
+          await execa(
+            packageManager,
+            [
+              packageManager === "npm" ? "install" : "add",
+              "-D",
+              ...item.devDependencies,
+            ],
+            {
+              cwd,
+            }
+          )
+        }
      }
      spinner.succeed(`Done.`)
    } catch (error) {
--- a/packages/cli/src/utils/registry/schema.ts
+++ b/packages/cli/src/utils/registry/schema.ts
@@ -4,6 +4,7 @@ import * as z from "zod"
 export const registryItemSchema = z.object({
  name: z.string(),
  dependencies: z.array(z.string()).optional(),
+  devDependencies: z.array(z.string()).optional(),
  registryDependencies: z.array(z.string()).optional(),
  files: z.array(z.string()),
  type: z.enum(["components:ui", "components:component", "components:example"]),
Author	SHA1	Message	Date
github-actions[bot]	59b2cc8142	chore(release): version packages (#2420 ) Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>	2024-01-14 16:06:43 +04:00
Vulcan-Coder	0e721be8dd	Update models.ts (#2374 ) Fixed the space at the start of the UUID	2024-01-14 11:27:26 +00:00
shadcn	7640ef7bbc	feat: add support for adding devDependencies in the cli (#2419 ) * feat(cli): add support for install devDependencies * chore: add changeset	2024-01-14 15:21:57 +04:00
김태강	8f3b28f50f	feat(components): add "use client" directive to carousel, resizable component (#2319 ) [Reopen a PR that was accidentally closed.](https://github.com/shadcn-ui/ui/pull/2233) carousel, resizable components to be used by the app router, a "use client" directive is required.	2024-01-07 09:24:23 +00:00
vinay	73be841162	[Docs] Update CLI options while configuring `components.json` (#2283 ) New Line added to the docs. Just for the consistency. ![image](https://github.com/shadcn-ui/ui/assets/94120295/e0da71c1-72d1-4e5d-bba9-54634a9d0e31)	2024-01-07 09:23:35 +00:00
Nuriman Quddus	ad32fdeb7d	fix: typo on carousel import (#2216 ) # What's changed - [x] Fixed the typo on carousel component before fix: "@/registry/new-york/ui/carousel" after fix: "@/components/ui/carousel" this is ease the user to copy paste without error	2024-01-07 08:04:54 +00:00
Clarence	2dd7864007	fix: Github case correction (#2268 )	2024-01-07 07:59:20 +00:00
Andrew Qiao	5d37bae1b8	fix(www): incorrect toggle aria labels and values (#2163 ) - some `Toggle` and `ToggleGroup` demos had incorrect `aria-label` or `value` props	2024-01-07 07:49:26 +00:00
Chase	4b59cb812e	fix(docs): Resizable panel direction should be horizontal (#2295 ) In the [resizable documentation](https://ui.shadcn.com/docs/components/resizable) the handle example shows a horizontal handle but the code example has `direction="vertical"` when it should be `direction="horizontal"` <img width="745" alt="Screenshot 2024-01-05 at 9 34 43 AM" src="https://github.com/shadcn-ui/ui/assets/7241069/68c21241-e0c7-41b1-81d7-579306149520">	2024-01-07 07:43:51 +00:00
Anshul Kanwar	4b200ebf59	docs: typo in drawer, dialog and sheet (#2306 )	2024-01-07 07:26:21 +00:00
Tilak Thapa	33795426dd	Fix: Add e.preventDefault() to prevent page reload (#2278 ) Fixes #2277 Add `e.preventDefault()` to prevent page reload in mail component ![image](https://github.com/shadcn-ui/ui/assets/106688422/d1373e8f-0c46-4f2e-8caf-2fcd2076b2fb)	2024-01-07 07:17:47 +00:00