From 7a154fec4117672078ad93dee032f05d8d94a0fc Mon Sep 17 00:00:00 2001
From: Fellipe Utaka <fellipeutaka@gmail.com>
Date: Tue, 20 Aug 2024 06:09:19 -0300
Subject: [PATCH] style: set defaultFormatter to biome

---
 .vscode/settings.json                         |   3 +-
 apps/www/package.json                         |   4 +-
 apps/www/public/schema.json                   |  80 ++--
 .../src/app/_components/feature-section.tsx   | 242 ++++++------
 .../app/_components/open-source-section.tsx   |   4 +-
 .../_components/table-of-contents.tsx         |   2 +-
 .../_components/iconify-collection-list.tsx   |  49 ++-
 apps/www/src/app/layout.tsx                   |   2 +-
 apps/www/src/components/command-menu.tsx      |  15 +-
 apps/www/src/components/language-icon.tsx     |   2 +-
 apps/www/src/components/main-nav.tsx          |  10 +-
 .../src/components/mdx/component-source.tsx   |   2 +-
 apps/www/src/components/mdx/copy-button.tsx   |   4 +-
 .../www/src/components/mdx/mdx-components.tsx |  10 +-
 apps/www/src/components/mdx/steps.tsx         |   4 +-
 apps/www/src/components/mdx/tabs.tsx          |   2 +-
 apps/www/src/components/mobile-nav.tsx        |  19 +-
 apps/www/src/components/site-header.tsx       |  15 +-
 apps/www/src/config/docs.ts                   |   4 +
 apps/www/src/content/docs/cli.mdx             |  37 ++
 apps/www/src/hooks/use-copy-to-clipboard.ts   |   4 +-
 apps/www/src/lib/iconify.ts                   |   6 +-
 apps/www/src/lib/rehype-command.ts            |  12 +-
 apps/www/src/lib/rehype-component.ts          |   8 +-
 apps/www/src/styles/link.ts                   |  10 +-
 apps/www/src/utils/get-doc-by-slug.ts         |  22 +-
 apps/www/src/utils/get-item-ids.ts            |  28 +-
 biome.json                                    |   8 +-
 config/tsconfig/package.json                  |   5 +-
 package.json                                  |   8 +-
 packages/cli/kanpeki.json                     |  24 +-
 packages/cli/package.json                     |   4 +-
 packages/cli/src/commands/icon/format.ts      |  22 +-
 packages/cli/src/commands/icon/index.ts       |  12 +-
 packages/cli/src/commands/init.ts             |  24 +-
 packages/cli/src/templates/cn.ts              |  14 +-
 packages/cli/src/templates/globals.ts         | 192 +++++-----
 packages/cli/src/templates/tw-config.ts       | 150 ++++----
 packages/cli/src/utils/get-config.ts          | 184 ++++-----
 packages/cli/src/utils/get-is-online.ts       |  90 ++---
 packages/cli/src/utils/get-pkg-manager.ts     |  38 +-
 packages/cli/src/utils/get-project-info.ts    | 358 +++++++++---------
 packages/cli/src/utils/handle-error.ts        |  32 +-
 packages/cli/src/utils/install-deps.ts        |  90 ++---
 packages/cli/src/utils/logger.ts              |  38 +-
 packages/cli/src/utils/resolve-import.ts      |  32 +-
 packages/cli/tsup.config.ts                   |  20 +-
 packages/components/demos/src/avatar-demo.tsx |  34 +-
 .../components/demos/src/avatar-group.tsx     | 120 +++---
 .../components/demos/src/checkbox-demo.tsx    |  30 +-
 .../demos/src/checkbox-disabled.tsx           |  36 +-
 .../components/demos/src/command-demo.tsx     | 228 +++++------
 packages/components/demos/src/label-demo.tsx  |  30 +-
 .../components/demos/src/scroll-area-demo.tsx |  56 +--
 .../demos/src/scroll-area-horizontal.tsx      | 104 ++---
 .../components/demos/src/separator-demo.tsx   |  44 +--
 .../demos/src/separator-vertical.tsx          |  26 +-
 .../components/demos/src/skeleton-card.tsx    |  26 +-
 .../components/demos/src/skeleton-demo.tsx    |  26 +-
 packages/components/demos/src/switch-demo.tsx |  26 +-
 packages/components/demos/src/table-demo.tsx  | 170 ++++-----
 packages/components/demos/src/tabs-demo.tsx   | 140 +++----
 packages/components/ui/src/alert.tsx          |   2 +-
 packages/components/ui/src/avatar.tsx         |   2 +-
 packages/components/ui/src/breadcrumb.tsx     |   2 +-
 packages/components/ui/src/button.tsx         |   2 +-
 packages/components/ui/src/card.tsx           |   2 +-
 packages/components/ui/src/checkbox.tsx       |   4 +-
 packages/components/ui/src/collapsible.tsx    |   2 +-
 packages/components/ui/src/command.tsx        |   2 +-
 packages/components/ui/src/dialog.tsx         |   8 +-
 packages/components/ui/src/dropdown-menu.tsx  |   2 +-
 packages/components/ui/src/link-button.tsx    |   2 +-
 packages/components/ui/src/popover.tsx        | 102 ++---
 packages/components/ui/src/scroll-area.tsx    |   2 +-
 packages/components/ui/src/switch.tsx         |   4 +-
 packages/components/ui/src/table.tsx          |   2 +-
 packages/components/ui/src/tabs.tsx           |   2 +-
 packages/components/ui/src/text-field.tsx     |   2 +-
 packages/hooks/src/use-active-item.ts         |   2 +-
 packages/hooks/src/use-animation.ts           |   6 +-
 packages/utils/src/merge-refs.ts              |   2 +-
 pnpm-lock.yaml                                |  35 +-
 83 files changed, 1665 insertions(+), 1565 deletions(-)
 create mode 100644 apps/www/src/content/docs/cli.mdx

diff --git a/.vscode/settings.json b/.vscode/settings.json
index c391506..a5791d4 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -15,5 +15,6 @@
     "velite"
   ],
   "typescript.enablePromptUseWorkspaceTsdk": true,
-  "typescript.tsdk": "node_modules\\typescript\\lib"
+  "typescript.tsdk": "node_modules\\typescript\\lib",
+  "editor.defaultFormatter": "biomejs.biome"
 }
diff --git a/apps/www/package.json b/apps/www/package.json
index fc7e0df..6b5f9a3 100644
--- a/apps/www/package.json
+++ b/apps/www/package.json
@@ -16,14 +16,14 @@
     "@kanpeki/ui": "workspace:*",
     "@kanpeki/utils": "workspace:*",
     "@react-aria/interactions": "^3.22.1",
+    "@tanstack/react-virtual": "^3.10.1",
     "@vercel/analytics": "^1.3.1",
     "@vercel/speed-insights": "^1.0.12",
     "geist": "^1.3.1",
     "next": "15.0.0-rc.0",
     "next-themes": "^0.3.0",
     "react": "19.0.0-rc-f994737d14-20240522",
