Tailwind shadcn setup + example

apps/frontend/src/app.tsx

@@ -6,6 +6,7 @@ import Root from '@containers/root';
 import NotFound from '@containers/404';
 import Test from '@containers/test';
 import { DonationForm } from '@containers/donations/DonationForm';
+import { ShadcnExample } from '@components/ShadcnExample';
 
 const router = createBrowserRouter([
   {
@@ -17,6 +18,10 @@ const router = createBrowserRouter([
     path: '/test',
     element: <Test />,
   },
+  {
+    path: '/shadcn-example',
+    element: <ShadcnExample />,
+  },
   {
     path: '/donate',
     element: (

apps/frontend/src/components/ShadcnExample.tsx

@@ -0,0 +1,61 @@
+import { Button } from '@components/ui/button';
+
+export function ShadcnExample() {
+  return (
+    <div className="flex items-center justify-center min-h-screen bg-gradient-to-br from-slate-100 to-slate-200">
+      <div className="bg-white rounded-lg shadow-lg p-8 max-w-2xl">
+        <h1 className="text-4xl font-bold text-slate-900 mb-2">
+          shadcn/ui Button
+        </h1>
+        <p className="text-slate-600 mb-8">
+          Copy-paste component working with Tailwind + Radix UI
+        </p>
+
+        <div className="space-y-6">
+          <div>
+            <h2 className="text-lg font-semibold text-slate-900 mb-3">
+              Variants
+            </h2>
+            <div className="flex flex-wrap gap-3">
+              <Button variant="default">Default</Button>
+              <Button variant="secondary">Secondary</Button>
+              <Button variant="outline">Outline</Button>
+              <Button variant="ghost">Ghost</Button>
+              <Button variant="destructive">Destructive</Button>
+              <Button variant="link">Link</Button>
+            </div>
+          </div>
+
+          <div>
+            <h2 className="text-lg font-semibold text-slate-900 mb-3">Sizes</h2>
+            <div className="flex flex-wrap items-center gap-3">
+              <Button size="xs">XS</Button>
+              <Button size="sm">Small</Button>
+              <Button size="default">Default</Button>
+              <Button size="lg">Large</Button>
+            </div>
+          </div>
+
+          <div>
+            <h2 className="text-lg font-semibold text-slate-900 mb-3">
+              States
+            </h2>
+            <div className="flex flex-wrap gap-3">
+              <Button>Enabled</Button>
+              <Button disabled>Disabled</Button>
+            </div>
+          </div>
+        </div>
+
+        <div className="mt-8 p-4 bg-green-50 border border-green-200 rounded">
+          <p className="text-sm text-green-800">
+            Developers can copy shadcn components to{' '}
+            <code className="bg-green-100 px-2 py-1 rounded text-xs">
+              apps/frontend/src/components/ui/
+            </code>
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+}

apps/frontend/src/components/ui/button.tsx

@@ -0,0 +1,63 @@
+import * as React from 'react';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { Slot } from '@radix-ui/react-slot';
+import { cn } from '../../lib/utils';
+const buttonVariants = cva(
+  "focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-lg border border-transparent bg-clip-padding text-sm font-medium focus-visible:ring-[3px] aria-invalid:ring-[3px] [&_svg:not([class*='size-'])]:size-4 inline-flex items-center justify-center whitespace-nowrap transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none shrink-0 [&_svg]:shrink-0 outline-none group/button select-none",
+  {
+    variants: {
+      variant: {
+        default: 'bg-primary text-primary-foreground [a]:hover:bg-primary/80',
+        outline:
+          'border-border bg-background hover:bg-muted hover:text-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 aria-expanded:bg-muted aria-expanded:text-foreground',
+        secondary:
+          'bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground',
+        ghost:
+          'hover:bg-muted hover:text-foreground dark:hover:bg-muted/50 aria-expanded:bg-muted aria-expanded:text-foreground',
+        destructive:
+          'bg-destructive/10 hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/20 text-destructive focus-visible:border-destructive/40 dark:hover:bg-destructive/30',
+        link: 'text-primary underline-offset-4 hover:underline',
+      },
+      size: {
+        default:
+          'h-8 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2',
+        xs: "h-6 gap-1 rounded-[min(var(--radius-md),10px)] px-2 text-xs in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3",
+        sm: "h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5",
+        lg: 'h-9 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-3 has-data-[icon=inline-start]:pl-3',
+        icon: 'size-8',
+        'icon-xs':
+          "size-6 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-lg [&_svg:not([class*='size-'])]:size-3",
+        'icon-sm':
+          'size-7 rounded-[min(var(--radius-md),12px)] in-data-[slot=button-group]:rounded-lg',
+        'icon-lg': 'size-9',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
+  },
+);
+function Button({
+  className,
+  variant = 'default',
+  size = 'default',
+  asChild = false,
+  ...props
+}: React.ComponentProps<'button'> &
+  VariantProps<typeof buttonVariants> & {
+    asChild?: boolean;
+  }) {
+  const Comp = asChild ? Slot : 'button';
+  return (
+    // @ts-expect-error - Slot type compatibility with button element
+    <Comp
+      data-slot="button"
+      data-variant={variant}
+      data-size={size}
+      className={cn(buttonVariants({ variant, size, className }))}
+      {...props}
+    />
+  );
+}
+export { Button, buttonVariants };

apps/frontend/src/lib/utils.ts

@@ -0,0 +1,6 @@
+import { type ClassValue, clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}

apps/frontend/src/styles.css

@@ -1 +1,3 @@
-/* You can add global styles to this file, and also import other style files */
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

apps/frontend/tsconfig.json

@@ -11,6 +11,7 @@
       "@api/*": ["api/*"],
       "@components/*": ["components/*"],
       "@containers/*": ["containers/*"],
+      "@lib/*": ["lib/*"],
       "@public/*": ["../public/*"],
       "@shared/*": ["../../../shared/*"],
       "@utils/*": ["utils/*"]

apps/frontend/vite.config.mts

@@ -31,6 +31,7 @@ export default defineConfig({
   //  plugins: [ nxViteTsPaths() ],
   // },
 
+  // @ts-expect-error
   test: {
     globals: true,
     cache: {
@@ -45,6 +46,7 @@ export default defineConfig({
       '@api': path.resolve(__dirname, './src/api'),
       '@components': path.resolve(__dirname, './src/components'),
       '@containers': path.resolve(__dirname, './src/containers'),
+      '@lib': path.resolve(__dirname, './src/lib'),
       '@public': path.resolve(__dirname, './public'),
       '@shared': path.resolve(__dirname, '../../shared'),
       '@utils': path.resolve(__dirname, './src/utils'),

package.json

@@ -42,14 +42,19 @@
     "@nestjs/platform-express": "^10.0.2",
     "@nestjs/swagger": "^7.1.12",
     "@nestjs/typeorm": "^10.0.0",
+    "@radix-ui/react-primitive": "^2.1.4",
+    "@radix-ui/react-slot": "^1.2.4",
     "@types/pg": "^8.15.5",
     "@types/supertest": "^6.0.3",
     "amazon-cognito-identity-js": "^6.3.5",
     "axios": "^1.5.0",
     "class-transformer": "^0.5.1",
     "class-validator": "^0.14.0",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
     "global": "^4.4.0",
     "jwks-rsa": "^3.1.0",
+    "lucide-react": "^0.563.0",
     "passport": "^0.6.0",
     "passport-jwt": "^4.0.1",
     "pg": "^8.16.3",
@@ -61,6 +66,8 @@
     "sqlite3": "^5.1.7",
     "stripe": "^19.1.0",
     "supertest": "^7.1.4",
+    "tailwind-merge": "^3.4.0",
+    "tailwindcss-animate": "^1.0.7",
     "ts-node": "^10.9.2",
     "tsconfig-paths": "^4.2.0",
     "typeorm": "^0.3.17"
@@ -85,6 +92,7 @@
     "@typescript-eslint/parser": "^7.0.0",
     "@vitejs/plugin-react": "^4.3.0",
     "@vitest/ui": "^1.3.1",
+    "autoprefixer": "^10.4.23",
     "cypress": "14.2.1",
     "eslint": "^8.46.0",
     "eslint-config-prettier": "^10.0.0",
@@ -101,7 +109,9 @@
     "lint-staged": "^14.0.1",
     "nodemon": "^3.0.1",
     "nx": "22.0.2",
+    "postcss": "^8.5.6",
     "prettier": "^3.6.2",
+    "tailwindcss": "3",
     "ts-jest": "29.4.5",
     "typescript": "^5.1.3",
     "vite": "7.1.3",

postcss.config.js

@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};

tailwind.config.ts

@@ -0,0 +1,13 @@
+import type { Config } from 'tailwindcss'
+
+export default {
+  content: [
+    './apps/frontend/index.html',
+    './apps/frontend/src/**/*.{js,ts,jsx,tsx}',
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+} satisfies Config
+