diff --git a/README.md b/README.md
index 80463cc3c..18a1cc5ea 100644
--- a/README.md
+++ b/README.md
@@ -116,7 +116,17 @@ pnpm db:push
 
 > **TIP:** It might be easier to run each app in separate terminal windows, so you get the logs from each app separately. This is also required if you want your terminals to be interactive, e.g. to access the Expo QR code. You can run `pnpm --filter expo dev` and `pnpm --filter nextjs dev` to run each app in a separate terminal window.
 
-### 3. When it's time to add a new package
+### 3a. When it's time to add a new UI component
+
+Run the `ui-add` script to add a new UI component using the interactive `shadcn/ui` CLI:
+
+```bash
+pnpm ui-add
+```
+
+When the component(s) has been installed, you should be good to go and start using it in your app.
+
+### 3b. When it's time to add a new package
 
 To add a new package, simply run `pnpm turbo gen init` in the monorepo root. This will prompt you for a package name as well as if you want to install any dependencies to the new package (of course you can also do this yourself later).
 
diff --git a/package.json b/package.json
index 9dfc01394..3f4bdac47 100644
--- a/package.json
+++ b/package.json
@@ -18,7 +18,8 @@
     "lint:fix": "turbo lint --continue -- --fix --cache --cache-location node_modules/.cache/.eslintcache",
     "lint:ws": "pnpm dlx sherif@latest",
     "postinstall": "pnpm lint:ws",
-    "typecheck": "turbo typecheck"
+    "typecheck": "turbo typecheck",
+    "ui-add": "pnpm -F ui ui-add"
   },
   "devDependencies": {
     "@acme/prettier-config": "workspace:*",
diff --git a/packages/ui/components.json b/packages/ui/components.json
new file mode 100644
index 000000000..c26248867
--- /dev/null
+++ b/packages/ui/components.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": true,
+  "tsx": true,
+  "tailwind": {
+    "config": "./tailwind.config.ts",
+    "css": "unused.css",
+    "baseColor": "zinc",
+    "cssVariables": true
+  },
+  "aliases": {
+    "utils": "@acme/ui",
+    "components": "src/",
+    "ui": "src/"
+  }
+}
diff --git a/packages/ui/package.json b/packages/ui/package.json
index 6f880d76b..08bbaf2ed 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -5,12 +5,7 @@
   "type": "module",
   "exports": {
     ".": "./src/index.ts",
-    "./button": "./src/button.tsx",
-    "./form": "./src/form.tsx",
-    "./input": "./src/input.tsx",
-    "./label": "./src/label.tsx",
-    "./theme": "./src/theme.tsx",
-    "./toast": "./src/toast.tsx"
+    "./*": "./src/*.tsx"
   },
   "license": "MIT",
   "scripts": {
@@ -18,7 +13,8 @@
     "clean": "rm -rf .turbo node_modules",
     "format": "prettier --check . --ignore-path ../../.gitignore",
     "lint": "eslint .",
-    "typecheck": "tsc --noEmit --emitDeclarationOnly false"
+    "typecheck": "tsc --noEmit --emitDeclarationOnly false",
+    "ui-add": "pnpm dlx shadcn-ui add && prettier src --write --list-different"
   },
   "dependencies": {
     "@hookform/resolvers": "^3.3.4",
diff --git a/packages/ui/src/button.tsx b/packages/ui/src/button.tsx
index 19fa94404..6f5c3c695 100644
--- a/packages/ui/src/button.tsx
+++ b/packages/ui/src/button.tsx
@@ -3,7 +3,7 @@ import * as React from "react";
 import { Slot } from "@radix-ui/react-slot";
 import { cva } from "class-variance-authority";
 
-import { cn } from ".";
+import { cn } from "@acme/ui";
 
 const buttonVariants = cva(
   "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
diff --git a/packages/ui/src/dropdown-menu.tsx b/packages/ui/src/dropdown-menu.tsx
index 5ea9f27f2..ecca776cc 100644
--- a/packages/ui/src/dropdown-menu.tsx
+++ b/packages/ui/src/dropdown-menu.tsx
@@ -8,7 +8,7 @@ import {
   DotFilledIcon,
 } from "@radix-ui/react-icons";
 
-import { cn } from ".";
+import { cn } from "@acme/ui";
 
 const DropdownMenu = DropdownMenuPrimitive.Root;
 const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
diff --git a/packages/ui/src/form.tsx b/packages/ui/src/form.tsx
index e691bd428..9115b86a8 100644
--- a/packages/ui/src/form.tsx
+++ b/packages/ui/src/form.tsx
@@ -18,7 +18,8 @@ import {
   useFormContext,
 } from "react-hook-form";
 
-import { cn } from ".";
+import { cn } from "@acme/ui";
+
 import { Label } from "./label";
 
 const useForm = <TSchema extends ZodType>(
diff --git a/packages/ui/src/index.ts b/packages/ui/src/index.ts
index e92cc270a..3dc9f0184 100644
--- a/packages/ui/src/index.ts
+++ b/packages/ui/src/index.ts
@@ -1,7 +1,6 @@
-import type { CxOptions } from "class-variance-authority";
 import { cx } from "class-variance-authority";
 import { twMerge } from "tailwind-merge";
 
-const cn = (...inputs: CxOptions) => twMerge(cx(inputs));
+const cn = (...inputs: Parameters<typeof cx>) => twMerge(cx(inputs));
 
 export { cn };
diff --git a/packages/ui/src/input.tsx b/packages/ui/src/input.tsx
index b18b69b82..a213c918e 100644
--- a/packages/ui/src/input.tsx
+++ b/packages/ui/src/input.tsx
@@ -1,6 +1,6 @@
 import * as React from "react";
 
-import { cn } from ".";
+import { cn } from "@acme/ui";
 
 type InputProps = React.InputHTMLAttributes<HTMLInputElement>;
 
diff --git a/packages/ui/src/label.tsx b/packages/ui/src/label.tsx
index 8ab59a1f3..4e0825d6b 100644
--- a/packages/ui/src/label.tsx
+++ b/packages/ui/src/label.tsx
@@ -3,7 +3,7 @@ import * as React from "react";
 import * as LabelPrimitive from "@radix-ui/react-label";
 import { cva } from "class-variance-authority";
 
-import { cn } from ".";
+import { cn } from "@acme/ui";
 
 const labelVariants = cva(
   "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",