-    "react-dom": "19.0.0-rc-f994737d14-20240522",
-    "react-virtuoso": "^4.10.1"
+    "react-dom": "19.0.0-rc-f994737d14-20240522"
   },
   "devDependencies": {
     "@kanpeki/tsconfig": "workspace:*",
diff --git a/apps/www/public/schema.json b/apps/www/public/schema.json
index 7eea762..cf866a3 100644
--- a/apps/www/public/schema.json
+++ b/apps/www/public/schema.json
@@ -1,40 +1,40 @@
-{
-  "$schema": "http://json-schema.org/draft-07/schema#",
-  "type": "object",
-  "properties": {
-    "rsc": {
-      "type": "boolean"
-    },
-    "tailwind": {
-      "type": "object",
-      "properties": {
-        "config": {
-          "type": "string"
-        },
-        "css": {
-          "type": "string"
-        },
-        "prefix": {
-          "type": "string"
-        }
-      },
-      "required": ["config", "css"]
-    },
-    "aliases": {
-      "type": "object",
-      "properties": {
-        "components": {
-          "type": "string"
-        },
-        "utils": {
-          "type": "string"
-        },
-        "ui": {
-          "type": "string"
-        }
-      },
-      "required": ["components", "utils"]
-    }
-  },
-  "required": ["rsc", "tailwind", "aliases"]
-}
+{
+  "$schema": "http://json-schema.org/draft-07/schema#",
+  "type": "object",
+  "properties": {
+    "rsc": {
+      "type": "boolean"
+    },
+    "tailwind": {
+      "type": "object",
+      "properties": {
+        "config": {
+          "type": "string"
+        },
+        "css": {
+          "type": "string"
+        },
+        "prefix": {
+          "type": "string"
+        }
+      },
+      "required": ["config", "css"]
+    },
+    "aliases": {
+      "type": "object",
+      "properties": {
+        "components": {
+          "type": "string"
+        },
+        "utils": {
+          "type": "string"
+        },
+        "ui": {
+          "type": "string"
+        }
+      },
+      "required": ["components", "utils"]
+    }
+  },
+  "required": ["rsc", "tailwind", "aliases"]
+}
diff --git a/apps/www/src/app/_components/feature-section.tsx b/apps/www/src/app/_components/feature-section.tsx
index d4e96ec..6c04c4a 100644
--- a/apps/www/src/app/_components/feature-section.tsx
+++ b/apps/www/src/app/_components/feature-section.tsx
@@ -1,121 +1,121 @@
-import { Card } from "@kanpeki/ui/card";
-import { Icons } from "@kanpeki/ui/icons";
-import { siteConfig } from "~/config/site";
-
-const features = [
-  {
-    title: "Fully Customizable",
-    description:
-      "Easily customize the appearance and behavior of our components to match your brand and design.",
-    icon: <Icons.Palette className="size-6 text-amber-500" />,
-  },
-  {
-    title: "Accessible",
-    description:
-      "Our components follow the WAI-ARIA guidelines, provide keyboard support and sensible focus management.",
-    icon: <Icons.Accessibility className="size-6 text-violet-500" />,
-  },
-  {
-    title: "No runtime styles",
-    description:
-      "Kanpeki is based on Tailwind CSS, it means that there are no runtime styles, and no unnecessary classes in your bundle.",
-    icon: <Icons.Zap className="size-6 text-green-500" />,
-  },
-  {
-    title: "Minimal bundle size",
-    description:
-      "Install only the components and hooks you need, and keep your bundle size to a minimum.",
-    icon: <Icons.Rocket className="size-6 text-orange-500" />,
-  },
-  {
-    title: "TypeScript based",
-    description:
-      "Build type safe applications. Kanpeki is TypeScript first, and provides type definitions out of the box.",
-    icon: (
-      <svg
-        role="img"
-        aria-label="TypeScript"
-        xmlns="http://www.w3.org/2000/svg"
-        viewBox="0 0 24 24"
-        className="size-6 text-blue-500"
-        fill="none"
-        stroke="currentColor"
-        strokeLinecap="round"
-        strokeWidth={2}
-      >
-        <path d="M15 17.5c.32.32.754.5 1.207.5h.543c.69 0 1.25-.56 1.25-1.25v-.25a1.5 1.5 0 00-1.5-1.5 1.5 1.5 0 01-1.5-1.5v-.25c0-.69.56-1.25 1.25-1.25h.543c.453 0 .887.18 1.207.5M9 12h4m-2 0v6" />
-        <path d="M21 19V5a2 2 0 00-2-2H5a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2" />
-      </svg>
-    ),
-  },
-  {
-    title: "Composition Pattern",
-    description:
-      "Kanpeki is built using the composition pattern, which means that you can easily extend and compose components.",
-    icon: <Icons.Puzzle className="size-6 text-red-500" />,
-  },
-  {
-    title: "Open Source",
-    description:
-      "Kanpeki is open source, allowing you to contribute and help shape the future of the library.",
-    icon: (
-      <svg
-        role="img"
-        aria-label="GitHub"
-        xmlns="http://www.w3.org/2000/svg"
-        viewBox="0 0 24 24"
-        fill="none"
-        stroke="currentColor"
-        strokeWidth={2}
-        strokeLinecap="round"
-        strokeLinejoin="round"
-        className="size-6"
-      >
-        <path d="M15 22v-4a4.8 4.8 0 00-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C6 2 5 2 5 2c-.3 1.15-.3 2.35 0 3.5A5.403 5.403 0 004 9c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4M9 18c-4.51 2-5-2-7-2" />
-      </svg>
-    ),
-  },
-  {
-    title: "Extensive Community",
-    description:
-      "Join a growing community of developers who use and contribute to Kanpeki.",
-    icon: <Icons.Users className="size-6 text-fuchsia-500" />,
-  },
-] as const satisfies {
-  title: string;
-  description: string;
-  icon: React.JSX.Element;
-}[];
-
-export function FeatureSection() {
-  return (
-    <section className="space-y-16">
-      <div className="flex flex-col items-center gap-2 text-center">
-        <h2 className="font-bold text-3xl tracking-tighter sm:text-5xl">
-          Why Choose {siteConfig.name}?
-        </h2>
-        <p className="max-w-3xl text-balance text-muted-foreground md:text-xl/relaxed lg:text-base/relaxed xl:text-xl/relaxed">
-          {siteConfig.name} offers a wide range of high-quality, customizable
-          React components that will help you build stunning web applications
-          with ease.
-        </p>
-      </div>
-      <div className="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-4">
-        {features.map((feature) => (
-          <Card.Root key={feature.title}>
-            <Card.Header className="flex-row items-center gap-2">
-              <div className="grid place-content-center rounded-full bg-secondary/80 p-2">
-                {feature.icon}
-              </div>
-
-              <Card.Title>{feature.title}</Card.Title>
-            </Card.Header>
-            <Card.Content>
-              <Card.Description>{feature.description}</Card.Description>
-            </Card.Content>
-          </Card.Root>
-        ))}
-      </div>
-    </section>
-  );
-}
+import { Card } from "@kanpeki/ui/card";
+import { Icons } from "@kanpeki/ui/icons";
+import { siteConfig } from "~/config/site";
+
+const features = [
+  {
+    title: "Fully Customizable",
+    description:
+      "Easily customize the appearance and behavior of our components to match your brand and design.",
+    icon: <Icons.Palette className="size-6 text-amber-500" />,
+  },
+  {
+    title: "Accessible",
+    description:
+      "Our components follow the WAI-ARIA guidelines, provide keyboard support and sensible focus management.",
+    icon: <Icons.Accessibility className="size-6 text-violet-500" />,
+  },
+  {
+    title: "No runtime styles",
+    description:
+      "Kanpeki is based on Tailwind CSS, it means that there are no runtime styles, and no unnecessary classes in your bundle.",
+    icon: <Icons.Zap className="size-6 text-green-500" />,
+  },
+  {
+    title: "Minimal bundle size",
+    description:
+      "Install only the components and hooks you need, and keep your bundle size to a minimum.",
+    icon: <Icons.Rocket className="size-6 text-orange-500" />,
+  },
+  {
+    title: "TypeScript based",
+    description:
+      "Build type safe applications. Kanpeki is TypeScript first, and provides type definitions out of the box.",
+    icon: (
+      <svg
+        role="img"
+        aria-label="TypeScript"
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 24 24"
+        className="size-6 text-blue-500"
+        fill="none"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeWidth={2}
+      >
+        <path d="M15 17.5c.32.32.754.5 1.207.5h.543c.69 0 1.25-.56 1.25-1.25v-.25a1.5 1.5 0 00-1.5-1.5 1.5 1.5 0 01-1.5-1.5v-.25c0-.69.56-1.25 1.25-1.25h.543c.453 0 .887.18 1.207.5M9 12h4m-2 0v6" />
+        <path d="M21 19V5a2 2 0 00-2-2H5a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2" />
+      </svg>
+    ),
+  },
+  {
+    title: "Composition Pattern",
+    description:
+      "Kanpeki is built using the composition pattern, which means that you can easily extend and compose components.",
+    icon: <Icons.Puzzle className="size-6 text-red-500" />,
+  },
+  {
+    title: "Open Source",
+    description:
+      "Kanpeki is open source, allowing you to contribute and help shape the future of the library.",
+    icon: (
+      <svg
+        role="img"
+        aria-label="GitHub"
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth={2}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        className="size-6"
+      >
+        <path d="M15 22v-4a4.8 4.8 0 00-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C6 2 5 2 5 2c-.3 1.15-.3 2.35 0 3.5A5.403 5.403 0 004 9c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4M9 18c-4.51 2-5-2-7-2" />
+      </svg>
+    ),
+  },
+  {
+    title: "Extensive Community",
+    description:
+      "Join a growing community of developers who use and contribute to Kanpeki.",
+    icon: <Icons.Users className="size-6 text-fuchsia-500" />,
+  },
+] as const satisfies {
+  title: string;
+  description: string;
+  icon: React.JSX.Element;
+}[];
+
+export function FeatureSection() {
+  return (
+    <section className="space-y-16">
+      <div className="flex flex-col items-center gap-2 text-center">
+        <h2 className="font-bold text-3xl tracking-tighter sm:text-5xl">
+          Why Choose {siteConfig.name}?
+        </h2>
+        <p className="max-w-3xl text-balance text-muted-foreground md:text-xl/relaxed lg:text-base/relaxed xl:text-xl/relaxed">
+          {siteConfig.name} offers a wide range of high-quality, customizable
+          React components that will help you build stunning web applications
+          with ease.
+        </p>
+      </div>
+      <div className="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-4">
+        {features.map((feature) => (
+          <Card.Root key={feature.title}>
+            <Card.Header className="flex-row items-center gap-2">
+              <div className="grid place-content-center rounded-full bg-secondary/80 p-2">
+                {feature.icon}
+              </div>
+
+              <Card.Title>{feature.title}</Card.Title>
+            </Card.Header>
+            <Card.Content>
+              <Card.Description>{feature.description}</Card.Description>
+            </Card.Content>
+          </Card.Root>
+        ))}
+      </div>
+    </section>
+  );
+}
diff --git a/apps/www/src/app/_components/open-source-section.tsx b/apps/www/src/app/_components/open-source-section.tsx
index 879da4d..e21291b 100644
--- a/apps/www/src/app/_components/open-source-section.tsx
+++ b/apps/www/src/app/_components/open-source-section.tsx
@@ -44,13 +44,13 @@ async function getGitHubStars() {
     const response = await fetch(
       `https://api.github.com/repos/${siteConfig.links.github.replace(
         "https://github.com/",
-        "",
+        ""
       )}`,
       {
         next: {
           revalidate: 60,
         },
-      },
+      }
     );
 
     if (!response?.ok) {
diff --git a/apps/www/src/app/docs/[[...slug]]/_components/table-of-contents.tsx b/apps/www/src/app/docs/[[...slug]]/_components/table-of-contents.tsx
index 06f0d25..394c71e 100644
--- a/apps/www/src/app/docs/[[...slug]]/_components/table-of-contents.tsx
+++ b/apps/www/src/app/docs/[[...slug]]/_components/table-of-contents.tsx
@@ -41,7 +41,7 @@ function Tree({ tree, level = 1, activeItem }: TreeProps) {
               "inline-block no-underline transition-colors hover:text-foreground",
               item.url === `#${activeItem}`
                 ? "font-medium text-foreground"
-                : "text-muted-foreground",
+                : "text-muted-foreground"
             )}
           >
             {item.title}
diff --git a/apps/www/src/app/icons/_components/iconify-collection-list.tsx b/apps/www/src/app/icons/_components/iconify-collection-list.tsx
index 8431ff8..458c684 100644
--- a/apps/www/src/app/icons/_components/iconify-collection-list.tsx
+++ b/apps/www/src/app/icons/_components/iconify-collection-list.tsx
@@ -1,7 +1,8 @@
 "use client";
 
 import { Icon } from "@iconify-icon/react";
-import { Virtuoso } from "react-virtuoso";
+import { useVirtualizer } from "@tanstack/react-virtual";
+import { useRef } from "react";
 
 interface IconifyCollectionListProps {
   prefix: string;
@@ -12,13 +13,47 @@ export function IconifyCollectionList({
   prefix,
   icons,
 }: IconifyCollectionListProps) {
+  const parentRef = useRef<HTMLDivElement>(null);
+
+  const rowVirtualizer = useVirtualizer({
+    count: icons.length,
+    estimateSize: () => 48,
+    getScrollElement: () => parentRef.current,
+  });
+
   return (
-    <Virtuoso
-      components={{
-        List: (props) => <div className="flex flex-wrap gap-4" {...props} />,
+    <div
+      ref={parentRef}
+      style={{
+        height: "400px",
+        overflow: "auto", // Make it scroll!
       }}
-      data={icons}
-      itemContent={(_, icon) => <Icon key={icon} icon={`${prefix}:${icon}`} />}
-    />
+    >
+      {/* The large inner element to hold all of the items */}
+      <div
+        style={{
+          height: `${rowVirtualizer.getTotalSize()}px`,
+          width: "100%",
+          position: "relative",
+        }}
+      >
+        {/* Only the visible items in the virtualizer, manually positioned to be in view */}
+        {rowVirtualizer.getVirtualItems().map((virtualItem) => (
+          <div
+            key={virtualItem.key}
+            style={{
+              position: "absolute",
+              top: 0,
+              left: 0,
+              width: "100%",
+              height: `${virtualItem.size}px`,
+              transform: `translateY(${virtualItem.start}px)`,
+            }}
+          >
+            <Icon icon={`${prefix}:${icons[virtualItem.index]}`} />
+          </div>
+        ))}
+      </div>
+    </div>
   );
 }
diff --git a/apps/www/src/app/layout.tsx b/apps/www/src/app/layout.tsx
index b0676f9..82c6e0c 100644
--- a/apps/www/src/app/layout.tsx
+++ b/apps/www/src/app/layout.tsx
@@ -73,7 +73,7 @@ export default function Layout({ children }: LayoutProps) {
         className={cn(
           "relative grid min-h-dvh grid-rows-[auto,1fr,auto] bg-background font-sans text-foreground antialiased",
           fonts.sans.variable,
-          fonts.mono.variable,
+          fonts.mono.variable
         )}
       >
         <Providers>
diff --git a/apps/www/src/components/command-menu.tsx b/apps/www/src/components/command-menu.tsx
index bb6463f..2cbc3d6 100644
--- a/apps/www/src/components/command-menu.tsx
+++ b/apps/www/src/components/command-menu.tsx
@@ -8,9 +8,14 @@ import { useTheme } from "next-themes";
 import Link from "next/link";
 import { useRouter } from "next/navigation";
 import { useEffect, useState } from "react";
-import { docsConfig } from "~/config/docs";
+import type { NavItem, SidebarNavItem } from "~/config/docs";
 
-export function CommandMenu() {
+interface CommandMenuProps {
+  mainNav: NavItem[];
+  sidebarNav: SidebarNavItem[];
+}
+
+export function CommandMenu({ mainNav, sidebarNav }: CommandMenuProps) {
   const [isOpen, setIsOpen] = useState(false);
   const { setTheme } = useTheme();
   const router = useRouter();
@@ -35,7 +40,7 @@ export function CommandMenu() {
           setIsOpen((open) => !open);
         }
       },
-      { signal: controller.signal },
+      { signal: controller.signal }
     );
 
     return () => controller.abort();
@@ -75,7 +80,7 @@ export function CommandMenu() {
             <Command.List className="max-h-full">
               <Command.Empty>No results found.</Command.Empty>
               <Command.Group heading="Links">
-                {docsConfig.mainNav.map((navItem) => (
+                {mainNav.map((navItem) => (
                   <Command.Item
                     key={navItem.href}
                     value={navItem.title}
@@ -90,7 +95,7 @@ export function CommandMenu() {
                   </Command.Item>
                 ))}
               </Command.Group>
-              {docsConfig.sidebarNav.map((group) => (
+              {sidebarNav.map((group) => (
                 <Command.Group key={group.title} heading={group.title}>
                   {group.items?.map((navItem) => (
                     <Command.Item
diff --git a/apps/www/src/components/language-icon.tsx b/apps/www/src/components/language-icon.tsx
index 5ab7e9a..94bd54c 100644
--- a/apps/www/src/components/language-icon.tsx
+++ b/apps/www/src/components/language-icon.tsx
@@ -28,7 +28,7 @@ const extensionMap = new Map([
 function convertPatternToRegex(pattern: string): string {
   return pattern.replace(
     /{([^}]+)}/g,
-    (_, group) => `(${group.replace(/,/g, "|")})`,
+    (_, group) => `(${group.replace(/,/g, "|")})`
   );
 }
 
diff --git a/apps/www/src/components/main-nav.tsx b/apps/www/src/components/main-nav.tsx
index 67f558f..5a01e2c 100644
--- a/apps/www/src/components/main-nav.tsx
+++ b/apps/www/src/components/main-nav.tsx
@@ -4,10 +4,14 @@ import { Badge } from "@kanpeki/ui/badge";
 import { Icons } from "@kanpeki/ui/icons";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
-import { type NavItem, docsConfig } from "~/config/docs";
+import type { NavItem } from "~/config/docs";
 import { siteConfig } from "~/config/site";
 
-export function MainNav() {
+interface MainNavProps {
+  mainNav: NavItem[];
+}
+
+export function MainNav({ mainNav }: MainNavProps) {
   const pathname = usePathname();
 
   return (
@@ -18,7 +22,7 @@ export function MainNav() {
         <Badge variant="secondary">Beta</Badge>
       </Link>
       <nav className="flex items-center gap-4 text-sm lg:gap-6">
-        {docsConfig.mainNav.map((item) => (
+        {mainNav.map((item) => (
           <MainNavLink key={item.href} item={item} pathname={pathname} />
         ))}
       </nav>
diff --git a/apps/www/src/components/mdx/component-source.tsx b/apps/www/src/components/mdx/component-source.tsx
index c0ea52e..2d6ce32 100644
--- a/apps/www/src/components/mdx/component-source.tsx
+++ b/apps/www/src/components/mdx/component-source.tsx
@@ -26,7 +26,7 @@ export function ComponentSource({ children }: ComponentSourceProps) {
         <div
           className={cn(
             "absolute flex items-center justify-center bg-gradient-to-b from-transparent to-zinc-950/90 p-2",
-            isOpen ? "inset-x-0 bottom-8 h-12" : "inset-0 mt-12",
+            isOpen ? "inset-x-0 bottom-8 h-12" : "inset-0 mt-12"
           )}
         >
           <Button
diff --git a/apps/www/src/components/mdx/copy-button.tsx b/apps/www/src/components/mdx/copy-button.tsx
index 8863e5c..3a97fd3 100644
--- a/apps/www/src/components/mdx/copy-button.tsx
+++ b/apps/www/src/components/mdx/copy-button.tsx
@@ -20,7 +20,7 @@ export function CopyButton({ text, className, ...props }: CopyButtonProps) {
     <Button
       className={cn(
         "size-8 bg-secondary hover:bg-background focus-visible:opacity-100 group-hover:opacity-100 [@media(pointer:fine)]:opacity-0",
-        className,
+        className
       )}
       size="icon"
       variant="outline"
@@ -60,7 +60,7 @@ export function CopyNpmButton({
             className={cn(
               "size-8 bg-secondary hover:bg-background focus-visible:opacity-100 group-hover:opacity-100 [@media(pointer:fine)]:opacity-0",
               isOpen && "!opacity-100 bg-background",
-              className,
+              className
             )}
             size="icon"
             variant="outline"
diff --git a/apps/www/src/components/mdx/mdx-components.tsx b/apps/www/src/components/mdx/mdx-components.tsx
index ecc0fc2..884c2f7 100644
--- a/apps/www/src/components/mdx/mdx-components.tsx
+++ b/apps/www/src/components/mdx/mdx-components.tsx
@@ -81,7 +81,7 @@ export const mdxComponents = {
     <blockquote
       className={cn(
         "mt-6 border-l-2 pl-6 italic *:text-muted-foreground",
-        className,
+        className
       )}
       {...props}
     />
@@ -103,7 +103,7 @@ export const mdxComponents = {
     <th
       className={cn(
         "border px-2 py-2 text-left font-bold sm:px-4 [&[align=center]]:text-center [&[align=right]]:text-right",
-        className,
+        className
       )}
       {...props}
     />
@@ -112,7 +112,7 @@ export const mdxComponents = {
     <td
       className={cn(
         "border px-2 py-2 text-left sm:px-4 [&[align=center]]:text-center [&[align=right]]:text-right",
-        className,
+        className
       )}
       {...props}
     />
@@ -121,7 +121,7 @@ export const mdxComponents = {
     <code
       className={cn(
         "relative rounded bg-muted px-1 py-0.5 font-mono text-sm",
-        className,
+        className
       )}
       {...props}
     />
@@ -131,7 +131,7 @@ export const mdxComponents = {
     <figure
       className={cn(
         "group relative mt-6 overflow-hidden rounded-lg border text-sm",
-        className,
+        className
       )}
       {...props}
     />
diff --git a/apps/www/src/components/mdx/steps.tsx b/apps/www/src/components/mdx/steps.tsx
index c6ac3d3..ca19518 100644
--- a/apps/www/src/components/mdx/steps.tsx
+++ b/apps/www/src/components/mdx/steps.tsx
@@ -6,7 +6,7 @@ export function Steps({ className, ...props }: React.ComponentProps<"div">) {
       {...props}
       className={cn(
         "steps mb-12 ml-4 border-l pl-8 [counter-reset:step]",
-        className,
+        className
       )}
     />
   );
@@ -18,7 +18,7 @@ export function Step({ className, ...props }: React.ComponentProps<"h3">) {
       {...props}
       className={cn(
         "heading mt-8 scroll-m-20 font-semibold text-xl tracking-tight",
-        className,
+        className
       )}
     />
   );
diff --git a/apps/www/src/components/mdx/tabs.tsx b/apps/www/src/components/mdx/tabs.tsx
index f1c38dc..020430b 100644
--- a/apps/www/src/components/mdx/tabs.tsx
+++ b/apps/www/src/components/mdx/tabs.tsx
@@ -59,5 +59,5 @@ export const Tabs = Object.assign(
     List: TabsList,
     Trigger: TabsTrigger,
     Content: TabsContent,
-  },
+  }
 );
diff --git a/apps/www/src/components/mobile-nav.tsx b/apps/www/src/components/mobile-nav.tsx
index 8559dd1..941001d 100644
--- a/apps/www/src/components/mobile-nav.tsx
+++ b/apps/www/src/components/mobile-nav.tsx
@@ -8,10 +8,15 @@ import { cn } from "@kanpeki/utils/cn";
 import Link, { type LinkProps } from "next/link";
 import { useRouter } from "next/navigation";
 import { Fragment, useState } from "react";
-import { docsConfig } from "~/config/docs";
+import type { NavItem, SidebarNavItem } from "~/config/docs";
 import { siteConfig } from "~/config/site";
 
-export function MobileNav() {
+interface MobileNavProps {
+  mainNav: NavItem[];
+  sidebarNav: SidebarNavItem[];
+}
+
+export function MobileNav({ mainNav, sidebarNav }: MobileNavProps) {
   const [open, setOpen] = useState(false);
 
   return (
@@ -26,14 +31,14 @@ export function MobileNav() {
         <div
           className={cn(
             "-translate-y-1 absolute h-0.5 w-3.5 transform-gpu bg-muted-foreground transition-transform",
-            open && "translate-y-0 rotate-45",
+            open && "translate-y-0 rotate-45"
           )}
           aria-hidden
         />
         <div
           className={cn(
             "absolute h-0.5 w-3.5 translate-y-1 transform-gpu bg-muted-foreground transition-transform",
-            open && "-rotate-45 translate-y-0",
+            open && "-rotate-45 translate-y-0"
           )}
           aria-hidden
         />
@@ -52,10 +57,10 @@ export function MobileNav() {
             <Icons.Logo className="mr-2 size-4" />
             <span className="font-bold">{siteConfig.name}</span>
           </MobileLink>
-          <ScrollArea.Root className="my-4 h-[calc(100dvh-8rem)] pb-10 pl-6 [mask-image:linear-gradient(black_80%,transparent)]">
+          <ScrollArea.Root className="my-4 h-[calc(100dvh-8rem)] pl-6 [mask-image:linear-gradient(black_80%,transparent)]">
             <ScrollArea.Viewport>
               <div className="flex flex-col space-y-3">
-                {docsConfig.mainNav?.map((item) => (
+                {mainNav.map((item) => (
                   <MobileLink
                     key={item.href}
                     href={item.href}
@@ -66,7 +71,7 @@ export function MobileNav() {
                 ))}
               </div>
               <div className="space-y-2">
-                {docsConfig.sidebarNav.map((item) => (
+                {sidebarNav.map((item) => (
                   <div key={item.title} className="flex flex-col gap-3 pt-6">
                     <h4 className="font-medium">{item.title}</h4>
                     {item?.items?.length &&
diff --git a/apps/www/src/components/site-header.tsx b/apps/www/src/components/site-header.tsx
index 58c0d6b..4d10134 100644
--- a/apps/www/src/components/site-header.tsx
+++ b/apps/www/src/components/site-header.tsx
@@ -1,20 +1,29 @@
 import { Icons } from "@kanpeki/ui/icons";
 import { LinkButton } from "@kanpeki/ui/link-button";
+import { docsConfig } from "~/config/docs";
 import { siteConfig } from "~/config/site";
 import { CommandMenu } from "./command-menu";
 import { MainNav } from "./main-nav";
 import { MobileNav } from "./mobile-nav";
 import { ModeToggle } from "./mode-toggle";
 
+const filteredMainNav = docsConfig.mainNav.filter((item) => !item.disabled);
+const filteredSidebarNav = docsConfig.sidebarNav.filter(
+  (item) => !item.disabled
+);
+
 export function SiteHeader() {
   return (
     <header className="sticky top-0 z-50 w-full border-border/40 border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
       <div className="container flex h-14 max-w-screen-2xl items-center">
-        <MainNav />
-        <MobileNav />
+        <MainNav mainNav={docsConfig.mainNav} />
+        <MobileNav mainNav={filteredMainNav} sidebarNav={filteredSidebarNav} />
         <div className="flex flex-1 items-center justify-between space-x-2 md:justify-end">
           <div className="w-full flex-1 md:w-auto md:flex-none">
-            <CommandMenu />
+            <CommandMenu
+              mainNav={docsConfig.mainNav}
+              sidebarNav={docsConfig.sidebarNav}
+            />
           </div>
           <nav className="flex items-center">
             <LinkButton
diff --git a/apps/www/src/config/docs.ts b/apps/www/src/config/docs.ts
index f47d0d3..e908af4 100644
--- a/apps/www/src/config/docs.ts
+++ b/apps/www/src/config/docs.ts
@@ -41,6 +41,10 @@ export const docsConfig: DocsConfig = {
           title: "Dark Mode",
           href: "/docs/dark-mode",
         },
+        {
+          title: "CLI",
+          href: "/docs/cli",
+        },
       ],
     },
     {
diff --git a/apps/www/src/content/docs/cli.mdx b/apps/www/src/content/docs/cli.mdx
new file mode 100644
index 0000000..35f6fe6
--- /dev/null
+++ b/apps/www/src/content/docs/cli.mdx
@@ -0,0 +1,37 @@
+---
+title: CLI
+description: Use the CLI to add components to your project.
+---
+
+## init
+
+Use the `init` command to initialize configuration and dependencies for a new project.
+
+The `init` command installs dependencies, adds the `cn` util, configures `tailwind.config.ts`, and CSS variables for the project.
+
+```bash
+npx kanpeki-ui@latest init
+```
+
+You will be asked a few questions to configure `kanpeki.json`:
+
+```txt
+Where is your global CSS file? › › src/styles/globals.css
+Where is your tailwind.config.ts located? › tailwind.config.ts
+Configure the import alias for components: › ~/components
+Configure the import alias for utils: › ~/utils
+Are you using React Server Components? › no / yes
+```
+
+### Options
+
+```txt
+Usage: kanpeki-ui init [options]
+
+initialize your project and install dependencies
+
+Options:
+  -y, --yes        skip confirmation prompt. (default: false)
+  -c, --cwd <cwd>  the working directory. defaults to the current directory.
+  -h, --help       display help for command
+```
diff --git a/apps/www/src/hooks/use-copy-to-clipboard.ts b/apps/www/src/hooks/use-copy-to-clipboard.ts
index ba9cca8..3ab1c1b 100644
--- a/apps/www/src/hooks/use-copy-to-clipboard.ts
+++ b/apps/www/src/hooks/use-copy-to-clipboard.ts
@@ -26,7 +26,7 @@ export const useCopyToClipboard = (): [
 
     if (!navigator?.clipboard) {
       toast.error(
-        "Unable to access clipboard. Please grant permission to enable clipboard access.",
+        "Unable to access clipboard. Please grant permission to enable clipboard access."
       );
       return;
     }
@@ -41,7 +41,7 @@ export const useCopyToClipboard = (): [
       }, timeout ?? 2000);
     } catch {
       toast.error(
-        errorMessage ?? "Unable to copy to clipboard. Please try again.",
+        errorMessage ?? "Unable to copy to clipboard. Please try again."
       );
     }
   };
diff --git a/apps/www/src/lib/iconify.ts b/apps/www/src/lib/iconify.ts
index 976de93..1370268 100644
--- a/apps/www/src/lib/iconify.ts
+++ b/apps/www/src/lib/iconify.ts
@@ -1,7 +1,7 @@
 export async function getIconifyCollections(options?: RequestInit) {
   const response = await fetch(
     "https://api.iconify.design/collections",
-    options,
+    options
   );
 
   if (!response.ok) {
@@ -12,7 +12,7 @@ export async function getIconifyCollections(options?: RequestInit) {
 }
 
 export function getCollectionsGroupedByCategory(
-  collections: IconifyCollections,
+  collections: IconifyCollections
 ) {
   const groupedCollections: {
     category: string;
@@ -27,7 +27,7 @@ export function getCollectionsGroupedByCategory(
     }
 
     const group = groupedCollections.find(
-      (group) => group.category === category,
+      (group) => group.category === category
     );
 
     if (group) {
diff --git a/apps/www/src/lib/rehype-command.ts b/apps/www/src/lib/rehype-command.ts
index 03a5055..11905f1 100644
--- a/apps/www/src/lib/rehype-command.ts
+++ b/apps/www/src/lib/rehype-command.ts
@@ -13,15 +13,15 @@ export const rehypeCommand = () => (tree: UnistTree) => {
       node.properties.__npmCommand__ = npmCommand;
       node.properties.__yarnCommand__ = npmCommand.replace(
         "npm install",
-        "yarn add",
+        "yarn add"
       );
       node.properties.__pnpmCommand__ = npmCommand.replace(
         "npm install",
-        "pnpm add",
+        "pnpm add"
       );
       node.properties.__bunCommand__ = npmCommand.replace(
         "npm install",
-        "bun add",
+        "bun add"
       );
     }
 
@@ -31,15 +31,15 @@ export const rehypeCommand = () => (tree: UnistTree) => {
       node.properties.__npmCommand__ = npmCommand;
       node.properties.__yarnCommand__ = npmCommand.replace(
         "npx create-",
-        "yarn create ",
+        "yarn create "
       );
       node.properties.__pnpmCommand__ = npmCommand.replace(
         "npx create-",
-        "pnpm create ",
+        "pnpm create "
       );
       node.properties.__bunCommand__ = npmCommand.replace(
         "npx create-",
-        "bun create",
+        "bun create"
       );
     }
 
diff --git a/apps/www/src/lib/rehype-component.ts b/apps/www/src/lib/rehype-component.ts
index 67e73b6..40e1798 100644
--- a/apps/www/src/lib/rehype-component.ts
+++ b/apps/www/src/lib/rehype-component.ts
@@ -25,7 +25,7 @@ function processComponentSource(node: UnistNode) {
     try {
       // Read the source file.
       const filePath = path.resolve(
-        `../../packages/components/ui/src/${name}.tsx`,
+        `../../packages/components/ui/src/${name}.tsx`
       );
       const source = replaceImports(fs.readFileSync(filePath, "utf8"));
 
@@ -50,7 +50,7 @@ function processComponentSource(node: UnistNode) {
               ],
             }),
           ],
-        }),
+        })
       );
     } catch (error) {
       console.error(error);
@@ -69,7 +69,7 @@ function processComponentPreview(node: UnistNode) {
     try {
       // Read the source file.
       const filePath = path.resolve(
-        `../../packages/components/demos/src/${name}.tsx`,
+        `../../packages/components/demos/src/${name}.tsx`
       );
       const source = replaceImports(fs.readFileSync(filePath, "utf8"));
 
@@ -93,7 +93,7 @@ function processComponentPreview(node: UnistNode) {
               ],
             }),
           ],
-        }),
+        })
       );
     } catch (error) {
       console.error(error);
diff --git a/apps/www/src/styles/link.ts b/apps/www/src/styles/link.ts
index 88d3469..3c772e1 100644
--- a/apps/www/src/styles/link.ts
+++ b/apps/www/src/styles/link.ts
@@ -1,5 +1,5 @@
-import { tv } from "tailwind-variants";
-
-export const LinkStyles = tv({
-  base: ["font-medium underline underline-offset-4"],
-});
+import { tv } from "tailwind-variants";
+
+export const LinkStyles = tv({
+  base: ["font-medium underline underline-offset-4"],
+});
diff --git a/apps/www/src/utils/get-doc-by-slug.ts b/apps/www/src/utils/get-doc-by-slug.ts
index 20822ad..1b86706 100644
--- a/apps/www/src/utils/get-doc-by-slug.ts
+++ b/apps/www/src/utils/get-doc-by-slug.ts
@@ -1,11 +1,11 @@
-import { docs } from "~:content";
-
-export function getDocBySlug(slug: string[] | undefined) {
-  const doc = docs.find((doc) => doc.slugAsParams === slug?.join("/"));
-
-  if (!doc) {
-    return null;
-  }
-
-  return doc;
-}
+import { docs } from "~:content";
+
+export function getDocBySlug(slug: string[] | undefined) {
+  const doc = docs.find((doc) => doc.slugAsParams === slug?.join("/"));
+
+  if (!doc) {
+    return null;
+  }
+
+  return doc;
+}
diff --git a/apps/www/src/utils/get-item-ids.ts b/apps/www/src/utils/get-item-ids.ts
index 63e7174..a8d00f8 100644
--- a/apps/www/src/utils/get-item-ids.ts
+++ b/apps/www/src/utils/get-item-ids.ts
@@ -1,14 +1,14 @@
-import type { Docs } from "~:content";
-
-function getUrls(toc: Docs["toc"]): string[] {
-  return toc.flatMap((item) => [
-    item.url,
-    ...(item.items ? getUrls(item.items) : []),
-  ]);
-}
-
-export function getItemIds(toc: Docs["toc"]) {
-  return getUrls(toc)
-    .filter(Boolean)
-    .map((id) => id.split("#")[1]);
-}
+import type { Docs } from "~:content";
+
+function getUrls(toc: Docs["toc"]): string[] {
+  return toc.flatMap((item) => [
+    item.url,
+    ...(item.items ? getUrls(item.items) : []),
+  ]);
+}
+
+export function getItemIds(toc: Docs["toc"]) {
+  return getUrls(toc)
+    .filter(Boolean)
+    .map((id) => id.split("#")[1]);
+}
diff --git a/biome.json b/biome.json
index 51738b0..6a768c9 100644
--- a/biome.json
+++ b/biome.json
@@ -33,7 +33,8 @@
         "useFilenamingConvention": "off"
       },
       "correctness": {
-        "noNodejsModules": "off"
+        "noNodejsModules": "off",
+        "noUnusedVariables": "error"
       }
     }
   },
@@ -69,6 +70,9 @@
     }
   ],
   "javascript": {
-    "globals": ["React"]
+    "globals": ["React"],
+    "formatter": {
+      "trailingCommas": "es5"
+    }
   }
 }
diff --git a/config/tsconfig/package.json b/config/tsconfig/package.json
index c504137..6958c6e 100644
--- a/config/tsconfig/package.json
+++ b/config/tsconfig/package.json
@@ -2,8 +2,5 @@
   "name": "@kanpeki/tsconfig",
   "private": false,
   "version": "0.0.0",
-  "files": [
-    "lib.json",
-    "next.json"
-  ]
+  "files": ["lib.json", "next.json"]
 }
diff --git a/package.json b/package.json
index 832d749..3b99b3e 100644
--- a/package.json
+++ b/package.json
@@ -31,12 +31,8 @@
   },
   "packageManager": "pnpm@9.5.0",
   "lint-staged": {
-    "*.{js,ts,tsx}": [
-      "biome check --fix --no-errors-on-unmatched"
-    ],
-    "*.{ts,tsx}": [
-      "bash -c 'pnpm run type-check'"
-    ]
+    "*.{js,ts,tsx}": ["biome check --fix --no-errors-on-unmatched"],
+    "*.{ts,tsx}": ["bash -c 'pnpm run type-check'"]
   },
   "config": {
     "commitizen": {
diff --git a/packages/cli/kanpeki.json b/packages/cli/kanpeki.json
index 2f33fec..c12f393 100644
--- a/packages/cli/kanpeki.json
+++ b/packages/cli/kanpeki.json
@@ -1,12 +1,12 @@
-{
-  "$schema": "http://localhost:3000/schema.json",
-  "rsc": true,
-  "tailwind": {
-    "config": "tailwind.config.ts",
-    "css": "src/styles/globals.css"
-  },
-  "aliases": {
-    "components": "@kanpeki/ui",
-    "utils": "@kanpeki/utils"
-  }
-}
+{
+  "$schema": "http://localhost:3000/schema.json",
+  "rsc": true,
+  "tailwind": {
+    "config": "tailwind.config.ts",
+    "css": "src/styles/globals.css"
+  },
+  "aliases": {
+    "components": "@kanpeki/ui",
+    "utils": "@kanpeki/utils"
+  }
+}
diff --git a/packages/cli/package.json b/packages/cli/package.json
index d524deb..94cace2 100644
--- a/packages/cli/package.json
+++ b/packages/cli/package.json
@@ -18,9 +18,7 @@
   "main": "./dist/index.js",
   "exports": "./dist/index.js",
   "bin": "./dist/index.js",
-  "files": [
-    "dist"
-  ],
+  "files": ["dist"],
   "scripts": {
     "dev": "tsup --watch",
     "build": "tsup",
diff --git a/packages/cli/src/commands/icon/format.ts b/packages/cli/src/commands/icon/format.ts
index 6f18550..07a7a9b 100644
--- a/packages/cli/src/commands/icon/format.ts
+++ b/packages/cli/src/commands/icon/format.ts
@@ -23,7 +23,7 @@ export const format = new Command()
   .option(
     "-c, --cwd <cwd>",
     "the working directory. defaults to the current directory.",
-    process.cwd(),
+    process.cwd()
   )
   .action(async (options: FormatOptions) => {
     try {
@@ -31,7 +31,7 @@ export const format = new Command()
 
       if (!existsSync(options.cwd)) {
         throw new Error(
-          `The path ${options.cwd} does not exist. Please try again.`,
+          `The path ${options.cwd} does not exist. Please try again.`
         );
       }
 
@@ -39,8 +39,8 @@ export const format = new Command()
       if (!config) {
         logger.warn(
           `Configuration is missing. Please run ${picocolors.green(
-            "init",
-          )} to create a kanpeki.json file.`,
+            "init"
+          )} to create a kanpeki.json file.`
         );
         process.exit(1);
       }
@@ -48,11 +48,11 @@ export const format = new Command()
       const iconsFilePath = path.join(
         config.resolvedPaths.components ?? "",
         "ui",
-        "icons.tsx",
+        "icons.tsx"
       );
       if (!existsSync(iconsFilePath)) {
         throw new Error(
-          `The file ${iconsFilePath} does not exist. Please create it first.`,
+          `The file ${iconsFilePath} does not exist. Please create it first.`
         );
       }
       const readStream = createReadStream(iconsFilePath, "utf8");
@@ -60,7 +60,7 @@ export const format = new Command()
       const outputFilePath = path.join(
         config.resolvedPaths.components ?? "",
         "ui",
-        "icons.sorted.tsx",
+        "icons.sorted.tsx"
       );
       const writeStream = createWriteStream(outputFilePath, "utf8");
 
@@ -86,7 +86,7 @@ export const format = new Command()
               line,
               writeStream,
               entries,
-              currentEntry,
+              currentEntry
             );
             isInIconsBlock = false;
             return;
@@ -122,7 +122,7 @@ function handleIconsEnd(
   line: string,
   writeStream: NodeJS.WritableStream,
   entries: string[],
-  currentEntry: string,
+  currentEntry: string
 ) {
   if (currentEntry.trim()) {
     entries.push(currentEntry);
@@ -136,7 +136,7 @@ function handleIconsEnd(
 function handleIconEntry(
   line: string,
   entries: string[],
-  currentEntry: string,
+  currentEntry: string
 ) {
   if (line.trim().endsWith("),")) {
     entries.push(`${currentEntry}${line}\n`);
@@ -148,7 +148,7 @@ function handleIconEntry(
 
 function writeSortedEntries(
   entries: string[],
-  writeStream: NodeJS.WritableStream,
+  writeStream: NodeJS.WritableStream
 ) {
   entries.sort((a, b) => {
     const nameA = a.split(":")[0].trim();
diff --git a/packages/cli/src/commands/icon/index.ts b/packages/cli/src/commands/icon/index.ts
index b520158..eaf0cbf 100644
--- a/packages/cli/src/commands/icon/index.ts
+++ b/packages/cli/src/commands/icon/index.ts
@@ -1,6 +1,6 @@
-import { Command } from "commander";
-import { format } from "./format";
-
-export const icon = new Command("icon");
-
-icon.addCommand(format);
+import { Command } from "commander";
+import { format } from "./format";
+
+export const icon = new Command("icon");
+
+icon.addCommand(format);
diff --git a/packages/cli/src/commands/init.ts b/packages/cli/src/commands/init.ts
index e2a93aa..07a95d2 100644
--- a/packages/cli/src/commands/init.ts
+++ b/packages/cli/src/commands/init.ts
@@ -53,13 +53,13 @@ export const init = new Command()
   .option(
     "-c, --cwd <cwd>",
     "the working directory. defaults to the current directory.",
-    process.cwd(),
+    process.cwd()
   )
   .action(async (options: InitOptions) => {
     try {
       if (!existsSync(options.cwd)) {
         throw new Error(
-          `The path ${options.cwd} does not exist. Please try again.`,
+          `The path ${options.cwd} does not exist. Please try again.`
         );
       }
 
@@ -75,7 +75,7 @@ export const init = new Command()
         const config = await promptForConfig(
           options.cwd,
           existingConfig,
-          options.yes,
+          options.yes
         );
         await runInit(options.cwd, config);
       }
@@ -83,8 +83,8 @@ export const init = new Command()
       logger.info("");
       logger.info(
         `${picocolors.green(
-          "Success!",
-        )} Project initialization completed. You may now add components.`,
+          "Success!"
+        )} Project initialization completed. You may now add components.`
       );
       logger.info("");
     } catch (err) {
@@ -95,7 +95,7 @@ export const init = new Command()
 async function promptForConfig(
   cwd: string,
   defaultConfig: Config | null = null,
-  skip = false,
+  skip = false
 ) {
   const highlight = (text: string) => picocolors.cyan(text);
 
@@ -118,7 +118,7 @@ async function promptForConfig(
     tailwindPrefix: () =>
       text({
         message: `Are you using a custom ${highlight(
-          "tailwind prefix eg. tw-",
+          "tailwind prefix eg. tw-"
         )}? (Leave blank if not)`,
         initialValue: "",
       }),
@@ -179,9 +179,9 @@ async function writeConfig(cwd: string, config: Config) {
         aliases: config.aliases,
       } satisfies Config,
       null,
-      2,
+      2
     ),
-    "utf8",
+    "utf8"
   );
   s.stop("Configuration written.");
 }
@@ -213,14 +213,14 @@ async function runInit(cwd: string, config: ConfigWithResolvedPaths) {
     getTwTemplate({
       prefix: config.tailwind.prefix,
     }),
-    "utf8",
+    "utf8"
   );
 
   // Write globals.css file
   await fs.writeFile(
     config.resolvedPaths.tailwindCss,
     cssGlobalsTemplate,
-    "utf8",
+    "utf8"
   );
 
   // Write cn file.
@@ -232,7 +232,7 @@ async function runInit(cwd: string, config: ConfigWithResolvedPaths) {
 
   const dependenciesSpinner = spinner();
   dependenciesSpinner.start(
-    `Installing dependencies with ${packageManager}...`,
+    `Installing dependencies with ${packageManager}...`
   );
 
   await installDeps(packageManager, cwd, PROJECT_DEPENDENCIES, ["-D"]);
diff --git a/packages/cli/src/templates/cn.ts b/packages/cli/src/templates/cn.ts
index 21bc6eb..251bc2b 100644
--- a/packages/cli/src/templates/cn.ts
+++ b/packages/cli/src/templates/cn.ts
@@ -1,7 +1,7 @@
-export const cnTemplate = `import { type ClassValue, clsx } from "clsx";
-import { cn as _cn } from "tailwind-variants";
-
-export function cn(...inputs: ClassValue[]) {
-  return _cn(clsx(inputs))({ twMerge: true });
-}
-`;
+export const cnTemplate = `import { type ClassValue, clsx } from "clsx";
+import { cn as _cn } from "tailwind-variants";
+
+export function cn(...inputs: ClassValue[]) {
+  return _cn(clsx(inputs))({ twMerge: true });
+}
+`;
diff --git a/packages/cli/src/templates/globals.ts b/packages/cli/src/templates/globals.ts
index aef1579..3f415ef 100644
--- a/packages/cli/src/templates/globals.ts
+++ b/packages/cli/src/templates/globals.ts
@@ -1,96 +1,96 @@
-export const cssGlobalsTemplate = `@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-@layer base {
-  :root {
-    --background: 0 0% 100%;
-    --foreground: 240 10% 3.9%;
-
-    --card: 0 0% 100%;
-    --card-foreground: 240 10% 3.9%;
-
-    --popover: 0 0% 100%;
-    --popover-foreground: 240 10% 3.9%;
-
-    --primary: 240 5.9% 10%;
-    --primary-foreground: 0 0% 98%;
-
-    --secondary: 240 4.8% 95.9%;
-    --secondary-foreground: 240 5.9% 10%;
-
-    --muted: 240 4.8% 95.9%;
-    --muted-foreground: 240 3.8% 46.1%;
-
-    --accent: 240 4.8% 95.9%;
-    --accent-foreground: 240 5.9% 10%;
-
-    --destructive: 0 84.2% 60.2%;
-    --destructive-foreground: 0 0% 98%;
-
-    --border: 240 5.9% 90%;
-    --input: 240 5.9% 90%;
-    --ring: 240 10% 3.9%;
-
-    --radius: 0.5rem;
-  }
-
-  .dark:root {
-    --background: 240 10% 3.9%;
-    --foreground: 0 0% 98%;
-
-    --card: 240 10% 3.9%;
-    --card-foreground: 0 0% 98%;
-
-    --popover: 240 10% 3.9%;
-    --popover-foreground: 0 0% 98%;
-
-    --primary: 50 100% 50%;
-    --primary-foreground: 240 5.9% 10%;
-
-    --secondary: 240 3.7% 15.9%;
-    --secondary-foreground: 0 0% 98%;
-
-    --muted: 240 3.7% 15.9%;
-    --muted-foreground: 240 5% 64.9%;
-
-    --accent: 240 3.7% 15.9%;
-    --accent-foreground: 0 0% 98%;
-
-    --destructive: 0 62.8% 30.6%;
-    --destructive-foreground: 0 0% 98%;
-
-    --border: 240 3.7% 15.9%;
-    --input: 240 3.7% 15.9%;
-    --ring: 240 4.9% 83.9%;
-  }
-
-  * {
-    @apply border-border;
-  }
-
-  html {
-    scroll-behavior: smooth;
-  }
-  
-  body {
-    font-feature-settings:
-      "rlig" 1,
-      "calt" 1;
-  }
-
-  ::-webkit-scrollbar {
-    @apply size-1;
-  }
-  
-  ::-webkit-scrollbar-thumb {
-    @apply bg-foreground/40 rounded-lg transition-colors;
-  }
-  
-  ::-webkit-scdrollbar-thumb:hover,
-  ::-webkit-scrollbar-thumb:active {
-    @apply bg-foreground/60;
-  }
-}
-
-`;
+export const cssGlobalsTemplate = `@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 240 10% 3.9%;
+
+    --card: 0 0% 100%;
+    --card-foreground: 240 10% 3.9%;
+
+    --popover: 0 0% 100%;
+    --popover-foreground: 240 10% 3.9%;
+
+    --primary: 240 5.9% 10%;
+    --primary-foreground: 0 0% 98%;
+
+    --secondary: 240 4.8% 95.9%;
+    --secondary-foreground: 240 5.9% 10%;
+
+    --muted: 240 4.8% 95.9%;
+    --muted-foreground: 240 3.8% 46.1%;
+
+    --accent: 240 4.8% 95.9%;
+    --accent-foreground: 240 5.9% 10%;
+
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 0 0% 98%;
+
+    --border: 240 5.9% 90%;
+    --input: 240 5.9% 90%;
+    --ring: 240 10% 3.9%;
+
+    --radius: 0.5rem;
+  }
+
+  .dark:root {
+    --background: 240 10% 3.9%;
+    --foreground: 0 0% 98%;
+
+    --card: 240 10% 3.9%;
+    --card-foreground: 0 0% 98%;
+
+    --popover: 240 10% 3.9%;
+    --popover-foreground: 0 0% 98%;
+
+    --primary: 50 100% 50%;
+    --primary-foreground: 240 5.9% 10%;
+
+    --secondary: 240 3.7% 15.9%;
+    --secondary-foreground: 0 0% 98%;
+
+    --muted: 240 3.7% 15.9%;
+    --muted-foreground: 240 5% 64.9%;
+
+    --accent: 240 3.7% 15.9%;
+    --accent-foreground: 0 0% 98%;
+
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 0 0% 98%;
+
+    --border: 240 3.7% 15.9%;
+    --input: 240 3.7% 15.9%;
+    --ring: 240 4.9% 83.9%;
+  }
+
+  * {
+    @apply border-border;
+  }
+
+  html {
+    scroll-behavior: smooth;
+  }
+  
+  body {
+    font-feature-settings:
+      "rlig" 1,
+      "calt" 1;
+  }
+
+  ::-webkit-scrollbar {
+    @apply size-1;
+  }
+  
+  ::-webkit-scrollbar-thumb {
+    @apply bg-foreground/40 rounded-lg transition-colors;
+  }
+  
+  ::-webkit-scdrollbar-thumb:hover,
+  ::-webkit-scrollbar-thumb:active {
+    @apply bg-foreground/60;
+  }
+}
+
+`;
diff --git a/packages/cli/src/templates/tw-config.ts b/packages/cli/src/templates/tw-config.ts
index 8b14006..f13e1e3 100644
--- a/packages/cli/src/templates/tw-config.ts
+++ b/packages/cli/src/templates/tw-config.ts
@@ -1,75 +1,75 @@
-const PREFIX_LINE_INDEX = 5;
-
-interface GetTwTemplateProps {
-  prefix?: string;
-}
-
-export function getTwTemplate({ prefix }: GetTwTemplateProps) {
-  return `import type { Config } from "tailwindcss";
-import tailwindcssAnimate from "tailwindcss-animate";
-
-export default {
-  content: ["./src/**/*.{ts,tsx}"],
-  ${prefix ? `prefix: "${prefix}",` : ""}
-  darkMode: "class",
-  theme: {
-    extend: {
-      container: {
-        center: true,
-        padding: "2rem",
-        screens: {
-          "2xl": "1400px",
-        },
-      },
-      colors: {
-        border: "hsl(var(--border))",
-        input: "hsl(var(--input))",
-        ring: "hsl(var(--ring))",
-        background: "hsl(var(--background))",
-        foreground: "hsl(var(--foreground))",
-        primary: {
-          DEFAULT: "hsl(var(--primary))",
-          foreground: "hsl(var(--primary-foreground))",
-        },
-        secondary: {
-          DEFAULT: "hsl(var(--secondary))",
-          foreground: "hsl(var(--secondary-foreground))",
-        },
-        destructive: {
-          DEFAULT: "hsl(var(--destructive))",
-          foreground: "hsl(var(--destructive-foreground))",
-        },
-        muted: {
-          DEFAULT: "hsl(var(--muted))",
-          foreground: "hsl(var(--muted-foreground))",
-        },
-        accent: {
-          DEFAULT: "hsl(var(--accent))",
-          foreground: "hsl(var(--accent-foreground))",
-        },
-        popover: {
-          DEFAULT: "hsl(var(--popover))",
-          foreground: "hsl(var(--popover-foreground))",
-        },
-        card: {
-          DEFAULT: "hsl(var(--card))",
-          foreground: "hsl(var(--card-foreground))",
-        },
-      },
-      borderRadius: {
-        lg: "var(--radius)",
-        md: "calc(var(--radius) - 2px)",
-        sm: "calc(var(--radius) - 4px)",
-      },
-    },
-  },
-  plugins: [tailwindcssAnimate],
-  future: {
-    hoverOnlyWhenSupported: true,
-  },
-} satisfies Config;
-`
-    .split("\n")
-    .filter((_, index) => index !== PREFIX_LINE_INDEX)
-    .join("\n");
-}
+const PREFIX_LINE_INDEX = 5;
+
+interface GetTwTemplateProps {
+  prefix?: string;
+}
+
+export function getTwTemplate({ prefix }: GetTwTemplateProps) {
+  return `import type { Config } from "tailwindcss";
+import tailwindcssAnimate from "tailwindcss-animate";
+
+export default {
+  content: ["./src/**/*.{ts,tsx}"],
+  ${prefix ? `prefix: "${prefix}",` : ""}
+  darkMode: "class",
+  theme: {
+    extend: {
+      container: {
+        center: true,
+        padding: "2rem",
+        screens: {
+          "2xl": "1400px",
+        },
+      },
+      colors: {
+        border: "hsl(var(--border))",
+        input: "hsl(var(--input))",
+        ring: "hsl(var(--ring))",
+        background: "hsl(var(--background))",
+        foreground: "hsl(var(--foreground))",
+        primary: {
+          DEFAULT: "hsl(var(--primary))",
+          foreground: "hsl(var(--primary-foreground))",
+        },
+        secondary: {
+          DEFAULT: "hsl(var(--secondary))",
+          foreground: "hsl(var(--secondary-foreground))",
+        },
+        destructive: {
+          DEFAULT: "hsl(var(--destructive))",
+          foreground: "hsl(var(--destructive-foreground))",
+        },
+        muted: {
+          DEFAULT: "hsl(var(--muted))",
+          foreground: "hsl(var(--muted-foreground))",
+        },
+        accent: {
+          DEFAULT: "hsl(var(--accent))",
+          foreground: "hsl(var(--accent-foreground))",
+        },
+        popover: {
+          DEFAULT: "hsl(var(--popover))",
+          foreground: "hsl(var(--popover-foreground))",
+        },
+        card: {
+          DEFAULT: "hsl(var(--card))",
+          foreground: "hsl(var(--card-foreground))",
+        },
+      },
+      borderRadius: {
+        lg: "var(--radius)",
+        md: "calc(var(--radius) - 2px)",
+        sm: "calc(var(--radius) - 4px)",
+      },
+    },
+  },
+  plugins: [tailwindcssAnimate],
+  future: {
+    hoverOnlyWhenSupported: true,
+  },
+} satisfies Config;
+`
+    .split("\n")
+    .filter((_, index) => index !== PREFIX_LINE_INDEX)
+    .join("\n");
+}
diff --git a/packages/cli/src/utils/get-config.ts b/packages/cli/src/utils/get-config.ts
index aad79cf..b0c77b5 100644
--- a/packages/cli/src/utils/get-config.ts
+++ b/packages/cli/src/utils/get-config.ts
@@ -1,92 +1,92 @@
-import fs from "node:fs/promises";
-import path from "node:path";
-import { loadConfig } from "tsconfig-paths";
-import {
-  type InferOutput,
-  boolean,
-  flatten,
-  isValiError,
-  optional,
-  parseAsync,
-  strictObject,
-  string,
-} from "valibot";
-import { logger } from "./logger";
-import { resolveImport } from "./resolve-import";
-
-export const DEFAULT_JSON_SCHEMA = "https://kanpeki.vercel.app/schema.json";
-export const DEFAULT_COMPONENTS = "~/components";
-export const DEFAULT_UTILS = "~/utils";
-export const DEFAULT_TAILWIND_CSS = "src/styles/globals.css";
-export const DEFAULT_TAILWIND_CONFIG = "tailwind.config.ts";
-
-export const configSchema = strictObject({
-  $schema: optional(string()),
-  rsc: boolean(),
-  tailwind: strictObject({
-    config: string(),
-    css: string(),
-    prefix: optional(string()),
-  }),
-  aliases: strictObject({
-    components: string(),
-    utils: string(),
-    ui: optional(string()),
-  }),
-});
-
-export type Config = InferOutput<typeof configSchema>;
-
-export async function getConfig(cwd: string) {
-  const config = await getRawConfig(cwd);
-
-  if (!config) {
-    return null;
-  }
-
-  return resolveConfigPaths(cwd, config);
-}
-
-export async function getRawConfig(cwd: string) {
-  try {
-    const configPath = path.resolve(cwd, "kanpeki.json");
-    const config = await fs.readFile(configPath, "utf8");
-
-    return await parseAsync(configSchema, JSON.parse(config));
-  } catch (err) {
-    if (isValiError(err)) {
-      logger.error(
-        "There are issues with your configuration file. Please fix them before continuing.",
-      );
-      console.error(flatten(err.issues).nested);
-
-      process.exit(1);
-    }
-  }
-}
-
-export function resolveConfigPaths(cwd: string, config: Config) {
-  // Read tsconfig.json.
-  const tsConfig = loadConfig(cwd);
-
-  if (tsConfig.resultType === "failed") {
-    throw new Error(
-      `Failed to load "tsconfig".json. ${tsConfig.message ?? ""}`.trim(),
-    );
-  }
-
-  return {
-    ...config,
-    resolvedPaths: {
-      tailwindConfig: path.resolve(cwd, config.tailwind.config),
-      tailwindCss: path.resolve(cwd, config.tailwind.css),
-      utils: resolveImport(config.aliases.utils, tsConfig),
-      components: resolveImport(config.aliases.components, tsConfig),
-      ui: config.aliases.ui
-        ? resolveImport(config.aliases.ui, tsConfig)
-        : resolveImport(config.aliases.components, tsConfig),
-    },
-  };
-}
-
-export type ConfigWithResolvedPaths = ReturnType<typeof resolveConfigPaths>;
+import fs from "node:fs/promises";
+import path from "node:path";
+import { loadConfig } from "tsconfig-paths";
+import {
+  type InferOutput,
+  boolean,
+  flatten,
+  isValiError,
+  optional,
+  parseAsync,
+  strictObject,
+  string,
+} from "valibot";
+import { logger } from "./logger";
+import { resolveImport } from "./resolve-import";
+
+export const DEFAULT_JSON_SCHEMA = "https://kanpeki.vercel.app/schema.json";
+export const DEFAULT_COMPONENTS = "~/components";
+export const DEFAULT_UTILS = "~/utils";
+export const DEFAULT_TAILWIND_CSS = "src/styles/globals.css";
+export const DEFAULT_TAILWIND_CONFIG = "tailwind.config.ts";
+
+export const configSchema = strictObject({
+  $schema: optional(string()),
+  rsc: boolean(),
+  tailwind: strictObject({
+    config: string(),
+    css: string(),
+    prefix: optional(string()),
+  }),
+  aliases: strictObject({
+    components: string(),
+    utils: string(),
+    ui: optional(string()),
+  }),
+});
+
+export type Config = InferOutput<typeof configSchema>;
+
+export async function getConfig(cwd: string) {
+  const config = await getRawConfig(cwd);
+
+  if (!config) {
+    return null;
+  }
+
+  return resolveConfigPaths(cwd, config);
+}
+
+export async function getRawConfig(cwd: string) {
+  try {
+    const configPath = path.resolve(cwd, "kanpeki.json");
+    const config = await fs.readFile(configPath, "utf8");
+
+    return await parseAsync(configSchema, JSON.parse(config));
+  } catch (err) {
+    if (isValiError(err)) {
+      logger.error(
+        "There are issues with your configuration file. Please fix them before continuing."
+      );
+      console.error(flatten(err.issues).nested);
+
+      process.exit(1);
+    }
+  }
+}
+
+export function resolveConfigPaths(cwd: string, config: Config) {
+  // Read tsconfig.json.
+  const tsConfig = loadConfig(cwd);
+
+  if (tsConfig.resultType === "failed") {
+    throw new Error(
+      `Failed to load "tsconfig".json. ${tsConfig.message ?? ""}`.trim()
+    );
+  }
+
+  return {
+    ...config,
+    resolvedPaths: {
+      tailwindConfig: path.resolve(cwd, config.tailwind.config),
+      tailwindCss: path.resolve(cwd, config.tailwind.css),
+      utils: resolveImport(config.aliases.utils, tsConfig),
+      components: resolveImport(config.aliases.components, tsConfig),
+      ui: config.aliases.ui
+        ? resolveImport(config.aliases.ui, tsConfig)
+        : resolveImport(config.aliases.components, tsConfig),
+    },
+  };
+}
+
+export type ConfigWithResolvedPaths = ReturnType<typeof resolveConfigPaths>;
diff --git a/packages/cli/src/utils/get-is-online.ts b/packages/cli/src/utils/get-is-online.ts
index 61a02e3..eec19a7 100644
--- a/packages/cli/src/utils/get-is-online.ts
+++ b/packages/cli/src/utils/get-is-online.ts
@@ -1,45 +1,45 @@
-import { execSync } from "node:child_process";
-import dns from "node:dns/promises";
-import url from "node:url";
-
-function getProxy() {
-  if (process.env.https_proxy) {
-    return process.env.https_proxy;
-  }
-
-  try {
-    const httpsProxy = execSync("npm config get https-proxy").toString().trim();
-    return httpsProxy !== "null" ? httpsProxy : undefined;
-  } catch {
-    return;
-  }
-}
-
-export async function getIsOnline() {
-  try {
-    await dns.lookup("registry.yarnpkg.com");
-    // If DNS lookup succeeds, we are online
-    return true;
-  } catch {
-    // The DNS lookup failed, but we are still fine as long as a proxy has been set
-    const proxy = getProxy();
-    if (!proxy) {
-      return false;
-    }
-
-    const { hostname } = url.parse(proxy);
-    if (!hostname) {
-      // Invalid proxy URL
-      return false;
-    }
-
-    try {
-      await dns.lookup(hostname);
-      // If DNS lookup succeeds for the proxy server, we are online
-      return true;
-    } catch {
-      // The DNS lookup for the proxy server also failed, so we are offline
-      return false;
-    }
-  }
-}
+import { execSync } from "node:child_process";
+import dns from "node:dns/promises";
+import url from "node:url";
+
+function getProxy() {
+  if (process.env.https_proxy) {
+    return process.env.https_proxy;
+  }
+
+  try {
+    const httpsProxy = execSync("npm config get https-proxy").toString().trim();
+    return httpsProxy !== "null" ? httpsProxy : undefined;
+  } catch {
+    return;
+  }
+}
+
+export async function getIsOnline() {
+  try {
+    await dns.lookup("registry.yarnpkg.com");
+    // If DNS lookup succeeds, we are online
+    return true;
+  } catch {
+    // The DNS lookup failed, but we are still fine as long as a proxy has been set
+    const proxy = getProxy();
+    if (!proxy) {
+      return false;
+    }
+
+    const { hostname } = url.parse(proxy);
+    if (!hostname) {
+      // Invalid proxy URL
+      return false;
+    }
+
+    try {
+      await dns.lookup(hostname);
+      // If DNS lookup succeeds for the proxy server, we are online
+      return true;
+    } catch {
+      // The DNS lookup for the proxy server also failed, so we are offline
+      return false;
+    }
+  }
+}
diff --git a/packages/cli/src/utils/get-pkg-manager.ts b/packages/cli/src/utils/get-pkg-manager.ts
index c17e801..acc099f 100644
--- a/packages/cli/src/utils/get-pkg-manager.ts
+++ b/packages/cli/src/utils/get-pkg-manager.ts
@@ -1,19 +1,19 @@
-export type PackageManager = "npm" | "pnpm" | "yarn" | "bun";
-
-export function getPkgManager(): PackageManager {
-  const userAgent = process.env.npm_config_user_agent || "";
-
-  if (userAgent.startsWith("yarn")) {
-    return "yarn";
-  }
-
-  if (userAgent.startsWith("pnpm")) {
-    return "pnpm";
-  }
-
-  if (userAgent.startsWith("bun")) {
-    return "bun";
-  }
-
-  return "npm";
-}
+export type PackageManager = "npm" | "pnpm" | "yarn" | "bun";
+
+export function getPkgManager(): PackageManager {
+  const userAgent = process.env.npm_config_user_agent || "";
+
+  if (userAgent.startsWith("yarn")) {
+    return "yarn";
+  }
+
+  if (userAgent.startsWith("pnpm")) {
+    return "pnpm";
+  }
+
+  if (userAgent.startsWith("bun")) {
+    return "bun";
+  }
+
+  return "npm";
+}
diff --git a/packages/cli/src/utils/get-project-info.ts b/packages/cli/src/utils/get-project-info.ts
index d4e21e6..c326b2a 100644
--- a/packages/cli/src/utils/get-project-info.ts
+++ b/packages/cli/src/utils/get-project-info.ts
@@ -1,179 +1,179 @@
-import { existsSync } from "node:fs";
-import { readFile } from "node:fs/promises";
-import path from "node:path";
-import fg from "fast-glob";
-import { loadConfig } from "tsconfig-paths";
-import {
-  type Config,
-  DEFAULT_JSON_SCHEMA,
-  getConfig,
-  resolveConfigPaths,
-} from "./get-config";
-
-// 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 = {
-    tsconfig: null,
-    srcDir: false,
-    appDir: false,
-    srcComponentsUiDir: false,
-    componentsUiDir: false,
-  };
-
-  try {
-    const tsconfig = await getTsConfig();
-
-    return {
-      tsconfig,
-      srcDir: existsSync(path.resolve("./src")),
-      appDir:
-        existsSync(path.resolve("./app")) ||
-        existsSync(path.resolve("./src/app")),
-      srcComponentsUiDir: existsSync(path.resolve("./src/components/ui")),
-      componentsUiDir: existsSync(path.resolve("./components/ui")),
-    };
-  } catch {
-    return info;
-  }
-}
-
-export async function getTsConfig() {
-  try {
-    const tsconfigPath = path.join("tsconfig.json");
-    const tsconfig = JSON.parse(await readFile(tsconfigPath, "utf8"));
-
-    if (!tsconfig) {
-      throw new Error("tsconfig.json is missing");
-    }
-
-    return tsconfig;
-  } catch {
-    return null;
-  }
-}
-
-export async function getProjectConfig(cwd: string) {
-  // 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 = getTsConfigAliasPrefix(cwd);
-
-  if (!(projectType && tailwindCssFile && tsConfigAliasPrefix)) {
-    return null;
-  }
-
-  const config = {
-    $schema: DEFAULT_JSON_SCHEMA,
-    rsc: new Set<ProjectType>(["next-app", "next-app-src"]).has(projectType),
-    tailwind: {
-      config: "tailwind.config.ts",
-      css: tailwindCssFile,
-    },
-    aliases: {
-      components: `${tsConfigAliasPrefix}/components`,
-      utils: `${tsConfigAliasPrefix}/utils`,
-    },
-  } satisfies Config;
-
-  return 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 = existsSync(path.resolve(cwd, "src"));
-  const isUsingAppDir = existsSync(
-    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 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 function getTsConfigAliasPrefix(cwd: string) {
-  const tsConfig = 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 preFlight(cwd: string) {
-  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.",
-    );
-  }
-}
+import { existsSync } from "node:fs";
+import { readFile } from "node:fs/promises";
+import path from "node:path";
+import fg from "fast-glob";
+import { loadConfig } from "tsconfig-paths";
+import {
+  type Config,
+  DEFAULT_JSON_SCHEMA,
+  getConfig,
+  resolveConfigPaths,
+} from "./get-config";
+
+// 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 = {
+    tsconfig: null,
+    srcDir: false,
+    appDir: false,
+    srcComponentsUiDir: false,
+    componentsUiDir: false,
+  };
+
+  try {
+    const tsconfig = await getTsConfig();
+
+    return {
+      tsconfig,
+      srcDir: existsSync(path.resolve("./src")),
+      appDir:
+        existsSync(path.resolve("./app")) ||
+        existsSync(path.resolve("./src/app")),
+      srcComponentsUiDir: existsSync(path.resolve("./src/components/ui")),
+      componentsUiDir: existsSync(path.resolve("./components/ui")),
+    };
+  } catch {
+    return info;
+  }
+}
+
+export async function getTsConfig() {
+  try {
+    const tsconfigPath = path.join("tsconfig.json");
+    const tsconfig = JSON.parse(await readFile(tsconfigPath, "utf8"));
+
+    if (!tsconfig) {
+      throw new Error("tsconfig.json is missing");
+    }
+
+    return tsconfig;
+  } catch {
+    return null;
+  }
+}
+
+export async function getProjectConfig(cwd: string) {
+  // 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 = getTsConfigAliasPrefix(cwd);
+
+  if (!(projectType && tailwindCssFile && tsConfigAliasPrefix)) {
+    return null;
+  }
+
+  const config = {
+    $schema: DEFAULT_JSON_SCHEMA,
+    rsc: new Set<ProjectType>(["next-app", "next-app-src"]).has(projectType),
+    tailwind: {
+      config: "tailwind.config.ts",
+      css: tailwindCssFile,
+    },
+    aliases: {
+      components: `${tsConfigAliasPrefix}/components`,
+      utils: `${tsConfigAliasPrefix}/utils`,
+    },
+  } satisfies Config;
+
+  return 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 = existsSync(path.resolve(cwd, "src"));
+  const isUsingAppDir = existsSync(
+    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 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 function getTsConfigAliasPrefix(cwd: string) {
+  const tsConfig = 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 preFlight(cwd: string) {
+  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."
+    );
+  }
+}
diff --git a/packages/cli/src/utils/handle-error.ts b/packages/cli/src/utils/handle-error.ts
index d6af943..5f428a5 100644
--- a/packages/cli/src/utils/handle-error.ts
+++ b/packages/cli/src/utils/handle-error.ts
@@ -1,16 +1,16 @@
-import { logger } from "./logger";
-
-export function handleError(error: unknown) {
-  if (typeof error === "string") {
-    logger.error(error);
-    process.exit(1);
-  }
-
-  if (error instanceof Error) {
-    logger.error(error.message);
-    process.exit(1);
-  }
-
-  logger.error("Something went wrong. Please try again.");
-  process.exit(1);
-}
+import { logger } from "./logger";
+
+export function handleError(error: unknown) {
+  if (typeof error === "string") {
+    logger.error(error);
+    process.exit(1);
+  }
+
+  if (error instanceof Error) {
+    logger.error(error.message);
+    process.exit(1);
+  }
+
+  logger.error("Something went wrong. Please try again.");
+  process.exit(1);
+}
diff --git a/packages/cli/src/utils/install-deps.ts b/packages/cli/src/utils/install-deps.ts
index 22480d6..5305aa1 100644
--- a/packages/cli/src/utils/install-deps.ts
+++ b/packages/cli/src/utils/install-deps.ts
@@ -1,45 +1,45 @@
-import { spawn } from "cross-spawn";
-import picocolors from "picocolors";
-import { getIsOnline } from "./get-is-online";
-import type { PackageManager } from "./get-pkg-manager";
-
-export async function installDeps(
-  packageManager: PackageManager,
-  cwd: string,
-  deps: string[] = [],
-  flags: string[] = [],
-) {
-  const useYarn = packageManager === "yarn";
-  const isOnline = !useYarn || (await getIsOnline());
-  const args = ["install", ...deps, ...flags];
-  if (!isOnline) {
-    console.info(
-      picocolors.yellow(
-        "You appear to be offline.\nFalling back to the local cache.",
-      ),
-    );
-    args.push("--offline");
-  }
-
-  return new Promise<void>((resolve, reject) => {
-    const child = spawn(packageManager, args, {
-      stdio: "ignore",
-      cwd,
-      env: {
-        ...process.env,
-        ADBLOCK: "1",
-        // we set NODE_ENV to development as pnpm skips dev
-        // dependencies when production
-        NODE_ENV: "development",
-        DISABLE_OPENCOLLECTIVE: "1",
-      },
-    });
-    child.on("close", (code) => {
-      if (code !== 0) {
-        reject({ command: `${packageManager} ${args.join(" ")}` });
-        return;
-      }
-      resolve();
-    });
-  });
-}
+import { spawn } from "cross-spawn";
+import picocolors from "picocolors";
+import { getIsOnline } from "./get-is-online";
+import type { PackageManager } from "./get-pkg-manager";
+
+export async function installDeps(
+  packageManager: PackageManager,
+  cwd: string,
+  deps: string[] = [],
+  flags: string[] = []
+) {
+  const useYarn = packageManager === "yarn";
+  const isOnline = !useYarn || (await getIsOnline());
+  const args = ["install", ...deps, ...flags];
+  if (!isOnline) {
+    console.info(
+      picocolors.yellow(
+        "You appear to be offline.\nFalling back to the local cache."
+      )
+    );
+    args.push("--offline");
+  }
+
+  return new Promise<void>((resolve, reject) => {
+    const child = spawn(packageManager, args, {
+      stdio: "ignore",
+      cwd,
+      env: {
+        ...process.env,
+        ADBLOCK: "1",
+        // we set NODE_ENV to development as pnpm skips dev
+        // dependencies when production
+        NODE_ENV: "development",
+        DISABLE_OPENCOLLECTIVE: "1",
+      },
+    });
+    child.on("close", (code) => {
+      if (code !== 0) {
+        reject({ command: `${packageManager} ${args.join(" ")}` });
+        return;
+      }
+      resolve();
+    });
+  });
+}
diff --git a/packages/cli/src/utils/logger.ts b/packages/cli/src/utils/logger.ts
index 86704c3..04f660e 100644
--- a/packages/cli/src/utils/logger.ts
+++ b/packages/cli/src/utils/logger.ts
@@ -1,19 +1,19 @@
-import picocolors from "picocolors";
-
-export const logger = {
-  error(args: string) {
-    console.info(picocolors.red(args));
-  },
-  warn(args: string) {
-    console.info(picocolors.yellow(args));
-  },
-  info(args: string) {
-    console.info(picocolors.cyan(args));
-  },
-  success(args: string) {
-    console.info(picocolors.green(args));
-  },
-  break() {
-    console.info("");
-  },
-};
+import picocolors from "picocolors";
+
+export const logger = {
+  error(args: string) {
+    console.info(picocolors.red(args));
+  },
+  warn(args: string) {
+    console.info(picocolors.yellow(args));
+  },
+  info(args: string) {
+    console.info(picocolors.cyan(args));
+  },
+  success(args: string) {
+    console.info(picocolors.green(args));
+  },
+  break() {
+    console.info("");
+  },
+};
diff --git a/packages/cli/src/utils/resolve-import.ts b/packages/cli/src/utils/resolve-import.ts
index 3590845..5f6cf67 100644
--- a/packages/cli/src/utils/resolve-import.ts
+++ b/packages/cli/src/utils/resolve-import.ts
@@ -1,16 +1,16 @@
-import {
-  type ConfigLoaderSuccessResult,
-  createMatchPath,
-} from "tsconfig-paths";
-
-export function resolveImport(
-  importPath: string,
-  config: Pick<ConfigLoaderSuccessResult, "absoluteBaseUrl" | "paths">,
-) {
-  return createMatchPath(config.absoluteBaseUrl, config.paths)(
-    importPath,
-    undefined,
-    () => true,
-    [".ts", ".tsx"],
-  );
-}
+import {
+  type ConfigLoaderSuccessResult,
+  createMatchPath,
+} from "tsconfig-paths";
+
+export function resolveImport(
+  importPath: string,
+  config: Pick<ConfigLoaderSuccessResult, "absoluteBaseUrl" | "paths">
+) {
+  return createMatchPath(config.absoluteBaseUrl, config.paths)(
+    importPath,
+    undefined,
+    () => true,
+    [".ts", ".tsx"]
+  );
+}
diff --git a/packages/cli/tsup.config.ts b/packages/cli/tsup.config.ts
index 8380d3b..bbe8710 100644
--- a/packages/cli/tsup.config.ts
+++ b/packages/cli/tsup.config.ts
@@ -1,10 +1,10 @@
-import { defineConfig } from "tsup";
-
-export default defineConfig({
-  entry: ["src/index.ts"],
-  format: ["esm"],
-  splitting: true,
-  minify: true,
-  clean: true,
-  outDir: "dist",
-});
+import { defineConfig } from "tsup";
+
+export default defineConfig({
+  entry: ["src/index.ts"],
+  format: ["esm"],
+  splitting: true,
+  minify: true,
+  clean: true,
+  outDir: "dist",
+});
diff --git a/packages/components/demos/src/avatar-demo.tsx b/packages/components/demos/src/avatar-demo.tsx
index 68fa1a8..e01954f 100644
--- a/packages/components/demos/src/avatar-demo.tsx
+++ b/packages/components/demos/src/avatar-demo.tsx
@@ -1,17 +1,17 @@
-import { Avatar } from "@kanpeki/ui/avatar";
-import { Icons } from "@kanpeki/ui/icons";
-
-export default function AvatarDemo() {
-  return (
-    <Avatar.Root>
-      <Avatar.Image
-        src="https://github.com/fellipeutaka.png"
-        alt="@fellipeutaka"
-      />
-      <Avatar.Fallback>FU</Avatar.Fallback>
-      <Avatar.Placeholder>
-        <Icons.User className="size-6" />
-      </Avatar.Placeholder>
-    </Avatar.Root>
-  );
-}
+import { Avatar } from "@kanpeki/ui/avatar";
+import { Icons } from "@kanpeki/ui/icons";
+
+export default function AvatarDemo() {
+  return (
+    <Avatar.Root>
+      <Avatar.Image
+        src="https://github.com/fellipeutaka.png"
+        alt="@fellipeutaka"
+      />
+      <Avatar.Fallback>FU</Avatar.Fallback>
+      <Avatar.Placeholder>
+        <Icons.User className="size-6" />
+      </Avatar.Placeholder>
+    </Avatar.Root>
+  );
+}
diff --git a/packages/components/demos/src/avatar-group.tsx b/packages/components/demos/src/avatar-group.tsx
index dec7faa..4317711 100644
--- a/packages/components/demos/src/avatar-group.tsx
+++ b/packages/components/demos/src/avatar-group.tsx
@@ -1,60 +1,60 @@
-import { Avatar } from "@kanpeki/ui/avatar";
-import { Icons } from "@kanpeki/ui/icons";
-
-const avatars = [
-  {
-    src: "https://github.com/fellipeutaka.png",
-    alt: "@fellipeutaka",
-    fallback: "FU",
-  },
-  {
-    src: "https://github.com/victormicco.png",
-    alt: "@victormicco",
-    fallback: "VM",
-  },
-  {
-    src: "https://github.com/shadcn.png",
-    alt: "@shadcn",
-    fallback: "SN",
-  },
-  {
-    src: "https://github.com/devongovett.png",
-    alt: "@devongovett",
-    fallback: "DG",
-  },
-  {
-    src: "https://github.com/benoitgrelard.png",
-    alt: "@benoitgrelard",
-    fallback: "BG",
-  },
-  {
-    src: "https://github.com/adamwathan.png",
-    alt: "@adamwathan",
-    fallback: "AW",
-  },
-] as const satisfies {
-  src: string;
-  alt: string;
-  fallback: string;
-}[];
-
-export default function AvatarGroupDemo() {
-  return (
-    <div className="-space-x-2 flex">
-      {avatars.map((avatar) => (
-        <Avatar.Root key={avatar.alt}>
-          <Avatar.Image src={avatar.src} alt={avatar.alt} />
-          <Avatar.Fallback>{avatar.fallback}</Avatar.Fallback>
-          <Avatar.Placeholder>
-            <Icons.User className="size-6" />
-          </Avatar.Placeholder>
-        </Avatar.Root>
-      ))}
-      <Avatar.Root>
-        <Avatar.Placeholder className="animate-none text-muted-foreground">
-          +3
-        </Avatar.Placeholder>
-      </Avatar.Root>
-    </div>
-  );
-}
+import { Avatar } from "@kanpeki/ui/avatar";
+import { Icons } from "@kanpeki/ui/icons";
+
+const avatars = [
+  {
+    src: "https://github.com/fellipeutaka.png",
+    alt: "@fellipeutaka",
+    fallback: "FU",
+  },
+  {
+    src: "https://github.com/victormicco.png",
+    alt: "@victormicco",
+    fallback: "VM",
+  },
+  {
+    src: "https://github.com/shadcn.png",
+    alt: "@shadcn",
+    fallback: "SN",
+  },
+  {
+    src: "https://github.com/devongovett.png",
+    alt: "@devongovett",
+    fallback: "DG",
+  },
+  {
+    src: "https://github.com/benoitgrelard.png",
+    alt: "@benoitgrelard",
+    fallback: "BG",
+  },
+  {
+    src: "https://github.com/adamwathan.png",
+    alt: "@adamwathan",
+    fallback: "AW",
+  },
+] as const satisfies {
+  src: string;
+  alt: string;
+  fallback: string;
+}[];
+
+export default function AvatarGroupDemo() {
+  return (
+    <div className="-space-x-2 flex">
+      {avatars.map((avatar) => (
+        <Avatar.Root key={avatar.alt}>
+          <Avatar.Image src={avatar.src} alt={avatar.alt} />
+          <Avatar.Fallback>{avatar.fallback}</Avatar.Fallback>
+          <Avatar.Placeholder>
+            <Icons.User className="size-6" />
+          </Avatar.Placeholder>
+        </Avatar.Root>
+      ))}
+      <Avatar.Root>
+        <Avatar.Placeholder className="animate-none text-muted-foreground">
+          +3
+        </Avatar.Placeholder>
+      </Avatar.Root>
+    </div>
+  );
+}
diff --git a/packages/components/demos/src/checkbox-demo.tsx b/packages/components/demos/src/checkbox-demo.tsx
index b653da4..2a3b79b 100644
--- a/packages/components/demos/src/checkbox-demo.tsx
+++ b/packages/components/demos/src/checkbox-demo.tsx
@@ -1,15 +1,15 @@
-import { Checkbox } from "@kanpeki/ui/checkbox";
-import { Label } from "@kanpeki/ui/label";
-
-export default function CheckboxDemo() {
-  return (
-    <div>
-      <div className="flex items-center gap-2">
-        <Checkbox.Root id="terms">
-          <Checkbox.Indicator />
-        </Checkbox.Root>
-        <Label htmlFor="terms">Accept terms and conditions</Label>
-      </div>
-    </div>
-  );
-}
+import { Checkbox } from "@kanpeki/ui/checkbox";
+import { Label } from "@kanpeki/ui/label";
+
+export default function CheckboxDemo() {
+  return (
+    <div>
+      <div className="flex items-center gap-2">
+        <Checkbox.Root id="terms">
+          <Checkbox.Indicator />
+        </Checkbox.Root>
+        <Label htmlFor="terms">Accept terms and conditions</Label>
+      </div>
+    </div>
+  );
+}
diff --git a/packages/components/demos/src/checkbox-disabled.tsx b/packages/components/demos/src/checkbox-disabled.tsx
index 0955c17..85d282d 100644
--- a/packages/components/demos/src/checkbox-disabled.tsx
+++ b/packages/components/demos/src/checkbox-disabled.tsx
@@ -1,18 +1,18 @@
-import { Checkbox } from "@kanpeki/ui/checkbox";
-import { Label } from "@kanpeki/ui/label";
-import { useId } from "react";
-
-export default function CheckboxDemo() {
-  const id = useId();
-
-  return (
-    <div>
-      <div className="flex items-center gap-2">
-        <Checkbox.Root disabled id={id}>
-          <Checkbox.Indicator />
-        </Checkbox.Root>
-        <Label htmlFor={id}>Accept terms and conditions</Label>
-      </div>
-    </div>
-  );
-}
+import { Checkbox } from "@kanpeki/ui/checkbox";
+import { Label } from "@kanpeki/ui/label";
+import { useId } from "react";
+
+export default function CheckboxDemo() {
+  const id = useId();
+
+  return (
+    <div>
+      <div className="flex items-center gap-2">
+        <Checkbox.Root disabled id={id}>
+          <Checkbox.Indicator />
+        </Checkbox.Root>
+        <Label htmlFor={id}>Accept terms and conditions</Label>
+      </div>
+    </div>
+  );
+}
diff --git a/packages/components/demos/src/command-demo.tsx b/packages/components/demos/src/command-demo.tsx
index d6c7448..c965d74 100644
--- a/packages/components/demos/src/command-demo.tsx
+++ b/packages/components/demos/src/command-demo.tsx
@@ -1,114 +1,114 @@
-import { Command } from "@kanpeki/ui/command";
-
-export default function CommandDemo() {
-  return (
-    <Command.Root className="max-w-md rounded-lg border shadow-md">
-      <Command.Input placeholder="Type a command or search..." />
-      <Command.List>
-        <Command.Empty>No results found.</Command.Empty>
-        <Command.Group heading="Suggestions">
-          <Command.Item>
-            <svg
-              role="img"
-              aria-label="Calendar"
-              viewBox="0 0 24 24"
-              fill="none"
-              stroke="currentColor"
-              strokeWidth={2}
-              className="mr-2 size-4"
-            >
-              <path d="M8 2v4M16 2v4" />
-              <rect width={18} height={18} x={3} y={4} rx={2} />
-              <path d="M3 10h18" />
-            </svg>
-            <span>Calendar</span>
-          </Command.Item>
-          <Command.Item>
-            <svg
-              role="img"
-              aria-label="Smile"
-              viewBox="0 0 24 24"
-              fill="none"
-              stroke="currentColor"
-              strokeWidth={2}
-              strokeLinecap="round"
-              className="mr-2 size-4"
-            >
-              <circle cx={12} cy={12} r={10} />
-              <path d="M8 14s1.5 2 4 2 4-2 4-2" />
-              <path d="M9 9L9.01 9" />
-              <path d="M15 9L15.01 9" />
-            </svg>
-            <span>Search Emoji</span>
-          </Command.Item>
-          <Command.Item>
-            <svg
-              role="img"
-              aria-label="Rocket"
-              viewBox="0 0 24 24"
-              fill="none"
-              stroke="currentColor"
-              strokeWidth={2}
-              className="mr-2 size-4"
-            >
-              <path d="M4.5 16.5c-1.5 1.26-2 5-2 5s3.74-.5 5-2c.71-.84.7-2.13-.09-2.91a2.18 2.18 0 00-2.91-.09zM12 15l-3-3a22 22 0 012-3.95A12.88 12.88 0 0122 2c0 2.72-.78 7.5-6 11a22.35 22.35 0 01-4 2z" />
-              <path d="M9 12H4s.55-3.03 2-4c1.62-1.08 5 0 5 0M12 15v5s3.03-.55 4-2c1.08-1.62 0-5 0-5" />
-            </svg>
-            <span>Launch</span>
-          </Command.Item>
-        </Command.Group>
-        <Command.Separator />
-        <Command.Group heading="Settings">
-          <Command.Item>
-            <svg
-              role="img"
-              aria-label="User"
-              viewBox="0 0 24 24"
-              fill="none"
-              stroke="currentColor"
-              strokeWidth={2}
-              className="mr-2 size-4"
-            >
-              <path d="M19 21v-2a4 4 0 00-4-4H9a4 4 0 00-4 4v2" />
-              <circle cx={12} cy={7} r={4} />
-            </svg>
-            <span>Profile</span>
-            <Command.Shortcut>⌘P</Command.Shortcut>
-          </Command.Item>
-          <Command.Item>
-            <svg
-              role="img"
-              aria-label="Mail"
-              viewBox="0 0 24 24"
-              fill="none"
-              stroke="currentColor"
-              strokeWidth={2}
-              className="mr-2 size-4"
-            >
-              <rect width={20} height={16} x={2} y={4} rx={2} />
-              <path d="M22 7l-8.97 5.7a1.94 1.94 0 01-2.06 0L2 7" />
-            </svg>
-            <span>Mail</span>
-            <Command.Shortcut>⌘B</Command.Shortcut>
-          </Command.Item>
-          <Command.Item>
-            <svg
-              role="img"
-              aria-label="Settings"
-              viewBox="0 0 24 24"
-              fill="none"
-              stroke="currentColor"
-              strokeWidth={2}
-              className="mr-2 size-4"
-            >
-              <path d="M12.22 2h-.44a2 2 0 00-2 2v.18a2 2 0 01-1 1.73l-.43.25a2 2 0 01-2 0l-.15-.08a2 2 0 00-2.73.73l-.22.38a2 2 0 00.73 2.73l.15.1a2 2 0 011 1.72v.51a2 2 0 01-1 1.74l-.15.09a2 2 0 00-.73 2.73l.22.38a2 2 0 002.73.73l.15-.08a2 2 0 012 0l.43.25a2 2 0 011 1.73V20a2 2 0 002 2h.44a2 2 0 002-2v-.18a2 2 0 011-1.73l.43-.25a2 2 0 012 0l.15.08a2 2 0 002.73-.73l.22-.39a2 2 0 00-.73-2.73l-.15-.08a2 2 0 01-1-1.74v-.5a2 2 0 011-1.74l.15-.09a2 2 0 00.73-2.73l-.22-.38a2 2 0 00-2.73-.73l-.15.08a2 2 0 01-2 0l-.43-.25a2 2 0 01-1-1.73V4a2 2 0 00-2-2z" />
-              <circle cx={12} cy={12} r={3} />
-            </svg>
-            <span>Settings</span>
-            <Command.Shortcut>⌘S</Command.Shortcut>
-          </Command.Item>
-        </Command.Group>
-      </Command.List>
-    </Command.Root>
-  );
-}
+import { Command } from "@kanpeki/ui/command";
+
+export default function CommandDemo() {
+  return (
+    <Command.Root className="max-w-md rounded-lg border shadow-md">
+      <Command.Input placeholder="Type a command or search..." />
+      <Command.List>
+        <Command.Empty>No results found.</Command.Empty>
+        <Command.Group heading="Suggestions">
+          <Command.Item>
+            <svg
+              role="img"
+              aria-label="Calendar"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              strokeWidth={2}
+              className="mr-2 size-4"
+            >
+              <path d="M8 2v4M16 2v4" />
+              <rect width={18} height={18} x={3} y={4} rx={2} />
+              <path d="M3 10h18" />
+            </svg>
+            <span>Calendar</span>
+          </Command.Item>
+          <Command.Item>
+            <svg
+              role="img"
+              aria-label="Smile"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              strokeWidth={2}
+              strokeLinecap="round"
+              className="mr-2 size-4"
+            >
+              <circle cx={12} cy={12} r={10} />
+              <path d="M8 14s1.5 2 4 2 4-2 4-2" />
+              <path d="M9 9L9.01 9" />
+              <path d="M15 9L15.01 9" />
+            </svg>
+            <span>Search Emoji</span>
+          </Command.Item>
+          <Command.Item>
+            <svg
+              role="img"
+              aria-label="Rocket"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              strokeWidth={2}
+              className="mr-2 size-4"
+            >
+              <path d="M4.5 16.5c-1.5 1.26-2 5-2 5s3.74-.5 5-2c.71-.84.7-2.13-.09-2.91a2.18 2.18 0 00-2.91-.09zM12 15l-3-3a22 22 0 012-3.95A12.88 12.88 0 0122 2c0 2.72-.78 7.5-6 11a22.35 22.35 0 01-4 2z" />
+              <path d="M9 12H4s.55-3.03 2-4c1.62-1.08 5 0 5 0M12 15v5s3.03-.55 4-2c1.08-1.62 0-5 0-5" />
+            </svg>
+            <span>Launch</span>
+          </Command.Item>
+        </Command.Group>
+        <Command.Separator />
+        <Command.Group heading="Settings">
+          <Command.Item>
+            <svg
+              role="img"
+              aria-label="User"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              strokeWidth={2}
+              className="mr-2 size-4"
+            >
+              <path d="M19 21v-2a4 4 0 00-4-4H9a4 4 0 00-4 4v2" />
+              <circle cx={12} cy={7} r={4} />
+            </svg>
+            <span>Profile</span>
+            <Command.Shortcut>⌘P</Command.Shortcut>
+          </Command.Item>
+          <Command.Item>
+            <svg
+              role="img"
+              aria-label="Mail"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              strokeWidth={2}
+              className="mr-2 size-4"
+            >
+              <rect width={20} height={16} x={2} y={4} rx={2} />
+              <path d="M22 7l-8.97 5.7a1.94 1.94 0 01-2.06 0L2 7" />
+            </svg>
+            <span>Mail</span>
+            <Command.Shortcut>⌘B</Command.Shortcut>
+          </Command.Item>
+          <Command.Item>
+            <svg
+              role="img"
+              aria-label="Settings"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              strokeWidth={2}
+              className="mr-2 size-4"
+            >
+              <path d="M12.22 2h-.44a2 2 0 00-2 2v.18a2 2 0 01-1 1.73l-.43.25a2 2 0 01-2 0l-.15-.08a2 2 0 00-2.73.73l-.22.38a2 2 0 00.73 2.73l.15.1a2 2 0 011 1.72v.51a2 2 0 01-1 1.74l-.15.09a2 2 0 00-.73 2.73l.22.38a2 2 0 002.73.73l.15-.08a2 2 0 012 0l.43.25a2 2 0 011 1.73V20a2 2 0 002 2h.44a2 2 0 002-2v-.18a2 2 0 011-1.73l.43-.25a2 2 0 012 0l.15.08a2 2 0 002.73-.73l.22-.39a2 2 0 00-.73-2.73l-.15-.08a2 2 0 01-1-1.74v-.5a2 2 0 011-1.74l.15-.09a2 2 0 00.73-2.73l-.22-.38a2 2 0 00-2.73-.73l-.15.08a2 2 0 01-2 0l-.43-.25a2 2 0 01-1-1.73V4a2 2 0 00-2-2z" />
+              <circle cx={12} cy={12} r={3} />
+            </svg>
+            <span>Settings</span>
+            <Command.Shortcut>⌘S</Command.Shortcut>
+          </Command.Item>
+        </Command.Group>
+      </Command.List>
+    </Command.Root>
+  );
+}
diff --git a/packages/components/demos/src/label-demo.tsx b/packages/components/demos/src/label-demo.tsx
index 072f78d..a021e9b 100644
--- a/packages/components/demos/src/label-demo.tsx
+++ b/packages/components/demos/src/label-demo.tsx
@@ -1,15 +1,15 @@
-import { Checkbox } from "@kanpeki/ui/checkbox";
-import { Label } from "@kanpeki/ui/label";
-
-export default function LabelDemo() {
-  return (
-    <div>
-      <div className="flex items-center gap-2">
-        <Checkbox.Root id="terms">
-          <Checkbox.Indicator />
-        </Checkbox.Root>
-        <Label htmlFor="terms">Accept terms and conditions</Label>
-      </div>
-    </div>
-  );
-}
+import { Checkbox } from "@kanpeki/ui/checkbox";
+import { Label } from "@kanpeki/ui/label";
+
+export default function LabelDemo() {
+  return (
+    <div>
+      <div className="flex items-center gap-2">
+        <Checkbox.Root id="terms">
+          <Checkbox.Indicator />
+        </Checkbox.Root>
+        <Label htmlFor="terms">Accept terms and conditions</Label>
+      </div>
+    </div>
+  );
+}
diff --git a/packages/components/demos/src/scroll-area-demo.tsx b/packages/components/demos/src/scroll-area-demo.tsx
index 6c00dbc..8a49c61 100644
--- a/packages/components/demos/src/scroll-area-demo.tsx
+++ b/packages/components/demos/src/scroll-area-demo.tsx
@@ -1,28 +1,28 @@
-import { ScrollArea } from "@kanpeki/ui/scroll-area";
-import { Separator } from "@kanpeki/ui/separator";
-import { Fragment } from "react";
-
-const tags = Array.from({ length: 50 }).map(
-  (_, i, a) => `v1.2.0-beta.${a.length - i}`,
-);
-
-export default function ScrollAreaDemo() {
-  return (
-    <ScrollArea.Root>
-      <ScrollArea.Viewport className="h-72 w-48 rounded-md border">
-        <div className="p-4">
-          <h4 className="mb-4 font-medium text-sm leading-none">Tags</h4>
-          {tags.map((tag) => (
-            <Fragment key={tag}>
-              <div className="text-sm">{tag}</div>
-              <Separator className="my-2" />
-            </Fragment>
-          ))}
-        </div>
-      </ScrollArea.Viewport>
-      <ScrollArea.Scrollbar orientation="vertical">
-        <ScrollArea.Thumb />
-      </ScrollArea.Scrollbar>
-    </ScrollArea.Root>
-  );
-}
+import { ScrollArea } from "@kanpeki/ui/scroll-area";
+import { Separator } from "@kanpeki/ui/separator";
+import { Fragment } from "react";
+
+const tags = Array.from({ length: 50 }).map(
+  (_, i, a) => `v1.2.0-beta.${a.length - i}`
+);
+
+export default function ScrollAreaDemo() {
+  return (
+    <ScrollArea.Root>
+      <ScrollArea.Viewport className="h-72 w-48 rounded-md border">
+        <div className="p-4">
+          <h4 className="mb-4 font-medium text-sm leading-none">Tags</h4>
+          {tags.map((tag) => (
+            <Fragment key={tag}>
+              <div className="text-sm">{tag}</div>
+              <Separator className="my-2" />
+            </Fragment>
+          ))}
+        </div>
+      </ScrollArea.Viewport>
+      <ScrollArea.Scrollbar orientation="vertical">
+        <ScrollArea.Thumb />
+      </ScrollArea.Scrollbar>
+    </ScrollArea.Root>
+  );
+}
diff --git a/packages/components/demos/src/scroll-area-horizontal.tsx b/packages/components/demos/src/scroll-area-horizontal.tsx
index cd629a9..7dea294 100644
--- a/packages/components/demos/src/scroll-area-horizontal.tsx
+++ b/packages/components/demos/src/scroll-area-horizontal.tsx
@@ -1,52 +1,52 @@
-import { ScrollArea } from "@kanpeki/ui/scroll-area";
-
-const works = [
-  {
-    artist: "Ornella Binni",
-    art: "https://images.unsplash.com/photo-1465869185982-5a1a7522cbcb?auto=format&fit=crop&w=300&q=80",
-  },
-  {
-    artist: "Tom Byrom",
-    art: "https://images.unsplash.com/photo-1548516173-3cabfa4607e9?auto=format&fit=crop&w=300&q=80",
-  },
-  {
-    artist: "Vladimir Malyavko",
-    art: "https://images.unsplash.com/photo-1494337480532-3725c85fd2ab?auto=format&fit=crop&w=300&q=80",
-  },
-] as const satisfies {
-  artist: string;
-  art: string;
-}[];
-
-export default function ScrollAreaHorizontalDemo() {
-  return (
-    <ScrollArea.Root>
-      <ScrollArea.Viewport className="w-96 whitespace-nowrap rounded-md border">
-        <div className="flex w-max space-x-4 p-4">
-          {works.map((artwork) => (
-            <figure key={artwork.artist} className="shrink-0">
-              <div className="overflow-hidden rounded-md">
-                <img
-                  src={artwork.art}
-                  alt={`Art by ${artwork.artist}`}
-                  className="aspect-[3/4] h-fit w-fit object-cover"
-                  width={300}
-                  height={400}
-                />
-              </div>
-              <figcaption className="pt-2 text-muted-foreground text-xs">
-                Photo by{" "}
-                <span className="font-semibold text-foreground">
-                  {artwork.artist}
-                </span>
-              </figcaption>
-            </figure>
-          ))}
-        </div>
-      </ScrollArea.Viewport>
-      <ScrollArea.Scrollbar orientation="horizontal">
-        <ScrollArea.Thumb />
-      </ScrollArea.Scrollbar>
-    </ScrollArea.Root>
-  );
-}
+import { ScrollArea } from "@kanpeki/ui/scroll-area";
+
+const works = [
+  {
+    artist: "Ornella Binni",
+    art: "https://images.unsplash.com/photo-1465869185982-5a1a7522cbcb?auto=format&fit=crop&w=300&q=80",
+  },
+  {
+    artist: "Tom Byrom",
+    art: "https://images.unsplash.com/photo-1548516173-3cabfa4607e9?auto=format&fit=crop&w=300&q=80",
+  },
+  {
+    artist: "Vladimir Malyavko",
+    art: "https://images.unsplash.com/photo-1494337480532-3725c85fd2ab?auto=format&fit=crop&w=300&q=80",
+  },
+] as const satisfies {
+  artist: string;
+  art: string;
+}[];
+
+export default function ScrollAreaHorizontalDemo() {
+  return (
+    <ScrollArea.Root>
+      <ScrollArea.Viewport className="w-96 whitespace-nowrap rounded-md border">
+        <div className="flex w-max space-x-4 p-4">
+          {works.map((artwork) => (
+            <figure key={artwork.artist} className="shrink-0">
+              <div className="overflow-hidden rounded-md">
+                <img
+                  src={artwork.art}
+                  alt={`Art by ${artwork.artist}`}
+                  className="aspect-[3/4] h-fit w-fit object-cover"
+                  width={300}
+                  height={400}
+                />
+              </div>
+              <figcaption className="pt-2 text-muted-foreground text-xs">
+                Photo by{" "}
+                <span className="font-semibold text-foreground">
+                  {artwork.artist}
+                </span>
+              </figcaption>
+            </figure>
+          ))}
+        </div>
+      </ScrollArea.Viewport>
+      <ScrollArea.Scrollbar orientation="horizontal">
+        <ScrollArea.Thumb />
+      </ScrollArea.Scrollbar>
+    </ScrollArea.Root>
+  );
+}
diff --git a/packages/components/demos/src/separator-demo.tsx b/packages/components/demos/src/separator-demo.tsx
index 6742ff1..41c355f 100644
--- a/packages/components/demos/src/separator-demo.tsx
+++ b/packages/components/demos/src/separator-demo.tsx
@@ -1,22 +1,22 @@
-import { Separator } from "@kanpeki/ui/separator";
-
-export default function SeparatorDemo() {
-  return (
-    <div>
-      <div className="space-y-1">
-        <h4 className="font-medium text-sm leading-none">Radix Primitives</h4>
-        <p className="text-muted-foreground text-sm">
-          An open-source UI component library.
-        </p>
-      </div>
-      <Separator className="my-4" />
-      <div className="flex h-5 items-center gap-4 text-sm">
-        <p>Blog</p>
-        <Separator orientation="vertical" />
-        <p>Docs</p>
-        <Separator orientation="vertical" />
-        <p>Source</p>
-      </div>
-    </div>
-  );
-}
+import { Separator } from "@kanpeki/ui/separator";
+
+export default function SeparatorDemo() {
+  return (
+    <div>
+      <div className="space-y-1">
+        <h4 className="font-medium text-sm leading-none">Radix Primitives</h4>
+        <p className="text-muted-foreground text-sm">
+          An open-source UI component library.
+        </p>
+      </div>
+      <Separator className="my-4" />
+      <div className="flex h-5 items-center gap-4 text-sm">
+        <p>Blog</p>
+        <Separator orientation="vertical" />
+        <p>Docs</p>
+        <Separator orientation="vertical" />
+        <p>Source</p>
+      </div>
+    </div>
+  );
+}
diff --git a/packages/components/demos/src/separator-vertical.tsx b/packages/components/demos/src/separator-vertical.tsx
index bc8bcaa..04f9a95 100644
--- a/packages/components/demos/src/separator-vertical.tsx
+++ b/packages/components/demos/src/separator-vertical.tsx
@@ -1,13 +1,13 @@
-import { Separator } from "@kanpeki/ui/separator";
-
-export default function SeparatorVerticalDemo() {
-  return (
-    <main className="grid size-full place-content-center">
-      <div className="flex items-center gap-6">
-        <h1 className="font-medium text-2xl">404</h1>
-        <Separator orientation="vertical" />
-        <h2 className="text-sm">This page could not be found.</h2>
-      </div>
-    </main>
-  );
-}
+import { Separator } from "@kanpeki/ui/separator";
+
+export default function SeparatorVerticalDemo() {
+  return (
+    <main className="grid size-full place-content-center">
+      <div className="flex items-center gap-6">
+        <h1 className="font-medium text-2xl">404</h1>
+        <Separator orientation="vertical" />
+        <h2 className="text-sm">This page could not be found.</h2>
+      </div>
+    </main>
+  );
+}
diff --git a/packages/components/demos/src/skeleton-card.tsx b/packages/components/demos/src/skeleton-card.tsx
index 4678e7e..a1921ee 100644
--- a/packages/components/demos/src/skeleton-card.tsx
+++ b/packages/components/demos/src/skeleton-card.tsx
@@ -1,13 +1,13 @@
-import { Skeleton } from "@kanpeki/ui/skeleton";
-
-export default function SkeletonCardDemo() {
-  return (
-    <div className="flex flex-col gap-3">
-      <Skeleton className="h-[125px] w-[250px] rounded-xl" />
-      <div className="space-y-2">
-        <Skeleton className="h-4 w-[250px]" />
-        <Skeleton className="h-4 w-[200px]" />
-      </div>
-    </div>
-  );
-}
+import { Skeleton } from "@kanpeki/ui/skeleton";
+
+export default function SkeletonCardDemo() {
+  return (
+    <div className="flex flex-col gap-3">
+      <Skeleton className="h-[125px] w-[250px] rounded-xl" />
+      <div className="space-y-2">
+        <Skeleton className="h-4 w-[250px]" />
+        <Skeleton className="h-4 w-[200px]" />
+      </div>
+    </div>
+  );
+}
diff --git a/packages/components/demos/src/skeleton-demo.tsx b/packages/components/demos/src/skeleton-demo.tsx
index 82d26bd..632b191 100644
--- a/packages/components/demos/src/skeleton-demo.tsx
+++ b/packages/components/demos/src/skeleton-demo.tsx
@@ -1,13 +1,13 @@
-import { Skeleton } from "@kanpeki/ui/skeleton";
-
-export default function SkeletonDemo() {
-  return (
-    <div className="flex items-center gap-4">
-      <Skeleton className="size-12 rounded-full" />
-      <div className="space-y-2">
-        <Skeleton className="h-4 w-[250px]" />
-        <Skeleton className="h-4 w-[200px]" />
-      </div>
-    </div>
-  );
-}
+import { Skeleton } from "@kanpeki/ui/skeleton";
+
+export default function SkeletonDemo() {
+  return (
+    <div className="flex items-center gap-4">
+      <Skeleton className="size-12 rounded-full" />
+      <div className="space-y-2">
+        <Skeleton className="h-4 w-[250px]" />
+        <Skeleton className="h-4 w-[200px]" />
+      </div>
+    </div>
+  );
+}
diff --git a/packages/components/demos/src/switch-demo.tsx b/packages/components/demos/src/switch-demo.tsx
index 2e94402..b905c92 100644
--- a/packages/components/demos/src/switch-demo.tsx
+++ b/packages/components/demos/src/switch-demo.tsx
@@ -1,13 +1,13 @@
-import { Label } from "@kanpeki/ui/label";
-import { Switch } from "@kanpeki/ui/switch";
-
-export default function SwitchDemo() {
-  return (
-    <div className="flex items-center gap-2">
-      <Switch.Root id="airplane-mode">
-        <Switch.Thumb />
-      </Switch.Root>
-      <Label htmlFor="airplane-mode">Airplane Mode</Label>
-    </div>
-  );
-}
+import { Label } from "@kanpeki/ui/label";
+import { Switch } from "@kanpeki/ui/switch";
+
+export default function SwitchDemo() {
+  return (
+    <div className="flex items-center gap-2">
+      <Switch.Root id="airplane-mode">
+        <Switch.Thumb />
+      </Switch.Root>
+      <Label htmlFor="airplane-mode">Airplane Mode</Label>
+    </div>
+  );
+}
diff --git a/packages/components/demos/src/table-demo.tsx b/packages/components/demos/src/table-demo.tsx
index 2127b31..9d27c45 100644
--- a/packages/components/demos/src/table-demo.tsx
+++ b/packages/components/demos/src/table-demo.tsx
@@ -1,85 +1,85 @@
-import { Table } from "@kanpeki/ui/table";
-
-const invoices = [
-  {
-    invoice: "INV001",
-    paymentStatus: "Paid",
-    totalAmount: "$250.00",
-    paymentMethod: "Credit Card",
-  },
-  {
-    invoice: "INV002",
-    paymentStatus: "Pending",
-    totalAmount: "$150.00",
-    paymentMethod: "PayPal",
-  },
-  {
-    invoice: "INV003",
-    paymentStatus: "Unpaid",
-    totalAmount: "$350.00",
-    paymentMethod: "Bank Transfer",
-  },
-  {
-    invoice: "INV004",
-    paymentStatus: "Paid",
-    totalAmount: "$450.00",
-    paymentMethod: "Credit Card",
-  },
-  {
-    invoice: "INV005",
-    paymentStatus: "Paid",
-    totalAmount: "$550.00",
-    paymentMethod: "PayPal",
-  },
-  {
-    invoice: "INV006",
-    paymentStatus: "Pending",
-    totalAmount: "$200.00",
-    paymentMethod: "Bank Transfer",
-  },
-  {
-    invoice: "INV007",
-    paymentStatus: "Unpaid",
-    totalAmount: "$300.00",
-    paymentMethod: "Credit Card",
-  },
-] as const satisfies {
-  invoice: string;
-  paymentStatus: "Pending" | "Unpaid" | "Paid";
-  totalAmount: string;
-  paymentMethod: "Credit Card" | "PayPal" | "Bank Transfer";
-}[];
-
-export default function TableDemo() {
-  return (
-    <Table.Root>
-      <Table.Caption>A list of your recent invoices.</Table.Caption>
-      <Table.Header>
-        <Table.Row>
-          <Table.Head className="w-[100px]">Invoice</Table.Head>
-          <Table.Head>Status</Table.Head>
-          <Table.Head>Method</Table.Head>
-          <Table.Head className="text-right">Amount</Table.Head>
-        </Table.Row>
-      </Table.Header>
-      <Table.Body>
-        {invoices.map((invoice) => (
-          <Table.Row key={invoice.invoice}>
-            <Table.Cell className="font-medium">{invoice.invoice}</Table.Cell>
-            <Table.Cell>{invoice.paymentStatus}</Table.Cell>
-            <Table.Cell>{invoice.paymentMethod}</Table.Cell>
-            <Table.Cell className="text-right">
-              {invoice.totalAmount}
-            </Table.Cell>
-          </Table.Row>
-        ))}
-      </Table.Body>
-      <Table.Footer>
-        <Table.Row>
-          <Table.Cell colSpan={3}>Total</Table.Cell>
-          <Table.Cell className="text-right">$2,500.00</Table.Cell>
-        </Table.Row>
-      </Table.Footer>
-    </Table.Root>
-  );
-}
+import { Table } from "@kanpeki/ui/table";
+
+const invoices = [
+  {
+    invoice: "INV001",
+    paymentStatus: "Paid",
+    totalAmount: "$250.00",
+    paymentMethod: "Credit Card",
+  },
+  {
+    invoice: "INV002",
+    paymentStatus: "Pending",
+    totalAmount: "$150.00",
+    paymentMethod: "PayPal",
+  },
+  {
+    invoice: "INV003",
+    paymentStatus: "Unpaid",
+    totalAmount: "$350.00",
+    paymentMethod: "Bank Transfer",
+  },
+  {
+    invoice: "INV004",
+    paymentStatus: "Paid",
+    totalAmount: "$450.00",
+    paymentMethod: "Credit Card",
+  },
+  {
+    invoice: "INV005",
+    paymentStatus: "Paid",
+    totalAmount: "$550.00",
+    paymentMethod: "PayPal",
+  },
+  {
+    invoice: "INV006",
+    paymentStatus: "Pending",
+    totalAmount: "$200.00",
+    paymentMethod: "Bank Transfer",
+  },
+  {
+    invoice: "INV007",
+    paymentStatus: "Unpaid",
+    totalAmount: "$300.00",
+    paymentMethod: "Credit Card",
+  },
+] as const satisfies {
+  invoice: string;
+  paymentStatus: "Pending" | "Unpaid" | "Paid";
+  totalAmount: string;
+  paymentMethod: "Credit Card" | "PayPal" | "Bank Transfer";
+}[];
+
+export default function TableDemo() {
+  return (
+    <Table.Root>
+      <Table.Caption>A list of your recent invoices.</Table.Caption>
+      <Table.Header>
+        <Table.Row>
+          <Table.Head className="w-[100px]">Invoice</Table.Head>
+          <Table.Head>Status</Table.Head>
+          <Table.Head>Method</Table.Head>
+          <Table.Head className="text-right">Amount</Table.Head>
+        </Table.Row>
+      </Table.Header>
+      <Table.Body>
+        {invoices.map((invoice) => (
+          <Table.Row key={invoice.invoice}>
+            <Table.Cell className="font-medium">{invoice.invoice}</Table.Cell>
+            <Table.Cell>{invoice.paymentStatus}</Table.Cell>
+            <Table.Cell>{invoice.paymentMethod}</Table.Cell>
+            <Table.Cell className="text-right">
+              {invoice.totalAmount}
+            </Table.Cell>
+          </Table.Row>
+        ))}
+      </Table.Body>
+      <Table.Footer>
+        <Table.Row>
+          <Table.Cell colSpan={3}>Total</Table.Cell>
+          <Table.Cell className="text-right">$2,500.00</Table.Cell>
+        </Table.Row>
+      </Table.Footer>
+    </Table.Root>
+  );
+}
diff --git a/packages/components/demos/src/tabs-demo.tsx b/packages/components/demos/src/tabs-demo.tsx
index 63b5766..989534d 100644
--- a/packages/components/demos/src/tabs-demo.tsx
+++ b/packages/components/demos/src/tabs-demo.tsx
@@ -1,70 +1,70 @@
-import { Button } from "@kanpeki/ui/button";
-import { Card } from "@kanpeki/ui/card";
-import { Label } from "@kanpeki/ui/label";
-import { Tabs } from "@kanpeki/ui/tabs";
-import { TextField } from "@kanpeki/ui/text-field";
-
-export default function TabsDemo() {
-  return (
-    <Tabs.Root defaultValue="account" className="max-w-96">
-      <Tabs.List className="grid w-full grid-cols-2">
-        <Tabs.Trigger value="account">Account</Tabs.Trigger>
-        <Tabs.Trigger value="password">Password</Tabs.Trigger>
-      </Tabs.List>
-      <Tabs.Content value="account">
-        <Card.Root>
-          <Card.Header>
-            <Card.Title>Account</Card.Title>
-            <Card.Description>
-              Make changes to your account here. Click save when you're done.
-            </Card.Description>
-          </Card.Header>
-          <Card.Content className="space-y-2">
-            <div className="space-y-1">
-              <Label htmlFor="name">Name</Label>
-              <TextField.Root>
-                <TextField.Input id="name" defaultValue="Fellipe Utaka" />
-              </TextField.Root>
-            </div>
-            <div className="space-y-1">
-              <Label htmlFor="username">Username</Label>
-              <TextField.Root>
-                <TextField.Input id="username" defaultValue="@fellipeutaka" />
-              </TextField.Root>
-            </div>
-          </Card.Content>
-          <Card.Footer>
-            <Button>Save changes</Button>
-          </Card.Footer>
-        </Card.Root>
-      </Tabs.Content>
-      <Tabs.Content value="password">
-        <Card.Root>
-          <Card.Header>
-            <Card.Title>Password</Card.Title>
-            <Card.Description>
-              Change your password here. After saving, you'll be logged out.
-            </Card.Description>
-          </Card.Header>
-          <Card.Content className="space-y-2">
-            <div className="space-y-1">
-              <Label htmlFor="current">Current password</Label>
-              <TextField.Root>
-                <TextField.Input id="current" type="password" />
-              </TextField.Root>
-            </div>
-            <div className="space-y-1">
-              <Label htmlFor="new">New password</Label>
-              <TextField.Root>
-                <TextField.Input id="new" type="password" />
-              </TextField.Root>
-            </div>
-          </Card.Content>
-          <Card.Footer>
-            <Button>Save password</Button>
-          </Card.Footer>
-        </Card.Root>
-      </Tabs.Content>
-    </Tabs.Root>
-  );
-}
+import { Button } from "@kanpeki/ui/button";
+import { Card } from "@kanpeki/ui/card";
+import { Label } from "@kanpeki/ui/label";
+import { Tabs } from "@kanpeki/ui/tabs";
+import { TextField } from "@kanpeki/ui/text-field";
+
+export default function TabsDemo() {
+  return (
+    <Tabs.Root defaultValue="account" className="max-w-96">
+      <Tabs.List className="grid w-full grid-cols-2">
+        <Tabs.Trigger value="account">Account</Tabs.Trigger>
+        <Tabs.Trigger value="password">Password</Tabs.Trigger>
+      </Tabs.List>
+      <Tabs.Content value="account">
+        <Card.Root>
+          <Card.Header>
+            <Card.Title>Account</Card.Title>
+            <Card.Description>
+              Make changes to your account here. Click save when you're done.
+            </Card.Description>
+          </Card.Header>
+          <Card.Content className="space-y-2">
+            <div className="space-y-1">
+              <Label htmlFor="name">Name</Label>
+              <TextField.Root>
+                <TextField.Input id="name" defaultValue="Fellipe Utaka" />
+              </TextField.Root>
+            </div>
+            <div className="space-y-1">
+              <Label htmlFor="username">Username</Label>
+              <TextField.Root>
+                <TextField.Input id="username" defaultValue="@fellipeutaka" />
+              </TextField.Root>
+            </div>
+          </Card.Content>
+          <Card.Footer>
+            <Button>Save changes</Button>
+          </Card.Footer>
+        </Card.Root>
+      </Tabs.Content>
+      <Tabs.Content value="password">
+        <Card.Root>
+          <Card.Header>
+            <Card.Title>Password</Card.Title>
+            <Card.Description>
+              Change your password here. After saving, you'll be logged out.
+            </Card.Description>
+          </Card.Header>
+          <Card.Content className="space-y-2">
+            <div className="space-y-1">
+              <Label htmlFor="current">Current password</Label>
+              <TextField.Root>
+                <TextField.Input id="current" type="password" />
+              </TextField.Root>
+            </div>
+            <div className="space-y-1">
+              <Label htmlFor="new">New password</Label>
+              <TextField.Root>
+                <TextField.Input id="new" type="password" />
+              </TextField.Root>
+            </div>
+          </Card.Content>
+          <Card.Footer>
+            <Button>Save password</Button>
+          </Card.Footer>
+        </Card.Root>
+      </Tabs.Content>
+    </Tabs.Root>
+  );
+}
diff --git a/packages/components/ui/src/alert.tsx b/packages/components/ui/src/alert.tsx
index 4d27c3c..8c7102b 100644
--- a/packages/components/ui/src/alert.tsx
+++ b/packages/components/ui/src/alert.tsx
@@ -68,5 +68,5 @@ export const Alert = Object.assign(
     Root: AlertRoot,
     Title: AlertTitle,
     Description: AlertDescription,
-  },
+  }
 );
diff --git a/packages/components/ui/src/avatar.tsx b/packages/components/ui/src/avatar.tsx
index 764c007..53e335e 100644
--- a/packages/components/ui/src/avatar.tsx
+++ b/packages/components/ui/src/avatar.tsx
@@ -136,5 +136,5 @@ export const Avatar = Object.assign(
     Image: AvatarImage,
     Fallback: AvatarFallback,
     Placeholder: AvatarPlaceholder,
-  },
+  }
 );
diff --git a/packages/components/ui/src/breadcrumb.tsx b/packages/components/ui/src/breadcrumb.tsx
index 488d228..1d07ccf 100644
--- a/packages/components/ui/src/breadcrumb.tsx
+++ b/packages/components/ui/src/breadcrumb.tsx
@@ -106,5 +106,5 @@ export const Breadcrumb = Object.assign(
     Page: BreadcrumbPage,
     Separator: BreadcrumbSeparator,
     Ellipsis: BreadcrumbEllipsis,
-  },
+  }
 );
diff --git a/packages/components/ui/src/button.tsx b/packages/components/ui/src/button.tsx
index 7d289ed..59424b4 100644
--- a/packages/components/ui/src/button.tsx
+++ b/packages/components/ui/src/button.tsx
@@ -92,7 +92,7 @@ export function Button({
       onPressUp,
       isDisabled: props.disabled,
     },
-    ref,
+    ref
   );
 
   const { focusProps, isFocusVisible } = useFocusRing({
diff --git a/packages/components/ui/src/card.tsx b/packages/components/ui/src/card.tsx
index a52a24f..407fb7d 100644
--- a/packages/components/ui/src/card.tsx
+++ b/packages/components/ui/src/card.tsx
@@ -66,5 +66,5 @@ export const Card = Object.assign(
     Description: CardDescription,
     Content: CardContent,
     Footer: CardFooter,
-  },
+  }
 );
diff --git a/packages/components/ui/src/checkbox.tsx b/packages/components/ui/src/checkbox.tsx
index a4fec48..f04ed53 100644
--- a/packages/components/ui/src/checkbox.tsx
+++ b/packages/components/ui/src/checkbox.tsx
@@ -43,7 +43,7 @@ export function CheckboxRoot({ className, ...props }: CheckboxRootProps) {
       isReadOnly: props.readOnly || props.isReadOnly,
     },
     state,
-    ref,
+    ref
   );
 
   return (
@@ -87,5 +87,5 @@ export const Checkbox = Object.assign(
   {
     Root: CheckboxRoot,
     Indicator: CheckboxIndicator,
-  },
+  }
 );
diff --git a/packages/components/ui/src/collapsible.tsx b/packages/components/ui/src/collapsible.tsx
index afafe5c..adbac44 100644
--- a/packages/components/ui/src/collapsible.tsx
+++ b/packages/components/ui/src/collapsible.tsx
@@ -43,5 +43,5 @@ export const Collapsible = Object.assign(
     Root: CollapsibleRoot,
     Trigger: CollapsibleTrigger,
     Content: CollapsibleContent,
-  },
+  }
 );
diff --git a/packages/components/ui/src/command.tsx b/packages/components/ui/src/command.tsx
index fd9213e..4e2d6d2 100644
--- a/packages/components/ui/src/command.tsx
+++ b/packages/components/ui/src/command.tsx
@@ -159,5 +159,5 @@ export const Command = Object.assign(
     Item: CommandItem,
     Separator: CommandSeparator,
     Shortcut: CommandShortcut,
-  },
+  }
 );
diff --git a/packages/components/ui/src/dialog.tsx b/packages/components/ui/src/dialog.tsx
index f0c26ca..b39acf9 100644
--- a/packages/components/ui/src/dialog.tsx
+++ b/packages/components/ui/src/dialog.tsx
@@ -122,7 +122,7 @@ export function useDialogRootContext() {
   const context = useContext(DialogRootContext);
   if (context === null) {
     throw new Error(
-      "useDialogRootContext must be used within a DialogProvider",
+      "useDialogRootContext must be used within a DialogProvider"
     );
   }
   return context;
@@ -164,7 +164,7 @@ export function DialogRoot({
   const overlayTriggerState = useOverlayTriggerState(props);
   const { triggerProps, overlayProps } = useOverlayTrigger(
     { type: "dialog" },
-    overlayTriggerState,
+    overlayTriggerState
   );
 
   const modalRef = useRef<HTMLDivElement>(null);
@@ -175,7 +175,7 @@ export function DialogRoot({
       isDismissable,
     },
     overlayTriggerState,
-    modalRef,
+    modalRef
   );
 
   return (
@@ -362,5 +362,5 @@ export const Dialog = Object.assign(
     Title: DialogTitle,
     Description: DialogDescription,
     Close: DialogClose,
-  },
+  }
 );
diff --git a/packages/components/ui/src/dropdown-menu.tsx b/packages/components/ui/src/dropdown-menu.tsx
index f6d31c6..b23cf1e 100644
--- a/packages/components/ui/src/dropdown-menu.tsx
+++ b/packages/components/ui/src/dropdown-menu.tsx
@@ -274,5 +274,5 @@ export const DropdownMenu = Object.assign(
     SubContent: DropdownMenuSubContent,
     SubTrigger: DropdownMenuSubTrigger,
     RadioGroup: DropdownMenuRadioGroup,
-  },
+  }
 );
diff --git a/packages/components/ui/src/link-button.tsx b/packages/components/ui/src/link-button.tsx
index a6a21df..10b2c83 100644
--- a/packages/components/ui/src/link-button.tsx
+++ b/packages/components/ui/src/link-button.tsx
@@ -40,7 +40,7 @@ export function LinkButton({
       onPressUp,
       isDisabled: isDisabled ?? props.disabled,
     },
-    ref,
+    ref
   );
 
   const { focusProps, isFocusVisible } = useFocusRing({
diff --git a/packages/components/ui/src/popover.tsx b/packages/components/ui/src/popover.tsx
index 084e7b4..7984814 100644
--- a/packages/components/ui/src/popover.tsx
+++ b/packages/components/ui/src/popover.tsx
@@ -1,51 +1,51 @@
-"use client";
-
-import { Content, Portal, Root, Trigger } from "@radix-ui/react-popover";
-import { tv } from "tailwind-variants";
-
-export const PopoverStyles = {
-  Content: tv({
-    base: [
-      "z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none",
-      "data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=closed]:animate-out",
-      "data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 data-[state=open]:animate-in",
-      "data-[side=bottom]:slide-in-from-top-2",
-      "data-[side=left]:slide-in-from-right-2",
-      " data-[side=right]:slide-in-from-left-2",
-      "data-[side=top]:slide-in-from-bottom-2",
-    ],
-  }),
-};
-
-export const PopoverRoot = Root;
-
-export const PopoverTrigger = Trigger;
-
-export type PopoverContentProps = React.ComponentProps<typeof Content>;
-
-export function PopoverContent({
-  className,
-  align = "center",
-  sideOffset = 4,
-  ...props
-}: PopoverContentProps) {
-  return (
-    <Portal>
-      <Content
-        align={align}
-        sideOffset={sideOffset}
-        className={PopoverStyles.Content({ className })}
-        {...props}
-      />
-    </Portal>
-  );
-}
-
-export const Popover = Object.assign(
-  {},
-  {
-    Root,
-    Trigger,
-    Content: PopoverContent,
-  },
-);
+"use client";
+
+import { Content, Portal, Root, Trigger } from "@radix-ui/react-popover";
+import { tv } from "tailwind-variants";
+
+export const PopoverStyles = {
+  Content: tv({
+    base: [
+      "z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none",
+      "data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=closed]:animate-out",
+      "data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 data-[state=open]:animate-in",
+      "data-[side=bottom]:slide-in-from-top-2",
+      "data-[side=left]:slide-in-from-right-2",
+      " data-[side=right]:slide-in-from-left-2",
+      "data-[side=top]:slide-in-from-bottom-2",
+    ],
+  }),
+};
+
+export const PopoverRoot = Root;
+
+export const PopoverTrigger = Trigger;
+
+export type PopoverContentProps = React.ComponentProps<typeof Content>;
+
+export function PopoverContent({
+  className,
+  align = "center",
+  sideOffset = 4,
+  ...props
+}: PopoverContentProps) {
+  return (
+    <Portal>
+      <Content
+        align={align}
+        sideOffset={sideOffset}
+        className={PopoverStyles.Content({ className })}
+        {...props}
+      />
+    </Portal>
+  );
+}
+
+export const Popover = Object.assign(
+  {},
+  {
+    Root,
+    Trigger,
+    Content: PopoverContent,
+  }
+);
diff --git a/packages/components/ui/src/scroll-area.tsx b/packages/components/ui/src/scroll-area.tsx
index a03cd5f..7cb94cb 100644
--- a/packages/components/ui/src/scroll-area.tsx
+++ b/packages/components/ui/src/scroll-area.tsx
@@ -73,5 +73,5 @@ export const ScrollArea = Object.assign(
     Viewport: ScrollAreaViewport,
     Scrollbar: ScrollAreaScrollbar,
     Thumb: ScrollAreaThumb,
-  },
+  }
 );
diff --git a/packages/components/ui/src/switch.tsx b/packages/components/ui/src/switch.tsx
index e2f0da7..133db33 100644
--- a/packages/components/ui/src/switch.tsx
+++ b/packages/components/ui/src/switch.tsx
@@ -46,7 +46,7 @@ export function SwitchRoot({ className, ...props }: SwitchRootProps) {
       isReadOnly: props.readOnly || props.isReadOnly,
     },
     state,
-    ref,
+    ref
   );
 
   return (
@@ -80,5 +80,5 @@ export const Switch = Object.assign(
   {
     Root: SwitchRoot,
     Thumb: SwitchThumb,
-  },
+  }
 );
diff --git a/packages/components/ui/src/table.tsx b/packages/components/ui/src/table.tsx
index ddc5ff0..0c574a8 100644
--- a/packages/components/ui/src/table.tsx
+++ b/packages/components/ui/src/table.tsx
@@ -94,5 +94,5 @@ export const Table = Object.assign(
     Head: TableHead,
     Cell: TableCell,
     Caption: TableCaption,
-  },
+  }
 );
diff --git a/packages/components/ui/src/tabs.tsx b/packages/components/ui/src/tabs.tsx
index d0ff6b9..19bdb3f 100644
--- a/packages/components/ui/src/tabs.tsx
+++ b/packages/components/ui/src/tabs.tsx
@@ -55,5 +55,5 @@ export const Tabs = Object.assign(
     List: TabsList,
     Trigger: TabsTrigger,
     Content: TabsContent,
-  },
+  }
 );
diff --git a/packages/components/ui/src/text-field.tsx b/packages/components/ui/src/text-field.tsx
index 718107b..574c8ba 100644
--- a/packages/components/ui/src/text-field.tsx
+++ b/packages/components/ui/src/text-field.tsx
@@ -84,5 +84,5 @@ export const TextField = Object.assign(
     Root: TextFieldRoot,
     Input: TextFieldInput,
     Slot: TextFieldSlot,
-  },
+  }
 );
diff --git a/packages/hooks/src/use-active-item.ts b/packages/hooks/src/use-active-item.ts
index 8d2ecc4..0c2a49d 100644
--- a/packages/hooks/src/use-active-item.ts
+++ b/packages/hooks/src/use-active-item.ts
@@ -12,7 +12,7 @@ export function useActiveItem(itemIds: string[]) {
           }
         }
       },
-      { rootMargin: "5% 0% -70% 0%" },
+      { rootMargin: "5% 0% -70% 0%" }
     );
 
     for (const id of itemIds) {
diff --git a/packages/hooks/src/use-animation.ts b/packages/hooks/src/use-animation.ts
index 1dec32f..edcb065 100644
--- a/packages/hooks/src/use-animation.ts
+++ b/packages/hooks/src/use-animation.ts
@@ -4,7 +4,7 @@ import { flushSync } from "react-dom";
 export function useAnimation(
   ref: React.RefObject<HTMLElement | null>,
   isActive: boolean,
-  onEnd: () => void,
+  onEnd: () => void
 ) {
   const prevAnimation = useRef<string | null>(null);
   if (isActive && ref.current) {
@@ -45,7 +45,7 @@ export function useAnimation(
 
 export function useExitAnimation(
   ref: React.RefObject<HTMLElement | null>,
-  isOpen: boolean,
+  isOpen: boolean
 ) {
   // State to trigger a re-render after animation is complete, which causes the element to be removed from the DOM.
   // Ref to track the state we're in, so we don't immediately reset isExiting to true after the animation.
@@ -69,7 +69,7 @@ export function useExitAnimation(
     useCallback(() => {
       setExitState("exited");
       setExiting(false);
-    }, []),
+    }, [])
   );
 
   return isExiting;
diff --git a/packages/utils/src/merge-refs.ts b/packages/utils/src/merge-refs.ts
index 4ca8537..99fd9a6 100644
--- a/packages/utils/src/merge-refs.ts
+++ b/packages/utils/src/merge-refs.ts
@@ -1,5 +1,5 @@
 export function mergeRefs<T>(
-  refs: (React.MutableRefObject<T> | React.LegacyRef<T> | undefined)[],
+  refs: (React.MutableRefObject<T> | React.LegacyRef<T> | undefined)[]
 ): React.RefCallback<T> {
   return (value) => {
     for (const ref of refs) {
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index ee427f5..7b30e90 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -68,6 +68,9 @@ importers:
       '@react-aria/interactions':
         specifier: ^3.22.1
         version: 3.22.1(react@19.0.0-rc-f994737d14-20240522)
+      '@tanstack/react-virtual':
+        specifier: ^3.10.1
+        version: 3.10.1(react-dom@19.0.0-rc-f994737d14-20240522(react@19.0.0-rc-f994737d14-20240522))(react@19.0.0-rc-f994737d14-20240522)
       '@vercel/analytics':
         specifier: ^1.3.1
         version: 1.3.1(next@15.0.0-rc.0(react-dom@19.0.0-rc-f994737d14-20240522(react@19.0.0-rc-f994737d14-20240522))(react@19.0.0-rc-f994737d14-20240522))(react@19.0.0-rc-f994737d14-20240522)
@@ -89,9 +92,6 @@ importers:
       react-dom:
         specifier: 19.0.0-rc-f994737d14-20240522
         version: 19.0.0-rc-f994737d14-20240522(react@19.0.0-rc-f994737d14-20240522)
-      react-virtuoso:
-        specifier: ^4.10.1
-        version: 4.10.1(react-dom@19.0.0-rc-f994737d14-20240522(react@19.0.0-rc-f994737d14-20240522))(react@19.0.0-rc-f994737d14-20240522)
     devDependencies:
       '@kanpeki/tsconfig':
         specifier: workspace:*
@@ -1649,6 +1649,15 @@ packages:
   '@swc/helpers@0.5.12':
     resolution: {integrity: sha512-KMZNXiGibsW9kvZAO1Pam2JPTDBm+KSHMMHWdsyI/1DbIZjT2A6Gy3hblVXUMEDvUAKq+e0vL0X0o54owWji7g==}
 
+  '@tanstack/react-virtual@3.10.1':
+    resolution: {integrity: sha512-h5kNeE+yQwspjl9E3sJ3UYQu/MuspNOBT5cVdc+NA0uU9B1XSkxbzp86teV3arMDVcQ4ESExqs4JyIirYAMcuA==}
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0
+      react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
+
+  '@tanstack/virtual-core@3.10.1':
+    resolution: {integrity: sha512-JDi3wU1HIxuxx8BgD7Ix8IXlelCKdTJIh9c0qBs+QXHdix3mjMbkXI3wOq0TuCx1w1RGgzZue34QrM/NPdp/sw==}
+
   '@types/acorn@4.0.6':
     resolution: {integrity: sha512-veQTnWP+1D/xbxVrPC3zHnCZRjSrKfhbMUlEA43iMZLu7EsnTtkJklIuwrCPbOi8YkvDQAiW05VQQFvvz9oieQ==}
 
@@ -3271,13 +3280,6 @@ packages:
       '@types/react':
         optional: true
 
-  react-virtuoso@4.10.1:
-    resolution: {integrity: sha512-vDBt9AarmCjPNshw3VxPXW355ZQKSO0p9vrAJ0pi04TB6aXk+qHWTu8NuaQ3ppcd/Ub1r5ryRA4fJ2QGuH0H0g==}
-    engines: {node: '>=10'}
-    peerDependencies:
-      react: '>=16 || >=17 || >= 18'
-      react-dom: '>=16 || >=17 || >= 18'
-
   react@18.3.1:
     resolution: {integrity: sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==}
     engines: {node: '>=0.10.0'}
@@ -5322,6 +5324,14 @@ snapshots:
     dependencies:
       tslib: 2.6.3
 
+  '@tanstack/react-virtual@3.10.1(react-dom@19.0.0-rc-f994737d14-20240522(react@19.0.0-rc-f994737d14-20240522))(react@19.0.0-rc-f994737d14-20240522)':
+    dependencies:
+      '@tanstack/virtual-core': 3.10.1
+      react: 19.0.0-rc-f994737d14-20240522
+      react-dom: 19.0.0-rc-f994737d14-20240522(react@19.0.0-rc-f994737d14-20240522)
+
+  '@tanstack/virtual-core@3.10.1': {}
+
   '@types/acorn@4.0.6':
     dependencies:
       '@types/estree': 1.0.5
@@ -7127,11 +7137,6 @@ snapshots:
     optionalDependencies:
       '@types/react': 18.3.3
 
-  react-virtuoso@4.10.1(react-dom@19.0.0-rc-f994737d14-20240522(react@19.0.0-rc-f994737d14-20240522))(react@19.0.0-rc-f994737d14-20240522):
-    dependencies:
-      react: 19.0.0-rc-f994737d14-20240522
-      react-dom: 19.0.0-rc-f994737d14-20240522(react@19.0.0-rc-f994737d14-20240522)
-
   react@18.3.1:
     dependencies:
       loose-envify: 1.4.0