feat(cli): add css updates

fix(carousel): adjust types for embla-carousel-react@8 (#2326 )
Fixes #2322 , #2281 Thanks to @akynau & @nianiam
2026-06-11 09:51:40 +00:00 · 2024-01-18 21:06:20 +04:00 · 2024-01-18 07:22:45 +00:00 · 2024-01-18 11:08:25 +04:00 · 2024-01-18 10:58:22 +04:00 · 2024-01-16 23:56:19 +04:00
118 changed files with 12835 additions and 91 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/next.config.mjs
+++ b/apps/www/next.config.mjs
@@ -5,7 +5,16 @@ const nextConfig = {
  reactStrictMode: true,
  swcMinify: true,
  images: {
-    domains: ["avatars.githubusercontent.com", "images.unsplash.com"],
+    remotePatterns: [
+      {
+        protocol: "https",
+        hostname: "avatars.githubusercontent.com",
+      },
+      {
+        protocol: "https",
+        hostname: "images.unsplash.com",
+      },
+    ],
  },
  redirects() {
    return [
--- 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/pagination.json
+++ b/apps/www/public/registry/styles/default/pagination.json
@@ -6,7 +6,7 @@
  "files": [
    {
      "name": "pagination.tsx",
-      "content": "import * as React from \"react\"\nimport { ChevronLeft, ChevronRight, MoreHorizontal } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\nimport { ButtonProps, buttonVariants } from \"@/registry/default/ui/button\"\n\nconst Pagination = ({ className, ...props }: React.ComponentProps<\"nav\">) => (\n  <nav\n    role=\"navigation\"\n    aria-label=\"pagination\"\n    className={cn(\"mx-auto flex w-full justify-center\", className)}\n    {...props}\n  />\n)\n\nconst PaginationContent = React.forwardRef<\n  HTMLUListElement,\n  React.ComponentProps<\"ul\">\n>(({ className, ...props }, ref) => (\n  <ul\n    ref={ref}\n    className={cn(\"flex flex-row items-center gap-1\", className)}\n    {...props}\n  />\n))\nPaginationContent.displayName = \"PaginationContent\"\n\nconst PaginationItem = React.forwardRef<\n  HTMLLIElement,\n  React.ComponentProps<\"li\">\n>(({ className, ...props }, ref) => (\n  <li ref={ref} className={cn(\"\", className)} {...props} />\n))\nPaginationItem.displayName = \"PaginationItem\"\n\ntype PaginationLinkProps = {\n  isActive?: boolean\n} & Pick<ButtonProps, \"size\"> &\n  React.ComponentProps<\"a\">\n\nconst PaginationLink = ({\n  className,\n  isActive,\n  size = \"icon\",\n  ...props\n}: PaginationLinkProps) => (\n  <PaginationItem>\n    <a\n      aria-current={isActive ? \"page\" : undefined}\n      className={cn(\n        buttonVariants({\n          variant: isActive ? \"outline\" : \"ghost\",\n          size,\n        }),\n        className\n      )}\n      {...props}\n    />\n  </PaginationItem>\n)\nPaginationLink.displayName = \"PaginationLink\"\n\nconst PaginationPrevious = ({\n  className,\n  ...props\n}: React.ComponentProps<typeof PaginationLink>) => (\n  <PaginationLink\n    aria-label=\"Go to previous page\"\n    size=\"default\"\n    className={cn(\"gap-1 pl-2.5\", className)}\n    {...props}\n  >\n    <ChevronLeft className=\"h-4 w-4\" />\n    <span>Previous</span>\n  </PaginationLink>\n)\nPaginationPrevious.displayName = \"PaginationPrevious\"\n\nconst PaginationNext = ({\n  className,\n  ...props\n}: React.ComponentProps<typeof PaginationLink>) => (\n  <PaginationLink\n    aria-label=\"Go to next page\"\n    size=\"default\"\n    className={cn(\"gap-1 pr-2.5\", className)}\n    {...props}\n  >\n    <span>Next</span>\n    <ChevronRight className=\"h-4 w-4\" />\n  </PaginationLink>\n)\n\nconst PaginationEllipsis = ({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) => (\n  <span\n    aria-hidden\n    className={cn(\"flex h-9 w-9 items-center justify-center\", className)}\n    {...props}\n  >\n    <MoreHorizontal className=\"h-4 w-4\" />\n    <span className=\"sr-only\">More pages</span>\n  </span>\n)\n\nexport {\n  Pagination,\n  PaginationContent,\n  PaginationEllipsis,\n  PaginationItem,\n  PaginationLink,\n  PaginationNext,\n  PaginationPrevious,\n}\n"
+      "content": "import * as React from \"react\"\nimport { ChevronLeft, ChevronRight, MoreHorizontal } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\nimport { ButtonProps, buttonVariants } from \"@/registry/default/ui/button\"\n\nconst Pagination = ({ className, ...props }: React.ComponentProps<\"nav\">) => (\n  <nav\n    role=\"navigation\"\n    aria-label=\"pagination\"\n    className={cn(\"mx-auto flex w-full justify-center\", className)}\n    {...props}\n  />\n)\nPagination.displayName = \"Pagination\"\n\nconst PaginationContent = React.forwardRef<\n  HTMLUListElement,\n  React.ComponentProps<\"ul\">\n>(({ className, ...props }, ref) => (\n  <ul\n    ref={ref}\n    className={cn(\"flex flex-row items-center gap-1\", className)}\n    {...props}\n  />\n))\nPaginationContent.displayName = \"PaginationContent\"\n\nconst PaginationItem = React.forwardRef<\n  HTMLLIElement,\n  React.ComponentProps<\"li\">\n>(({ className, ...props }, ref) => (\n  <li ref={ref} className={cn(\"\", className)} {...props} />\n))\nPaginationItem.displayName = \"PaginationItem\"\n\ntype PaginationLinkProps = {\n  isActive?: boolean\n} & Pick<ButtonProps, \"size\"> &\n  React.ComponentProps<\"a\">\n\nconst PaginationLink = ({\n  className,\n  isActive,\n  size = \"icon\",\n  ...props\n}: PaginationLinkProps) => (\n  <a\n    aria-current={isActive ? \"page\" : undefined}\n    className={cn(\n      buttonVariants({\n        variant: isActive ? \"outline\" : \"ghost\",\n        size,\n      }),\n      className\n    )}\n    {...props}\n  />\n)\nPaginationLink.displayName = \"PaginationLink\"\n\nconst PaginationPrevious = ({\n  className,\n  ...props\n}: React.ComponentProps<typeof PaginationLink>) => (\n  <PaginationLink\n    aria-label=\"Go to previous page\"\n    size=\"default\"\n    className={cn(\"gap-1 pl-2.5\", className)}\n    {...props}\n  >\n    <ChevronLeft className=\"h-4 w-4\" />\n    <span>Previous</span>\n  </PaginationLink>\n)\nPaginationPrevious.displayName = \"PaginationPrevious\"\n\nconst PaginationNext = ({\n  className,\n  ...props\n}: React.ComponentProps<typeof PaginationLink>) => (\n  <PaginationLink\n    aria-label=\"Go to next page\"\n    size=\"default\"\n    className={cn(\"gap-1 pr-2.5\", className)}\n    {...props}\n  >\n    <span>Next</span>\n    <ChevronRight className=\"h-4 w-4\" />\n  </PaginationLink>\n)\nPaginationNext.displayName = \"PaginationNext\"\n\nconst PaginationEllipsis = ({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) => (\n  <span\n    aria-hidden\n    className={cn(\"flex h-9 w-9 items-center justify-center\", className)}\n    {...props}\n  >\n    <MoreHorizontal className=\"h-4 w-4\" />\n    <span className=\"sr-only\">More pages</span>\n  </span>\n)\nPaginationEllipsis.displayName = \"PaginationEllipsis\"\n\nexport {\n  Pagination,\n  PaginationContent,\n  PaginationEllipsis,\n  PaginationItem,\n  PaginationLink,\n  PaginationNext,\n  PaginationPrevious,\n}\n"
    }
  ],
  "type": "components:ui"
--- 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/pagination.json
+++ b/apps/www/public/registry/styles/new-york/pagination.json
@@ -6,7 +6,7 @@
  "files": [
    {
      "name": "pagination.tsx",
-      "content": "import * as React from \"react\"\nimport {\n  ChevronLeftIcon,\n  ChevronRightIcon,\n  DotsHorizontalIcon,\n} from \"@radix-ui/react-icons\"\n\nimport { cn } from \"@/lib/utils\"\nimport { ButtonProps, buttonVariants } from \"@/registry/new-york/ui/button\"\n\nconst Pagination = ({ className, ...props }: React.ComponentProps<\"nav\">) => (\n  <nav\n    role=\"navigation\"\n    aria-label=\"pagination\"\n    className={cn(\"mx-auto flex w-full justify-center\", className)}\n    {...props}\n  />\n)\n\nconst PaginationContent = React.forwardRef<\n  HTMLUListElement,\n  React.ComponentProps<\"ul\">\n>(({ className, ...props }, ref) => (\n  <ul\n    ref={ref}\n    className={cn(\"flex flex-row items-center gap-1\", className)}\n    {...props}\n  />\n))\nPaginationContent.displayName = \"PaginationContent\"\n\nconst PaginationItem = React.forwardRef<\n  HTMLLIElement,\n  React.ComponentProps<\"li\">\n>(({ className, ...props }, ref) => (\n  <li ref={ref} className={cn(\"\", className)} {...props} />\n))\nPaginationItem.displayName = \"PaginationItem\"\n\ntype PaginationLinkProps = {\n  isActive?: boolean\n} & Pick<ButtonProps, \"size\"> &\n  React.ComponentProps<\"a\">\n\nconst PaginationLink = ({\n  className,\n  isActive,\n  size = \"icon\",\n  ...props\n}: PaginationLinkProps) => (\n  <PaginationItem>\n    <a\n      aria-current={isActive ? \"page\" : undefined}\n      className={cn(\n        buttonVariants({\n          variant: isActive ? \"outline\" : \"ghost\",\n          size,\n        }),\n        className\n      )}\n      {...props}\n    />\n  </PaginationItem>\n)\nPaginationLink.displayName = \"PaginationLink\"\n\nconst PaginationPrevious = ({\n  className,\n  ...props\n}: React.ComponentProps<typeof PaginationLink>) => (\n  <PaginationLink\n    aria-label=\"Go to previous page\"\n    size=\"default\"\n    className={cn(\"gap-1 pl-2.5\", className)}\n    {...props}\n  >\n    <ChevronLeftIcon className=\"h-4 w-4\" />\n    <span>Previous</span>\n  </PaginationLink>\n)\nPaginationPrevious.displayName = \"PaginationPrevious\"\n\nconst PaginationNext = ({\n  className,\n  ...props\n}: React.ComponentProps<typeof PaginationLink>) => (\n  <PaginationLink\n    aria-label=\"Go to next page\"\n    size=\"default\"\n    className={cn(\"gap-1 pr-2.5\", className)}\n    {...props}\n  >\n    <span>Next</span>\n    <ChevronRightIcon className=\"h-4 w-4\" />\n  </PaginationLink>\n)\n\nconst PaginationEllipsis = ({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) => (\n  <span\n    aria-hidden\n    className={cn(\"flex h-9 w-9 items-center justify-center\", className)}\n    {...props}\n  >\n    <DotsHorizontalIcon className=\"h-4 w-4\" />\n    <span className=\"sr-only\">More pages</span>\n  </span>\n)\n\nexport {\n  Pagination,\n  PaginationContent,\n  PaginationLink,\n  PaginationItem,\n  PaginationPrevious,\n  PaginationNext,\n  PaginationEllipsis,\n}\n"
+      "content": "import * as React from \"react\"\nimport {\n  ChevronLeftIcon,\n  ChevronRightIcon,\n  DotsHorizontalIcon,\n} from \"@radix-ui/react-icons\"\n\nimport { cn } from \"@/lib/utils\"\nimport { ButtonProps, buttonVariants } from \"@/registry/new-york/ui/button\"\n\nconst Pagination = ({ className, ...props }: React.ComponentProps<\"nav\">) => (\n  <nav\n    role=\"navigation\"\n    aria-label=\"pagination\"\n    className={cn(\"mx-auto flex w-full justify-center\", className)}\n    {...props}\n  />\n)\nPagination.displayName = \"Pagination\"\n\nconst PaginationContent = React.forwardRef<\n  HTMLUListElement,\n  React.ComponentProps<\"ul\">\n>(({ className, ...props }, ref) => (\n  <ul\n    ref={ref}\n    className={cn(\"flex flex-row items-center gap-1\", className)}\n    {...props}\n  />\n))\nPaginationContent.displayName = \"PaginationContent\"\n\nconst PaginationItem = React.forwardRef<\n  HTMLLIElement,\n  React.ComponentProps<\"li\">\n>(({ className, ...props }, ref) => (\n  <li ref={ref} className={cn(\"\", className)} {...props} />\n))\nPaginationItem.displayName = \"PaginationItem\"\n\ntype PaginationLinkProps = {\n  isActive?: boolean\n} & Pick<ButtonProps, \"size\"> &\n  React.ComponentProps<\"a\">\n\nconst PaginationLink = ({\n  className,\n  isActive,\n  size = \"icon\",\n  ...props\n}: PaginationLinkProps) => (\n  <a\n    aria-current={isActive ? \"page\" : undefined}\n    className={cn(\n      buttonVariants({\n        variant: isActive ? \"outline\" : \"ghost\",\n        size,\n      }),\n      className\n    )}\n    {...props}\n  />\n)\nPaginationLink.displayName = \"PaginationLink\"\n\nconst PaginationPrevious = ({\n  className,\n  ...props\n}: React.ComponentProps<typeof PaginationLink>) => (\n  <PaginationLink\n    aria-label=\"Go to previous page\"\n    size=\"default\"\n    className={cn(\"gap-1 pl-2.5\", className)}\n    {...props}\n  >\n    <ChevronLeftIcon className=\"h-4 w-4\" />\n    <span>Previous</span>\n  </PaginationLink>\n)\nPaginationPrevious.displayName = \"PaginationPrevious\"\n\nconst PaginationNext = ({\n  className,\n  ...props\n}: React.ComponentProps<typeof PaginationLink>) => (\n  <PaginationLink\n    aria-label=\"Go to next page\"\n    size=\"default\"\n    className={cn(\"gap-1 pr-2.5\", className)}\n    {...props}\n  >\n    <span>Next</span>\n    <ChevronRightIcon className=\"h-4 w-4\" />\n  </PaginationLink>\n)\nPaginationNext.displayName = \"PaginationNext\"\n\nconst PaginationEllipsis = ({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) => (\n  <span\n    aria-hidden\n    className={cn(\"flex h-9 w-9 items-center justify-center\", className)}\n    {...props}\n  >\n    <DotsHorizontalIcon className=\"h-4 w-4\" />\n    <span className=\"sr-only\">More pages</span>\n  </span>\n)\nPaginationEllipsis.displayName = \"PaginationEllipsis\"\n\nexport {\n  Pagination,\n  PaginationContent,\n  PaginationLink,\n  PaginationItem,\n  PaginationPrevious,\n  PaginationNext,\n  PaginationEllipsis,\n}\n"
    }
  ],
  "type": "components:ui"
--- 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,17 +1,22 @@
+"use client"
+
 import * as React from "react"
 import useEmblaCarousel, {
-  type EmblaCarouselType as CarouselApi,
-  type EmblaOptionsType as CarouselOptions,
-  type EmblaPluginType as CarouselPlugin,
+  type UseEmblaCarouselType,
 } from "embla-carousel-react"
 import { ArrowLeft, ArrowRight } from "lucide-react"

 import { cn } from "@/lib/utils"
 import { Button } from "@/registry/default/ui/button"

+type CarouselApi = UseEmblaCarouselType[1]
+type UseCarouselParameters = Parameters<typeof useEmblaCarousel>
+type CarouselOptions = UseCarouselParameters[0]
+type CarouselPlugin = UseCarouselParameters[1]
+
 type CarouselProps = {
  opts?: CarouselOptions
-  plugins?: CarouselPlugin[]
+  plugins?: CarouselPlugin
  orientation?: "horizontal" | "vertical"
  setApi?: (api: CarouselApi) => void
 }
--- a/apps/www/registry/default/ui/pagination.tsx
+++ b/apps/www/registry/default/ui/pagination.tsx
@@ -12,6 +12,7 @@ const Pagination = ({ className, ...props }: React.ComponentProps<"nav">) => (
    {...props}
  />
 )
+Pagination.displayName = "Pagination"

 const PaginationContent = React.forwardRef<
  HTMLUListElement,
@@ -44,19 +45,17 @@ const PaginationLink = ({
  size = "icon",
  ...props
 }: PaginationLinkProps) => (
-  <PaginationItem>
-    <a
-      aria-current={isActive ? "page" : undefined}
-      className={cn(
-        buttonVariants({
-          variant: isActive ? "outline" : "ghost",
-          size,
-        }),
-        className
-      )}
-      {...props}
-    />
-  </PaginationItem>
+  <a
+    aria-current={isActive ? "page" : undefined}
+    className={cn(
+      buttonVariants({
+        variant: isActive ? "outline" : "ghost",
+        size,
+      }),
+      className
+    )}
+    {...props}
+  />
 )
 PaginationLink.displayName = "PaginationLink"

@@ -90,6 +89,7 @@ const PaginationNext = ({
    <ChevronRight className="h-4 w-4" />
  </PaginationLink>
 )
+PaginationNext.displayName = "PaginationNext"

 const PaginationEllipsis = ({
  className,
@@ -104,6 +104,7 @@ const PaginationEllipsis = ({
    <span className="sr-only">More pages</span>
  </span>
 )
+PaginationEllipsis.displayName = "PaginationEllipsis"

 export {
  Pagination,
--- 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,17 +1,22 @@
+"use client"
+
 import * as React from "react"
 import { ArrowLeftIcon, ArrowRightIcon } from "@radix-ui/react-icons"
 import useEmblaCarousel, {
-  type EmblaCarouselType as CarouselApi,
-  type EmblaOptionsType as CarouselOptions,
-  type EmblaPluginType as CarouselPlugin,
+  type UseEmblaCarouselType,
 } from "embla-carousel-react"

 import { cn } from "@/lib/utils"
 import { Button } from "@/registry/new-york/ui/button"

+type CarouselApi = UseEmblaCarouselType[1]
+type UseCarouselParameters = Parameters<typeof useEmblaCarousel>
+type CarouselOptions = UseCarouselParameters[0]
+type CarouselPlugin = UseCarouselParameters[1]
+
 type CarouselProps = {
  opts?: CarouselOptions
-  plugins?: CarouselPlugin[]
+  plugins?: CarouselPlugin
  orientation?: "horizontal" | "vertical"
  setApi?: (api: CarouselApi) => void
 }
--- a/apps/www/registry/new-york/ui/pagination.tsx
+++ b/apps/www/registry/new-york/ui/pagination.tsx
@@ -16,6 +16,7 @@ const Pagination = ({ className, ...props }: React.ComponentProps<"nav">) => (
    {...props}
  />
 )
+Pagination.displayName = "Pagination"

 const PaginationContent = React.forwardRef<
  HTMLUListElement,
@@ -48,19 +49,17 @@ const PaginationLink = ({
  size = "icon",
  ...props
 }: PaginationLinkProps) => (
-  <PaginationItem>
-    <a
-      aria-current={isActive ? "page" : undefined}
-      className={cn(
-        buttonVariants({
-          variant: isActive ? "outline" : "ghost",
-          size,
-        }),
-        className
-      )}
-      {...props}
-    />
-  </PaginationItem>
+  <a
+    aria-current={isActive ? "page" : undefined}
+    className={cn(
+      buttonVariants({
+        variant: isActive ? "outline" : "ghost",
+        size,
+      }),
+      className
+    )}
+    {...props}
+  />
 )
 PaginationLink.displayName = "PaginationLink"

@@ -94,6 +93,7 @@ const PaginationNext = ({
    <ChevronRightIcon className="h-4 w-4" />
  </PaginationLink>
 )
+PaginationNext.displayName = "PaginationNext"

 const PaginationEllipsis = ({
  className,
@@ -108,6 +108,7 @@ const PaginationEllipsis = ({
    <span className="sr-only">More pages</span>
  </span>
 )
+PaginationEllipsis.displayName = "PaginationEllipsis"

 export {
  Pagination,
--- 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/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/package.json
+++ b/package.json
@@ -18,8 +18,9 @@
    "build:cli": "turbo --filter=shadcn-ui build",
    "build:registry": "pnpm --filter=www build:registry",
    "dev": "turbo run dev --parallel",
-    "dev:cli": "turbo --filter=shadcn-ui dev",
-    "start:cli": "pnpm --filter=shadcn-ui start:dev",
+    "cli:dev": "turbo --filter=shadcn-ui dev",
+    "cli:start": "pnpm --filter=shadcn-ui start:dev",
+    "www:dev": "pnpm --filter=www dev",
    "lint": "turbo run lint",
    "lint:fix": "turbo run lint:fix",
    "preview": "turbo run preview",
--- a/packages/cli/CHANGELOG.md
+++ b/packages/cli/CHANGELOG.md
@@ -1,5 +1,17 @@
 # @shadcn/ui

+## 0.8.0
+
+### Minor Changes
+
+- [#2454](https://github.com/shadcn-ui/ui/pull/2454) [`0374ba8`](https://github.com/shadcn-ui/ui/commit/0374ba874d1c76ae08660c655aea6cdf7a7817f6) Thanks [@shadcn](https://github.com/shadcn)! - add automatic config detection for Next.js
+
+## 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.8.0",
  "description": "Add components to your apps.",
  "publishConfig": {
    "access": "public"
@@ -53,6 +53,7 @@
    "cosmiconfig": "^8.1.3",
    "diff": "^5.1.0",
    "execa": "^7.0.0",
+    "fast-glob": "^3.3.2",
    "fs-extra": "^11.1.0",
    "https-proxy-agent": "^6.2.0",
    "lodash.template": "^4.5.0",
--- 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/commands/init.ts
+++ b/packages/cli/src/commands/init.ts
@@ -1,5 +1,6 @@
 import { existsSync, promises as fs } from "fs"
 import path from "path"
+import { applyCSSUpdates } from "@/src/utils/css"
 import {
  DEFAULT_COMPONENTS,
  DEFAULT_TAILWIND_CONFIG,
@@ -11,6 +12,7 @@ import {
  type Config,
 } from "@/src/utils/get-config"
 import { getPackageManager } from "@/src/utils/get-package-manager"
+import { getProjectConfig, preFlight } from "@/src/utils/get-project-info"
 import { handleError } from "@/src/utils/handle-error"
 import { logger } from "@/src/utils/logger"
 import {
@@ -39,12 +41,14 @@ const PROJECT_DEPENDENCIES = [
 const initOptionsSchema = z.object({
  cwd: z.string(),
  yes: z.boolean(),
+  defaults: z.boolean(),
 })

 export const init = new Command()
  .name("init")
  .description("initialize your project and install dependencies")
  .option("-y, --yes", "skip confirmation prompt.", false)
+  .option("-d, --defaults,", "use default configuration.", false)
  .option(
    "-c, --cwd <cwd>",
    "the working directory. defaults to the current directory.",
@@ -61,15 +65,28 @@ export const init = new Command()
        process.exit(1)
      }

-      // Read config.
-      const existingConfig = await getConfig(cwd)
-      const config = await promptForConfig(cwd, existingConfig, options.yes)
+      preFlight(cwd)

-      await runInit(cwd, config)
+      const projectConfig = await getProjectConfig(cwd)
+      if (projectConfig) {
+        const config = await promptForMinimalConfig(
+          cwd,
+          projectConfig,
+          opts.defaults
+        )
+        await runInit(cwd, config)
+      } else {
+        // Read config.
+        const existingConfig = await getConfig(cwd)
+        const config = await promptForConfig(cwd, existingConfig, options.yes)
+        await runInit(cwd, config)
+      }

      logger.info("")
      logger.info(
-        `${chalk.green("Success!")} Project initialization completed.`
+        `${chalk.green(
+          "Success!"
+        )} Project initialization completed. You may now add components.`
      )
      logger.info("")
    } catch (error) {
@@ -213,6 +230,81 @@ export async function promptForConfig(
  return await resolveConfigPaths(cwd, config)
 }

+export async function promptForMinimalConfig(
+  cwd: string,
+  defaultConfig: Config,
+  defaults = false
+) {
+  const highlight = (text: string) => chalk.cyan(text)
+  let style = defaultConfig.style
+  let baseColor = defaultConfig.tailwind.baseColor
+  let cssVariables = defaultConfig.tailwind.cssVariables
+
+  if (!defaults) {
+    const styles = await getRegistryStyles()
+    const baseColors = await getRegistryBaseColors()
+
+    const options = await prompts([
+      {
+        type: "select",
+        name: "style",
+        message: `Which ${highlight("style")} would you like to use?`,
+        choices: styles.map((style) => ({
+          title: style.label,
+          value: style.name,
+        })),
+      },
+      {
+        type: "select",
+        name: "tailwindBaseColor",
+        message: `Which color would you like to use as ${highlight(
+          "base color"
+        )}?`,
+        choices: baseColors.map((color) => ({
+          title: color.label,
+          value: color.name,
+        })),
+      },
+      {
+        type: "toggle",
+        name: "tailwindCssVariables",
+        message: `Would you like to use ${highlight(
+          "CSS variables"
+        )} for colors?`,
+        initial: defaultConfig?.tailwind.cssVariables,
+        active: "yes",
+        inactive: "no",
+      },
+    ])
+
+    style = options.style
+    baseColor = options.tailwindBaseColor
+    cssVariables = options.tailwindCssVariables
+  }
+
+  const config = rawConfigSchema.parse({
+    $schema: defaultConfig?.$schema,
+    style,
+    tailwind: {
+      ...defaultConfig?.tailwind,
+      baseColor,
+      cssVariables,
+    },
+    rsc: defaultConfig?.rsc,
+    tsx: defaultConfig?.tsx,
+    aliases: defaultConfig?.aliases,
+  })
+
+  // Write to file.
+  logger.info("")
+  const spinner = ora(`Writing components.json...`).start()
+  const targetPath = path.resolve(cwd, "components.json")
+  await fs.writeFile(targetPath, JSON.stringify(config, null, 2), "utf8")
+  spinner.succeed()
+
+  return await resolveConfigPaths(cwd, config)
+}
+
 export async function runInit(cwd: string, config: Config) {
  const spinner = ora(`Initializing project...`)?.start()

@@ -266,16 +358,17 @@ export async function runInit(cwd: string, config: Config) {

  // Write css file.
  const baseColor = await getRegistryBaseColor(config.tailwind.baseColor)
+
  if (baseColor) {
-    await fs.writeFile(
+    const cssFileInput = await fs.readFile(
      config.resolvedPaths.tailwindCss,
-      config.tailwind.cssVariables
-        ? config.tailwind.prefix
-          ? applyPrefixesCss(baseColor.cssVarsTemplate, config.tailwind.prefix)
-          : baseColor.cssVarsTemplate
-        : baseColor.inlineColorsTemplate,
      "utf8"
    )
+    // const cssFileTemplate = config.tailwind.cssVariables
+    //   ? baseColor.cssVarsTemplate
+    //   : baseColor.inlineColorsTemplate
+    const cssFileContent = applyCSSUpdates(cssFileInput, baseColor, config)
+    await fs.writeFile(config.resolvedPaths.tailwindCss, cssFileContent, "utf8")
  }

  // Write cn file.
--- a/packages/cli/src/utils/css.ts
+++ b/packages/cli/src/utils/css.ts
@@ -0,0 +1,86 @@
+import { Config } from "@/src/utils/get-config"
+import { registryBaseColorSchema } from "@/src/utils/registry/schema"
+import { applyPrefixesCss } from "@/src/utils/transformers/transform-tw-prefix"
+import * as z from "zod"
+
+// This does a simple string replacement.
+// TODO: Do we want to use a proper CSS transformer here? Probably not right now.
+export function applyCSSUpdates(
+  input: string,
+  baseColor: Pick<z.infer<typeof registryBaseColorSchema>, "cssVars">,
+  config: Partial<Config>
+) {
+  if (!isCSSUpdateRequired(input, config)) {
+    return input
+  }
+
+  let output = input
+  // Check if the file contains the `@tailwind` directives.
+  // We assume it does since Tailwind CSS is checked in preflight.
+  if (!input.includes("@tailwind base")) {
+    // Prepend the `@tailwind` directives.
+    output = `@tailwind base;\n@tailwind components;\n@tailwind utilities;\n\n${input}`
+  }
+
+  // No additional changes if not using CSS variables.
+  if (!config.tailwind?.cssVariables) {
+    return output
+  }
+
+  const lightColors = Object.entries(baseColor.cssVars.light).map(
+    ([name, value]) => `    --${name}: ${value};`
+  )
+  const darkColors = Object.entries(baseColor.cssVars.dark).map(
+    ([name, value]) => `    --${name}: ${value};`
+  )
+
+  output = output.replace(
+    /@tailwind utilities;/,
+    `@tailwind utilities;\n
+@layer base {
+  :root {
+${lightColors.join("\n")}
+  }
+
+  .dark {
+${darkColors.join("\n")}
+  }
+}
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}`
+  )
+
+  if (config.tailwind.prefix) {
+    output = applyPrefixesCss(output, config.tailwind.prefix)
+  }
+
+  return output
+}
+
+function isCSSUpdateRequired(input: string, config: Partial<Config>) {
+  // Check for tailwind directives.
+  const hasTailwindDirectives =
+    input.includes("@tailwind base") &&
+    input.includes("@tailwind utilities") &&
+    input.includes("@tailwind components")
+
+  // If we're not using CSS variables, we only check for the `@tailwind` directives.
+  if (!config.tailwind?.cssVariables) {
+    return !hasTailwindDirectives
+  }
+
+  // If we are using CSS variables, we check for the `@layer base` directives.
+  // And we check for the `--background` and `--foreground` variables.
+  return !(
+    input.includes("@layer base") &&
+    input.includes("--background") &&
+    input.includes("--foreground")
+  )
+}
--- a/packages/cli/src/utils/get-project-info.ts
+++ b/packages/cli/src/utils/get-project-info.ts
@@ -1,6 +1,33 @@
 import { existsSync } from "fs"
 import path from "path"
-import fs from "fs-extra"
+import {
+  Config,
+  RawConfig,
+  getConfig,
+  resolveConfigPaths,
+} from "@/src/utils/get-config"
+import fg from "fast-glob"
+import fs, { pathExists } from "fs-extra"
+import { loadConfig } from "tsconfig-paths"
+
+// TODO: Add support for more frameworks.
+// We'll start with Next.js for now.
+const PROJECT_TYPES = [
+  "next-app",
+  "next-app-src",
+  "next-pages",
+  "next-pages-src",
+] as const
+
+type ProjectType = (typeof PROJECT_TYPES)[number]
+
+const PROJECT_SHARED_IGNORE = [
+  "**/node_modules/**",
+  ".next",
+  "public",
+  "dist",
+  "build",
+]

 export async function getProjectInfo() {
  const info = {
@@ -42,3 +69,126 @@ export async function getTsConfig() {
    return null
  }
 }
+
+export async function getProjectConfig(cwd: string): Promise<Config | null> {
+  // Check for existing component config.
+  const existingConfig = await getConfig(cwd)
+  if (existingConfig) {
+    return existingConfig
+  }
+
+  const projectType = await getProjectType(cwd)
+  const tailwindCssFile = await getTailwindCssFile(cwd)
+  const tsConfigAliasPrefix = await getTsConfigAliasPrefix(cwd)
+
+  if (!projectType || !tailwindCssFile || !tsConfigAliasPrefix) {
+    return null
+  }
+
+  const isTsx = await isTypeScriptProject(cwd)
+
+  const config: RawConfig = {
+    $schema: "https://ui.shadcn.com/schema.json",
+    rsc: ["next-app", "next-app-src"].includes(projectType),
+    tsx: isTsx,
+    style: "new-york",
+    tailwind: {
+      config: isTsx ? "tailwind.config.ts" : "tailwind.config.js",
+      baseColor: "zinc",
+      css: tailwindCssFile,
+      cssVariables: true,
+      prefix: "",
+    },
+    aliases: {
+      utils: `${tsConfigAliasPrefix}/lib/utils`,
+      components: `${tsConfigAliasPrefix}/components`,
+    },
+  }
+
+  return await resolveConfigPaths(cwd, config)
+}
+
+export async function getProjectType(cwd: string): Promise<ProjectType | null> {
+  const files = await fg.glob("**/*", {
+    cwd,
+    deep: 3,
+    ignore: PROJECT_SHARED_IGNORE,
+  })
+
+  const isNextProject = files.find((file) => file.startsWith("next.config."))
+  if (!isNextProject) {
+    return null
+  }
+
+  const isUsingSrcDir = await fs.pathExists(path.resolve(cwd, "src"))
+  const isUsingAppDir = await fs.pathExists(
+    path.resolve(cwd, `${isUsingSrcDir ? "src/" : ""}app`)
+  )
+
+  if (isUsingAppDir) {
+    return isUsingSrcDir ? "next-app-src" : "next-app"
+  }
+
+  return isUsingSrcDir ? "next-pages-src" : "next-pages"
+}
+
+export async function getTailwindCssFile(cwd: string) {
+  const files = await fg.glob("**/*.css", {
+    cwd,
+    deep: 3,
+    ignore: PROJECT_SHARED_IGNORE,
+  })
+
+  if (!files.length) {
+    return null
+  }
+
+  for (const file of files) {
+    const contents = await fs.readFile(path.resolve(cwd, file), "utf8")
+    // Assume that if the file contains `@tailwind base` it's the main css file.
+    if (contents.includes("@tailwind base")) {
+      return file
+    }
+  }
+
+  return null
+}
+
+export async function getTsConfigAliasPrefix(cwd: string) {
+  const tsConfig = await loadConfig(cwd)
+
+  if (tsConfig?.resultType === "failed" || !tsConfig?.paths) {
+    return null
+  }
+
+  // This assume that the first alias is the prefix.
+  for (const [alias, paths] of Object.entries(tsConfig.paths)) {
+    if (paths.includes("./*") || paths.includes("./src/*")) {
+      return alias.at(0)
+    }
+  }
+
+  return null
+}
+
+export async function isTypeScriptProject(cwd: string) {
+  // Check if cwd has a tsconfig.json file.
+  return pathExists(path.resolve(cwd, "tsconfig.json"))
+}
+
+export async function preFlight(cwd: string) {
+  // We need Tailwind CSS to be configured.
+  const tailwindConfig = await fg.glob("tailwind.config.*", {
+    cwd,
+    deep: 3,
+    ignore: PROJECT_SHARED_IGNORE,
+  })
+
+  if (!tailwindConfig.length) {
+    throw new Error(
+      "Tailwind CSS is not installed. Visit https://tailwindcss.com/docs/installation to get started."
+    )
+  }
+
+  return true
+}
--- 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"]),
--- a/packages/cli/test/fixtures/css/app-globals.css
+++ b/packages/cli/test/fixtures/css/app-globals.css
@@ -0,0 +1,27 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+:root {
+  --foreground-rgb: 0, 0, 0;
+  --background-start-rgb: 214, 219, 220;
+  --background-end-rgb: 255, 255, 255;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --foreground-rgb: 255, 255, 255;
+    --background-start-rgb: 0, 0, 0;
+    --background-end-rgb: 0, 0, 0;
+  }
+}
+
+body {
+  color: rgb(var(--foreground-rgb));
+  background: linear-gradient(
+      to bottom,
+      transparent,
+      rgb(var(--background-end-rgb))
+    )
+    rgb(var(--background-start-rgb));
+}
--- a/packages/cli/test/fixtures/css/applied-css-vars.css
+++ b/packages/cli/test/fixtures/css/applied-css-vars.css
@@ -0,0 +1,38 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 224 71.4% 4.1%;
+    --primary: 220.9 39.3% 11%;
+    --primary-foreground: 210 20% 98%;
+    --border: 220 13% 91%;
+    --input: 220 13% 91%;
+    --ring: 224 71.4% 4.1%;
+  }
+
+  .dark {
+    --background: 224 71.4% 4.1%;
+    --foreground: 210 20% 98%;
+    --primary: 210 20% 98%;
+    --primary-foreground: 220.9 39.3% 11%;
+    --border: 215 27.9% 16.9%;
+    --input: 215 27.9% 16.9%;
+    --ring: 216 12.2% 83.9%;
+  }
+}
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}
+
+body {
+  background-color: tomato;
+}
--- a/packages/cli/test/fixtures/css/applied.css
+++ b/packages/cli/test/fixtures/css/applied.css
@@ -0,0 +1,7 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+body {
+  background-color: tomato;
+}
--- a/packages/cli/test/fixtures/css/no-tailwind.css
+++ b/packages/cli/test/fixtures/css/no-tailwind.css
@@ -0,0 +1,3 @@
+body {
+  background-color: tomato;
+}
--- a/packages/cli/test/fixtures/next-app-js/app/favicon.ico
+++ b/packages/cli/test/fixtures/next-app-js/app/favicon.ico
--- a/packages/cli/test/fixtures/next-app-js/app/globals.css
+++ b/packages/cli/test/fixtures/next-app-js/app/globals.css
@@ -0,0 +1,27 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+:root {
+  --foreground-rgb: 0, 0, 0;
+  --background-start-rgb: 214, 219, 220;
+  --background-end-rgb: 255, 255, 255;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --foreground-rgb: 255, 255, 255;
+    --background-start-rgb: 0, 0, 0;
+    --background-end-rgb: 0, 0, 0;
+  }
+}
+
+body {
+  color: rgb(var(--foreground-rgb));
+  background: linear-gradient(
+      to bottom,
+      transparent,
+      rgb(var(--background-end-rgb))
+    )
+    rgb(var(--background-start-rgb));
+}
--- a/packages/cli/test/fixtures/next-app-js/app/layout.js
+++ b/packages/cli/test/fixtures/next-app-js/app/layout.js
@@ -0,0 +1,17 @@
+import { Inter } from 'next/font/google'
+import './globals.css'
+
+const inter = Inter({ subsets: ['latin'] })
+
+export const metadata = {
+  title: 'Create Next App',
+  description: 'Generated by create next app',
+}
+
+export default function RootLayout({ children }) {
+  return (
+    <html lang="en">
+      <body className={inter.className}>{children}</body>
+    </html>
+  )
+}
--- a/packages/cli/test/fixtures/next-app-js/app/page.js
+++ b/packages/cli/test/fixtures/next-app-js/app/page.js
@@ -0,0 +1,113 @@
+import Image from 'next/image'
+
+export default function Home() {
+  return (
+    <main className="flex min-h-screen flex-col items-center justify-between p-24">
+      <div className="z-10 max-w-5xl w-full items-center justify-between font-mono text-sm lg:flex">
+        <p className="fixed left-0 top-0 flex w-full justify-center border-b border-gray-300 bg-gradient-to-b from-zinc-200 pb-6 pt-8 backdrop-blur-2xl dark:border-neutral-800 dark:bg-zinc-800/30 dark:from-inherit lg:static lg:w-auto  lg:rounded-xl lg:border lg:bg-gray-200 lg:p-4 lg:dark:bg-zinc-800/30">
+          Get started by editing&nbsp;
+          <code className="font-mono font-bold">app/page.js</code>
+        </p>
+        <div className="fixed bottom-0 left-0 flex h-48 w-full items-end justify-center bg-gradient-to-t from-white via-white dark:from-black dark:via-black lg:static lg:h-auto lg:w-auto lg:bg-none">
+          <a
+            className="pointer-events-none flex place-items-center gap-2 p-8 lg:pointer-events-auto lg:p-0"
+            href="https://vercel.com?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            By{' '}
+            <Image
+              src="/vercel.svg"
+              alt="Vercel Logo"
+              className="dark:invert"
+              width={100}
+              height={24}
+              priority
+            />
+          </a>
+        </div>
+      </div>
+
+      <div className="relative flex place-items-center before:absolute before:h-[300px] before:w-[480px] before:-translate-x-1/2 before:rounded-full before:bg-gradient-radial before:from-white before:to-transparent before:blur-2xl before:content-[''] after:absolute after:-z-20 after:h-[180px] after:w-[240px] after:translate-x-1/3 after:bg-gradient-conic after:from-sky-200 after:via-blue-200 after:blur-2xl after:content-[''] before:dark:bg-gradient-to-br before:dark:from-transparent before:dark:to-blue-700 before:dark:opacity-10 after:dark:from-sky-900 after:dark:via-[#0141ff] after:dark:opacity-40 before:lg:h-[360px] z-[-1]">
+        <Image
+          className="relative dark:drop-shadow-[0_0_0.3rem_#ffffff70] dark:invert"
+          src="/next.svg"
+          alt="Next.js Logo"
+          width={180}
+          height={37}
+          priority
+        />
+      </div>
+
+      <div className="mb-32 grid text-center lg:max-w-5xl lg:w-full lg:mb-0 lg:grid-cols-4 lg:text-left">
+        <a
+          href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
+          className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          <h2 className={`mb-3 text-2xl font-semibold`}>
+            Docs{' '}
+            <span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
+              -&gt;
+            </span>
+          </h2>
+          <p className={`m-0 max-w-[30ch] text-sm opacity-50`}>
+            Find in-depth information about Next.js features and API.
+          </p>
+        </a>
+
+        <a
+          href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
+          className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800 hover:dark:bg-opacity-30"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          <h2 className={`mb-3 text-2xl font-semibold`}>
+            Learn{' '}
+            <span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
+              -&gt;
+            </span>
+          </h2>
+          <p className={`m-0 max-w-[30ch] text-sm opacity-50`}>
+            Learn about Next.js in an interactive course with&nbsp;quizzes!
+          </p>
+        </a>
+
+        <a
+          href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
+          className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          <h2 className={`mb-3 text-2xl font-semibold`}>
+            Templates{' '}
+            <span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
+              -&gt;
+            </span>
+          </h2>
+          <p className={`m-0 max-w-[30ch] text-sm opacity-50`}>
+            Explore starter templates for Next.js.
+          </p>
+        </a>
+
+        <a
+          href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
+          className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          <h2 className={`mb-3 text-2xl font-semibold`}>
+            Deploy{' '}
+            <span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
+              -&gt;
+            </span>
+          </h2>
+          <p className={`m-0 max-w-[30ch] text-sm opacity-50`}>
+            Instantly deploy your Next.js site to a shareable URL with Vercel.
+          </p>
+        </a>
+      </div>
+    </main>
+  )
+}
--- a/packages/cli/test/fixtures/next-app-js/jsconfig.json
+++ b/packages/cli/test/fixtures/next-app-js/jsconfig.json
@@ -0,0 +1,7 @@
+{
+  "compilerOptions": {
+    "paths": {
+      "@/*": ["./*"]
+    }
+  }
+}
--- a/packages/cli/test/fixtures/next-app-js/next.config.js
+++ b/packages/cli/test/fixtures/next-app-js/next.config.js
@@ -0,0 +1,4 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {}
+
+module.exports = nextConfig
--- a/packages/cli/test/fixtures/next-app-js/package.json
+++ b/packages/cli/test/fixtures/next-app-js/package.json
@@ -0,0 +1,23 @@
+{
+  "name": "app-js",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "react": "^18",
+    "react-dom": "^18",
+    "next": "14.0.4"
+  },
+  "devDependencies": {
+    "autoprefixer": "^10.0.1",
+    "postcss": "^8",
+    "tailwindcss": "^3.3.0",
+    "eslint": "^8",
+    "eslint-config-next": "14.0.4"
+  }
+}
--- a/packages/cli/test/fixtures/next-app-js/postcss.config.js
+++ b/packages/cli/test/fixtures/next-app-js/postcss.config.js
@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}
--- a/packages/cli/test/fixtures/next-app-js/tailwind.config.js
+++ b/packages/cli/test/fixtures/next-app-js/tailwind.config.js
@@ -0,0 +1,18 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [
+    './pages/**/*.{js,ts,jsx,tsx,mdx}',
+    './components/**/*.{js,ts,jsx,tsx,mdx}',
+    './app/**/*.{js,ts,jsx,tsx,mdx}',
+  ],
+  theme: {
+    extend: {
+      backgroundImage: {
+        'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
+        'gradient-conic':
+          'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
+      },
+    },
+  },
+  plugins: [],
+}
--- a/packages/cli/test/fixtures/next-app-src/next-env.d.ts
+++ b/packages/cli/test/fixtures/next-app-src/next-env.d.ts
@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.
--- a/packages/cli/test/fixtures/next-app-src/next.config.js
+++ b/packages/cli/test/fixtures/next-app-src/next.config.js
@@ -0,0 +1,4 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {}
+
+module.exports = nextConfig
--- a/packages/cli/test/fixtures/next-app-src/other.css
+++ b/packages/cli/test/fixtures/next-app-src/other.css
@@ -0,0 +1,3 @@
+body {
+  background-color: red;
+}
--- a/packages/cli/test/fixtures/next-app-src/package.json
+++ b/packages/cli/test/fixtures/next-app-src/package.json
@@ -0,0 +1,11 @@
+{
+  "name": "test-cli-next-app-src",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
+  }
+}
--- a/packages/cli/test/fixtures/next-app-src/pnpm-lock.yaml
+++ b/packages/cli/test/fixtures/next-app-src/pnpm-lock.yaml
--- a/packages/cli/test/fixtures/next-app-src/postcss.config.js
+++ b/packages/cli/test/fixtures/next-app-src/postcss.config.js
@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}
--- a/packages/cli/test/fixtures/next-app-src/src/app/favicon.ico
+++ b/packages/cli/test/fixtures/next-app-src/src/app/favicon.ico
--- a/packages/cli/test/fixtures/next-app-src/src/app/layout.tsx
+++ b/packages/cli/test/fixtures/next-app-src/src/app/layout.tsx
@@ -0,0 +1,13 @@
+import "./styles.css"
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return (
+    <html lang="en">
+      <body>{children}</body>
+    </html>
+  )
+}
--- a/packages/cli/test/fixtures/next-app-src/src/app/other.css
+++ b/packages/cli/test/fixtures/next-app-src/src/app/other.css
@@ -0,0 +1,3 @@
+body {
+  background-color: red;
+}
--- a/packages/cli/test/fixtures/next-app-src/src/app/page.tsx
+++ b/packages/cli/test/fixtures/next-app-src/src/app/page.tsx
@@ -0,0 +1,113 @@
+import Image from 'next/image'
+
+export default function Home() {
+  return (
+    <main className="flex min-h-screen flex-col items-center justify-between p-24">
+      <div className="z-10 max-w-5xl w-full items-center justify-between font-mono text-sm lg:flex">
+        <p className="fixed left-0 top-0 flex w-full justify-center border-b border-gray-300 bg-gradient-to-b from-zinc-200 pb-6 pt-8 backdrop-blur-2xl dark:border-neutral-800 dark:bg-zinc-800/30 dark:from-inherit lg:static lg:w-auto  lg:rounded-xl lg:border lg:bg-gray-200 lg:p-4 lg:dark:bg-zinc-800/30">
+          Get started by editing&nbsp;
+          <code className="font-mono font-bold">src/app/page.tsx</code>
+        </p>
+        <div className="fixed bottom-0 left-0 flex h-48 w-full items-end justify-center bg-gradient-to-t from-white via-white dark:from-black dark:via-black lg:static lg:h-auto lg:w-auto lg:bg-none">
+          <a
+            className="pointer-events-none flex place-items-center gap-2 p-8 lg:pointer-events-auto lg:p-0"
+            href="https://vercel.com?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            By{' '}
+            <Image
+              src="/vercel.svg"
+              alt="Vercel Logo"
+              className="dark:invert"
+              width={100}
+              height={24}
+              priority
+            />
+          </a>
+        </div>
+      </div>
+
+      <div className="relative flex place-items-center before:absolute before:h-[300px] before:w-[480px] before:-translate-x-1/2 before:rounded-full before:bg-gradient-radial before:from-white before:to-transparent before:blur-2xl before:content-[''] after:absolute after:-z-20 after:h-[180px] after:w-[240px] after:translate-x-1/3 after:bg-gradient-conic after:from-sky-200 after:via-blue-200 after:blur-2xl after:content-[''] before:dark:bg-gradient-to-br before:dark:from-transparent before:dark:to-blue-700 before:dark:opacity-10 after:dark:from-sky-900 after:dark:via-[#0141ff] after:dark:opacity-40 before:lg:h-[360px] z-[-1]">
+        <Image
+          className="relative dark:drop-shadow-[0_0_0.3rem_#ffffff70] dark:invert"
+          src="/next.svg"
+          alt="Next.js Logo"
+          width={180}
+          height={37}
+          priority
+        />
+      </div>
+
+      <div className="mb-32 grid text-center lg:max-w-5xl lg:w-full lg:mb-0 lg:grid-cols-4 lg:text-left">
+        <a
+          href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
+          className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          <h2 className={`mb-3 text-2xl font-semibold`}>
+            Docs{' '}
+            <span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
+              -&gt;
+            </span>
+          </h2>
+          <p className={`m-0 max-w-[30ch] text-sm opacity-50`}>
+            Find in-depth information about Next.js features and API.
+          </p>
+        </a>
+
+        <a
+          href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
+          className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          <h2 className={`mb-3 text-2xl font-semibold`}>
+            Learn{' '}
+            <span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
+              -&gt;
+            </span>
+          </h2>
+          <p className={`m-0 max-w-[30ch] text-sm opacity-50`}>
+            Learn about Next.js in an interactive course with&nbsp;quizzes!
+          </p>
+        </a>
+
+        <a
+          href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
+          className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          <h2 className={`mb-3 text-2xl font-semibold`}>
+            Templates{' '}
+            <span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
+              -&gt;
+            </span>
+          </h2>
+          <p className={`m-0 max-w-[30ch] text-sm opacity-50`}>
+            Explore the Next.js 13 playground.
+          </p>
+        </a>
+
+        <a
+          href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
+          className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          <h2 className={`mb-3 text-2xl font-semibold`}>
+            Deploy{' '}
+            <span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
+              -&gt;
+            </span>
+          </h2>
+          <p className={`m-0 max-w-[30ch] text-sm opacity-50`}>
+            Instantly deploy your Next.js site to a shareable URL with Vercel.
+          </p>
+        </a>
+      </div>
+    </main>
+  )
+}
--- a/packages/cli/test/fixtures/next-app-src/src/app/styles.css
+++ b/packages/cli/test/fixtures/next-app-src/src/app/styles.css
@@ -0,0 +1,27 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+:root {
+  --foreground-rgb: 0, 0, 0;
+  --background-start-rgb: 214, 219, 220;
+  --background-end-rgb: 255, 255, 255;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --foreground-rgb: 255, 255, 255;
+    --background-start-rgb: 0, 0, 0;
+    --background-end-rgb: 0, 0, 0;
+  }
+}
+
+body {
+  color: rgb(var(--foreground-rgb));
+  background: linear-gradient(
+      to bottom,
+      transparent,
+      rgb(var(--background-end-rgb))
+    )
+    rgb(var(--background-start-rgb));
+}
--- a/packages/cli/test/fixtures/next-app-src/src/other.css
+++ b/packages/cli/test/fixtures/next-app-src/src/other.css
@@ -0,0 +1,3 @@
+body {
+  background-color: red;
+}
--- a/packages/cli/test/fixtures/next-app-src/tailwind.config.ts
+++ b/packages/cli/test/fixtures/next-app-src/tailwind.config.ts
@@ -0,0 +1,21 @@
+// @ts-nocheck
+import type { Config } from 'tailwindcss'
+
+const config: Config = {
+  content: [
+    './src/pages/**/*.{js,ts,jsx,tsx,mdx}',
+    './src/components/**/*.{js,ts,jsx,tsx,mdx}',
+    './src/app/**/*.{js,ts,jsx,tsx,mdx}'
+  ],
+  theme: {
+    extend: {
+      backgroundImage: {
+        'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
+        'gradient-conic':
+          'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))'
+      }
+    }
+  },
+  plugins: []
+}
+export default config
--- a/packages/cli/test/fixtures/next-app-src/tsconfig.json
+++ b/packages/cli/test/fixtures/next-app-src/tsconfig.json
@@ -0,0 +1,27 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "paths": {
+      "#/*": ["./src/*"]
+    }
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "exclude": ["node_modules"]
+}
--- a/packages/cli/test/fixtures/next-app/app/favicon.ico
+++ b/packages/cli/test/fixtures/next-app/app/favicon.ico
--- a/packages/cli/test/fixtures/next-app/app/globals.css
+++ b/packages/cli/test/fixtures/next-app/app/globals.css
@@ -0,0 +1,27 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+:root {
+  --foreground-rgb: 0, 0, 0;
+  --background-start-rgb: 214, 219, 220;
+  --background-end-rgb: 255, 255, 255;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --foreground-rgb: 255, 255, 255;
+    --background-start-rgb: 0, 0, 0;
+    --background-end-rgb: 0, 0, 0;
+  }
+}
+
+body {
+  color: rgb(var(--foreground-rgb));
+  background: linear-gradient(
+      to bottom,
+      transparent,
+      rgb(var(--background-end-rgb))
+    )
+    rgb(var(--background-start-rgb));
+}
--- a/packages/cli/test/fixtures/next-app/app/layout.tsx
+++ b/packages/cli/test/fixtures/next-app/app/layout.tsx
@@ -0,0 +1,22 @@
+import './globals.css'
+import type { Metadata } from 'next'
+import { Inter } from 'next/font/google'
+
+const inter = Inter({ subsets: ['latin'] })
+
+export const metadata: Metadata = {
+  title: 'Create Next App',
+  description: 'Generated by create next app',
+}
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return (
+    <html lang="en">
+      <body className={inter.className}>{children}</body>
+    </html>
+  )
+}
--- a/packages/cli/test/fixtures/next-app/app/other.css
+++ b/packages/cli/test/fixtures/next-app/app/other.css
@@ -0,0 +1,3 @@
+body {
+  background-color: red;
+}
--- a/packages/cli/test/fixtures/next-app/app/page.tsx
+++ b/packages/cli/test/fixtures/next-app/app/page.tsx
@@ -0,0 +1,113 @@
+import Image from 'next/image'
+
+export default function Home() {
+  return (
+    <main className="flex min-h-screen flex-col items-center justify-between p-24">
+      <div className="z-10 max-w-5xl w-full items-center justify-between font-mono text-sm lg:flex">
+        <p className="fixed left-0 top-0 flex w-full justify-center border-b border-gray-300 bg-gradient-to-b from-zinc-200 pb-6 pt-8 backdrop-blur-2xl dark:border-neutral-800 dark:bg-zinc-800/30 dark:from-inherit lg:static lg:w-auto  lg:rounded-xl lg:border lg:bg-gray-200 lg:p-4 lg:dark:bg-zinc-800/30">
+          Get started by editing&nbsp;
+          <code className="font-mono font-bold">app/page.tsx</code>
+        </p>
+        <div className="fixed bottom-0 left-0 flex h-48 w-full items-end justify-center bg-gradient-to-t from-white via-white dark:from-black dark:via-black lg:static lg:h-auto lg:w-auto lg:bg-none">
+          <a
+            className="pointer-events-none flex place-items-center gap-2 p-8 lg:pointer-events-auto lg:p-0"
+            href="https://vercel.com?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            By{' '}
+            <Image
+              src="/vercel.svg"
+              alt="Vercel Logo"
+              className="dark:invert"
+              width={100}
+              height={24}
+              priority
+            />
+          </a>
+        </div>
+      </div>
+
+      <div className="relative flex place-items-center before:absolute before:h-[300px] before:w-[480px] before:-translate-x-1/2 before:rounded-full before:bg-gradient-radial before:from-white before:to-transparent before:blur-2xl before:content-[''] after:absolute after:-z-20 after:h-[180px] after:w-[240px] after:translate-x-1/3 after:bg-gradient-conic after:from-sky-200 after:via-blue-200 after:blur-2xl after:content-[''] before:dark:bg-gradient-to-br before:dark:from-transparent before:dark:to-blue-700 before:dark:opacity-10 after:dark:from-sky-900 after:dark:via-[#0141ff] after:dark:opacity-40 before:lg:h-[360px] z-[-1]">
+        <Image
+          className="relative dark:drop-shadow-[0_0_0.3rem_#ffffff70] dark:invert"
+          src="/next.svg"
+          alt="Next.js Logo"
+          width={180}
+          height={37}
+          priority
+        />
+      </div>
+
+      <div className="mb-32 grid text-center lg:max-w-5xl lg:w-full lg:mb-0 lg:grid-cols-4 lg:text-left">
+        <a
+          href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
+          className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          <h2 className={`mb-3 text-2xl font-semibold`}>
+            Docs{' '}
+            <span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
+              -&gt;
+            </span>
+          </h2>
+          <p className={`m-0 max-w-[30ch] text-sm opacity-50`}>
+            Find in-depth information about Next.js features and API.
+          </p>
+        </a>
+
+        <a
+          href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
+          className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          <h2 className={`mb-3 text-2xl font-semibold`}>
+            Learn{' '}
+            <span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
+              -&gt;
+            </span>
+          </h2>
+          <p className={`m-0 max-w-[30ch] text-sm opacity-50`}>
+            Learn about Next.js in an interactive course with&nbsp;quizzes!
+          </p>
+        </a>
+
+        <a
+          href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
+          className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          <h2 className={`mb-3 text-2xl font-semibold`}>
+            Templates{' '}
+            <span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
+              -&gt;
+            </span>
+          </h2>
+          <p className={`m-0 max-w-[30ch] text-sm opacity-50`}>
+            Explore the Next.js 13 playground.
+          </p>
+        </a>
+
+        <a
+          href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
+          className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          <h2 className={`mb-3 text-2xl font-semibold`}>
+            Deploy{' '}
+            <span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
+              -&gt;
+            </span>
+          </h2>
+          <p className={`m-0 max-w-[30ch] text-sm opacity-50`}>
+            Instantly deploy your Next.js site to a shareable URL with Vercel.
+          </p>
+        </a>
+      </div>
+    </main>
+  )
+}
--- a/packages/cli/test/fixtures/next-app/next-env.d.ts
+++ b/packages/cli/test/fixtures/next-app/next-env.d.ts
@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.
--- a/packages/cli/test/fixtures/next-app/next.config.js
+++ b/packages/cli/test/fixtures/next-app/next.config.js
@@ -0,0 +1,4 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {}
+
+module.exports = nextConfig
--- a/packages/cli/test/fixtures/next-app/package.json
+++ b/packages/cli/test/fixtures/next-app/package.json
@@ -0,0 +1,11 @@
+{
+  "name": "test-cli-next-app",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
+  }
+}
--- a/packages/cli/test/fixtures/next-app/pnpm-lock.yaml
+++ b/packages/cli/test/fixtures/next-app/pnpm-lock.yaml
--- a/packages/cli/test/fixtures/next-app/postcss.config.js
+++ b/packages/cli/test/fixtures/next-app/postcss.config.js
@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}
--- a/packages/cli/test/fixtures/next-app/tailwind.config.ts
+++ b/packages/cli/test/fixtures/next-app/tailwind.config.ts
@@ -0,0 +1,21 @@
+// @ts-nocheck
+import type { Config } from 'tailwindcss'
+
+const config: Config = {
+  content: [
+    './pages/**/*.{js,ts,jsx,tsx,mdx}',
+    './components/**/*.{js,ts,jsx,tsx,mdx}',
+    './app/**/*.{js,ts,jsx,tsx,mdx}'
+  ],
+  theme: {
+    extend: {
+      backgroundImage: {
+        'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
+        'gradient-conic':
+          'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))'
+      }
+    }
+  },
+  plugins: []
+}
+export default config
--- a/packages/cli/test/fixtures/next-app/tsconfig.json
+++ b/packages/cli/test/fixtures/next-app/tsconfig.json
@@ -0,0 +1,27 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "paths": {
+      "@/*": ["./*"]
+    }
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "exclude": ["node_modules"]
+}
--- a/packages/cli/test/fixtures/next-pages-src/next-env.d.ts
+++ b/packages/cli/test/fixtures/next-pages-src/next-env.d.ts
@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.
--- a/packages/cli/test/fixtures/next-pages-src/next.config.js
+++ b/packages/cli/test/fixtures/next-pages-src/next.config.js
@@ -0,0 +1,6 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  reactStrictMode: true,
+}
+
+module.exports = nextConfig
--- a/packages/cli/test/fixtures/next-pages-src/other.css
+++ b/packages/cli/test/fixtures/next-pages-src/other.css
@@ -0,0 +1,3 @@
+body {
+  background-color: red;
+}
--- a/packages/cli/test/fixtures/next-pages-src/package.json
+++ b/packages/cli/test/fixtures/next-pages-src/package.json
@@ -0,0 +1,11 @@
+{
+  "name": "test-pages-src",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
+  }
+}
--- a/packages/cli/test/fixtures/next-pages-src/pnpm-lock.yaml
+++ b/packages/cli/test/fixtures/next-pages-src/pnpm-lock.yaml
--- a/packages/cli/test/fixtures/next-pages-src/postcss.config.js
+++ b/packages/cli/test/fixtures/next-pages-src/postcss.config.js
@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}
--- a/packages/cli/test/fixtures/next-pages-src/src/other.css
+++ b/packages/cli/test/fixtures/next-pages-src/src/other.css
@@ -0,0 +1,3 @@
+body {
+  background-color: red;
+}
--- a/packages/cli/test/fixtures/next-pages-src/src/pages/_app.tsx
+++ b/packages/cli/test/fixtures/next-pages-src/src/pages/_app.tsx
@@ -0,0 +1,6 @@
+import '@/styles/globals.css'
+import type { AppProps } from 'next/app'
+
+export default function App({ Component, pageProps }: AppProps) {
+  return <Component {...pageProps} />
+}
--- a/packages/cli/test/fixtures/next-pages-src/src/pages/_document.tsx
+++ b/packages/cli/test/fixtures/next-pages-src/src/pages/_document.tsx
@@ -0,0 +1,13 @@
+import { Html, Head, Main, NextScript } from 'next/document'
+
+export default function Document() {
+  return (
+    <Html lang="en">
+      <Head />
+      <body>
+        <Main />
+        <NextScript />
+      </body>
+    </Html>
+  )
+}
--- a/packages/cli/test/fixtures/next-pages-src/src/pages/api/hello.ts
+++ b/packages/cli/test/fixtures/next-pages-src/src/pages/api/hello.ts
@@ -0,0 +1,13 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import type { NextApiRequest, NextApiResponse } from 'next'
+
+type Data = {
+  name: string
+}
+
+export default function handler(
+  req: NextApiRequest,
+  res: NextApiResponse<Data>
+) {
+  res.status(200).json({ name: 'John Doe' })
+}
--- a/packages/cli/test/fixtures/next-pages-src/src/pages/index.tsx
+++ b/packages/cli/test/fixtures/next-pages-src/src/pages/index.tsx
@@ -0,0 +1,118 @@
+import Image from 'next/image'
+import { Inter } from 'next/font/google'
+
+const inter = Inter({ subsets: ['latin'] })
+
+export default function Home() {
+  return (
+    <main
+      className={`flex min-h-screen flex-col items-center justify-between p-24 ${inter.className}`}
+    >
+      <div className="z-10 max-w-5xl w-full items-center justify-between font-mono text-sm lg:flex">
+        <p className="fixed left-0 top-0 flex w-full justify-center border-b border-gray-300 bg-gradient-to-b from-zinc-200 pb-6 pt-8 backdrop-blur-2xl dark:border-neutral-800 dark:bg-zinc-800/30 dark:from-inherit lg:static lg:w-auto  lg:rounded-xl lg:border lg:bg-gray-200 lg:p-4 lg:dark:bg-zinc-800/30">
+          Get started by editing&nbsp;
+          <code className="font-mono font-bold">src/pages/index.tsx</code>
+        </p>
+        <div className="fixed bottom-0 left-0 flex h-48 w-full items-end justify-center bg-gradient-to-t from-white via-white dark:from-black dark:via-black lg:static lg:h-auto lg:w-auto lg:bg-none">
+          <a
+            className="pointer-events-none flex place-items-center gap-2 p-8 lg:pointer-events-auto lg:p-0"
+            href="https://vercel.com?utm_source=create-next-app&utm_medium=default-template-tw&utm_campaign=create-next-app"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            By{' '}
+            <Image
+              src="/vercel.svg"
+              alt="Vercel Logo"
+              className="dark:invert"
+              width={100}
+              height={24}
+              priority
+            />
+          </a>
+        </div>
+      </div>
+
+      <div className="relative flex place-items-center before:absolute before:h-[300px] before:w-[480px] before:-translate-x-1/2 before:rounded-full before:bg-gradient-radial before:from-white before:to-transparent before:blur-2xl before:content-[''] after:absolute after:-z-20 after:h-[180px] after:w-[240px] after:translate-x-1/3 after:bg-gradient-conic after:from-sky-200 after:via-blue-200 after:blur-2xl after:content-[''] before:dark:bg-gradient-to-br before:dark:from-transparent before:dark:to-blue-700/10 after:dark:from-sky-900 after:dark:via-[#0141ff]/40 before:lg:h-[360px]">
+        <Image
+          className="relative dark:drop-shadow-[0_0_0.3rem_#ffffff70] dark:invert"
+          src="/next.svg"
+          alt="Next.js Logo"
+          width={180}
+          height={37}
+          priority
+        />
+      </div>
+
+      <div className="mb-32 grid text-center lg:max-w-5xl lg:w-full lg:mb-0 lg:grid-cols-4 lg:text-left">
+        <a
+          href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=default-template-tw&utm_campaign=create-next-app"
+          className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          <h2 className={`mb-3 text-2xl font-semibold`}>
+            Docs{' '}
+            <span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
+              -&gt;
+            </span>
+          </h2>
+          <p className={`m-0 max-w-[30ch] text-sm opacity-50`}>
+            Find in-depth information about Next.js features and API.
+          </p>
+        </a>
+
+        <a
+          href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=default-template-tw&utm_campaign=create-next-app"
+          className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          <h2 className={`mb-3 text-2xl font-semibold`}>
+            Learn{' '}
+            <span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
+              -&gt;
+            </span>
+          </h2>
+          <p className={`m-0 max-w-[30ch] text-sm opacity-50`}>
+            Learn about Next.js in an interactive course with&nbsp;quizzes!
+          </p>
+        </a>
+
+        <a
+          href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=default-template-tw&utm_campaign=create-next-app"
+          className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          <h2 className={`mb-3 text-2xl font-semibold`}>
+            Templates{' '}
+            <span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
+              -&gt;
+            </span>
+          </h2>
+          <p className={`m-0 max-w-[30ch] text-sm opacity-50`}>
+            Discover and deploy boilerplate example Next.js&nbsp;projects.
+          </p>
+        </a>
+
+        <a
+          href="https://vercel.com/new?utm_source=create-next-app&utm_medium=default-template-tw&utm_campaign=create-next-app"
+          className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          <h2 className={`mb-3 text-2xl font-semibold`}>
+            Deploy{' '}
+            <span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
+              -&gt;
+            </span>
+          </h2>
+          <p className={`m-0 max-w-[30ch] text-sm opacity-50`}>
+            Instantly deploy your Next.js site to a shareable URL with Vercel.
+          </p>
+        </a>
+      </div>
+    </main>
+  )
+}
--- a/packages/cli/test/fixtures/next-pages-src/src/pages/other.css
+++ b/packages/cli/test/fixtures/next-pages-src/src/pages/other.css
@@ -0,0 +1,3 @@
+body {
+  background-color: red;
+}
--- a/packages/cli/test/fixtures/next-pages-src/src/styles/globals.css
+++ b/packages/cli/test/fixtures/next-pages-src/src/styles/globals.css
@@ -0,0 +1,27 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+:root {
+  --foreground-rgb: 0, 0, 0;
+  --background-start-rgb: 214, 219, 220;
+  --background-end-rgb: 255, 255, 255;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --foreground-rgb: 255, 255, 255;
+    --background-start-rgb: 0, 0, 0;
+    --background-end-rgb: 0, 0, 0;
+  }
+}
+
+body {
+  color: rgb(var(--foreground-rgb));
+  background: linear-gradient(
+      to bottom,
+      transparent,
+      rgb(var(--background-end-rgb))
+    )
+    rgb(var(--background-start-rgb));
+}
--- a/packages/cli/test/fixtures/next-pages-src/src/styles/other.css
+++ b/packages/cli/test/fixtures/next-pages-src/src/styles/other.css
@@ -0,0 +1,3 @@
+body {
+  background-color: red;
+}
--- a/packages/cli/test/fixtures/next-pages-src/tailwind.config.ts
+++ b/packages/cli/test/fixtures/next-pages-src/tailwind.config.ts
@@ -0,0 +1,21 @@
+// @ts-nocheck
+import type { Config } from 'tailwindcss'
+
+const config: Config = {
+  content: [
+    './src/pages/**/*.{js,ts,jsx,tsx,mdx}',
+    './src/components/**/*.{js,ts,jsx,tsx,mdx}',
+    './src/app/**/*.{js,ts,jsx,tsx,mdx}'
+  ],
+  theme: {
+    extend: {
+      backgroundImage: {
+        'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
+        'gradient-conic':
+          'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))'
+      }
+    }
+  },
+  plugins: []
+}
+export default config
--- a/packages/cli/test/fixtures/next-pages-src/tsconfig.json
+++ b/packages/cli/test/fixtures/next-pages-src/tsconfig.json
@@ -0,0 +1,22 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true,
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
+  "exclude": ["node_modules"]
+}
--- a/packages/cli/test/fixtures/next-pages/next.config.js
+++ b/packages/cli/test/fixtures/next-pages/next.config.js
@@ -0,0 +1,6 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  reactStrictMode: true,
+}
+
+module.exports = nextConfig
--- a/packages/cli/test/fixtures/next-pages/package.json
+++ b/packages/cli/test/fixtures/next-pages/package.json
@@ -0,0 +1,11 @@
+{
+  "name": "test-cli-pages",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
+  }
+}
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
shadcn	8392c7fa0c	feat(cli): add css updates	2024-01-18 21:06:20 +04:00
Thomas Marrec	a465432a66	fix(carousel): adjust types for embla-carousel-react@8 (#2326 ) Fixes #2322 , #2281 Thanks to @akynau & @nianiam	2024-01-18 07:22:45 +00:00
Oguz Kazkayasi	7822e06904	Adds missing display names to Pagination Elements (#2178 ) * fix: add missing pagination names * chore: build registry --------- Co-authored-by: shadcn <m@shadcn.com>	2024-01-18 11:08:25 +04:00
Takeshi Kriang	578d2c1823	fix(pagination): remove incorrect nested li from pagination link (#2190 ) * feat: remove PaginationItem * chore: build registry --------- Co-authored-by: shadcn <m@shadcn.com>	2024-01-18 10:58:22 +04:00
github-actions[bot]	29de71d77f	chore(release): version packages (#2458 ) * chore(release): version packages * Update CHANGELOG.md --------- Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> Co-authored-by: shadcn <m@shadcn.com>	2024-01-16 23:56:19 +04:00
shadcn	0374ba874d	feat(cli): add min-config support for Next.js (#2454 ) * feat(cli): add zero-config support for Next.js * chore: add changeset * feat(cli): add preflight	2024-01-16 22:05:39 +04:00
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