doc: update readme

README.md

@@ -1,17 +1,9 @@
 # Turborepo kitchen sink starter
 
-This Turborepo starter is maintained by the Turborepo core team.
+This Turborepo starter is scaffolded at 2025/06/19 using the [kitchen-sink template](https://vercel.com/templates/monorepos/turborepo-kitchensink) which is maintained by the Turborepo core team. It is heavily modified as a starter template for new Turborepos e-commerce projects but could also be used as a general-purpose monorepo starter.
 
 This example also shows how to use [Workspace Configurations](https://turborepo.com/docs/core-concepts/monorepos/configuring-workspaces).
 
-## Using this example
-
-Run the following command:
-
-```sh
-npx create-turbo@latest -e kitchen-sink
-```
-
 ## What's inside?
 
 This Turborepo includes the following packages and apps:
@@ -21,12 +13,20 @@ This Turborepo includes the following packages and apps:
 - `express-template`: an [Express](https://expressjs.com/) server
 - `next-template`: a [Next.js](https://nextjs.org/) app
 - `vite-template`: a [Vite](https://vitejs.dev/) single page app
-- `remix-template`: a [Remix](https://remix.run/) blog
+- `remix-template`: a [Remix](https://remix.run/) app
 - `@repo/eslint-config`: ESLint configurations used throughout the monorepo
+- `@repo/typescript-config`: tsconfig.json's used throughout the monorepo
 - `@repo/jest-presets`: Jest configurations
 - `@repo/logger`: isomorphic logger (a small wrapper around console.log)
-- `@repo/ui`: a dummy React UI library (which contains `<CounterButton>` and `<Link>` components)
+- `@repo/ui`: shared UI components for frontend use.
-- `@repo/typescript-config`: tsconfig.json's used throughout the monorepo
+    - A dummy React UI library (which contains `<CounterButton>` and `<Link>` components)
+    - And shadcn/ui components (which contains `<Button>` and `<Card>` components)
+    - Building the UI will require exporting the components in the `package.json` file.
+        - For `Vite` apps, `vite-tsconfig-paths` package is required to ensure the UI components are properly built and available for use.
+        - For `Next.js` apps, the `next.config.ts` file needs to have `transpilePackages: ["@repo/ui"]` to ensure the UI components are properly built and available for use.
+    - Although not required, adding `	"paths": {
+	"@repo/ui/*": ["../../packages/ui/src/*"]
+}` in the `tsconfig.json` file of each app can help with TypeScript path resolution during development.
 
 Each package and app is 100% [TypeScript](https://www.typescriptlang.org/).
 
@@ -38,3 +38,8 @@ This Turborepo has some additional tools already setup for you:
 - [ESLint](https://eslint.org/) for code linting
 - [Jest](https://jestjs.io) test runner for all things JavaScript
 - [Prettier](https://prettier.io) for code formatting
+- [shadcn/ui](https://ui.shadcn.com/docs/monorepo) for UI components
+    - To use the CLI, run `npx shadcn@latest add <component-name>` in the `@repo/ui` package directory.
+    - It can also be run at each app directory and the CLI will automatically add it to the shared `@repo/ui` package but each app will need its own `components.json` file.
+- [Tailwind CSS v4](https://tailwindcss.com/) for styling and to use shadcn/ui
+    - Each app needs its own tailwind.config.js file and postcss.config.js file but they all extend from the shared `@repo/ui/tailwind.config.js` and `@repo/ui/postcss.config.js` files.

packages/ui/src/components/alert.tsx

@@ -1,66 +0,0 @@
-import * as React from "react"
-import { cva, type VariantProps } from "class-variance-authority"
-
-import { cn } from "@repo/ui/lib/utils"
-
-const alertVariants = cva(
-  "relative w-full rounded-lg border px-4 py-3 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current",
-  {
-    variants: {
-      variant: {
-        default: "bg-card text-card-foreground",
-        destructive:
-          "text-destructive bg-card [&>svg]:text-current *:data-[slot=alert-description]:text-destructive/90",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-    },
-  }
-)
-
-function Alert({
-  className,
-  variant,
-  ...props
-}: React.ComponentProps<"div"> & VariantProps<typeof alertVariants>) {
-  return (
-    <div
-      data-slot="alert"
-      role="alert"
-      className={cn(alertVariants({ variant }), className)}
-      {...props}
-    />
-  )
-}
-
-function AlertTitle({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="alert-title"
-      className={cn(
-        "col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function AlertDescription({
-  className,
-  ...props
-}: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="alert-description"
-      className={cn(
-        "text-muted-foreground col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-export { Alert, AlertTitle, AlertDescription }

packages/ui/src/components/badge.tsx

@@ -1,46 +0,0 @@
-import * as React from "react"
-import { Slot } from "@radix-ui/react-slot"
-import { cva, type VariantProps } from "class-variance-authority"
-
-import { cn } from "@repo/ui/lib/utils"
-
-const badgeVariants = cva(
-  "inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",
-  {
-    variants: {
-      variant: {
-        default:
-          "border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
-        secondary:
-          "border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
-        destructive:
-          "border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
-        outline:
-          "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-    },
-  }
-)
-
-function Badge({
-  className,
-  variant,
-  asChild = false,
-  ...props
-}: React.ComponentProps<"span"> &
-  VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
-  const Comp = asChild ? Slot : "span"
-
-  return (
-    <Comp
-      data-slot="badge"
-      className={cn(badgeVariants({ variant }), className)}
-      {...props}
-    />
-  )
-}
-
-export { Badge, badgeVariants }