ui-shadcn-cli

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).
 

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:*",

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/"
+  }
+}

packages/ui/package.json

@@ -5,20 +5,16 @@
   "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": {
     "add": "pnpm dlx shadcn-ui add",
     "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",

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",

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;

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>(

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 };

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>;
 

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",