@aws/nx-plugin 0.68.1 → 0.69.0

package/src/ts/react-website/app/__snapshots__/generator.spec.ts.snap

@@ -338,13 +338,26 @@ exports[`react-website generator (uxProvider=Cloudscape) > should update package
 "
 `;
 
-exports[`react-website generator (uxProvider=None) > should update package.json with required dependencies > test-app/src/components/AppLayout/index.tsx 1`] = `
+exports[`react-website generator (uxProvider=Shadcn) > should update package.json with required dependencies > test-app/src/components/AppLayout/index.tsx 1`] = `
 "import * as React from 'react';
-
-import { useEffect, useMemo, useState } from 'react';
-
+import {
+  SidebarInset,
+  SidebarProvider,
+  SidebarTrigger,
+} from ':proj/common-shadcn/components/ui/sidebar';
+import { Separator } from ':proj/common-shadcn/components/ui/separator';
 import Config from '../../config';
+
 import { Link, useLocation, useMatchRoute } from '@tanstack/react-router';
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from ':proj/common-shadcn/components/ui/breadcrumb';
+import { AppSidebar } from '../app-sidebar';
 
 const getBreadcrumbs = (
   matchRoute: ReturnType<typeof useMatchRoute>,
@@ -377,72 +390,70 @@ const getBreadcrumbs = (
   });
 };
 
-/**
- * Defines the App layout and contains logic for routing.
- */
-const AppLayout: React.FC<React.PropsWithChildren> = ({ children }) => {
-  const [activeBreadcrumbs, setActiveBreadcrumbs] = useState<
+const AppLayout = ({ children }: { children: React.ReactNode }) => {
+  const [activeBreadcrumbs, setActiveBreadcrumbs] = React.useState<
     { href: string; text: string }[]
   >([{ text: '/', href: '/' }]);
   const matchRoute = useMatchRoute();
   const { pathname, search } = useLocation();
-  const navItems = useMemo(() => [{ to: '/', label: 'Home' }], []);
 
-  useEffect(() => {
+  React.useEffect(() => {
     const breadcrumbs = getBreadcrumbs(
       matchRoute,
       pathname,
       Object.entries(search).reduce((p, [k, v]) => p + \`\${k}=\${v}\`, ''),
-      'Home',
+      '/',
     );
     setActiveBreadcrumbs(breadcrumbs);
   }, [matchRoute, pathname, search]);
 
   return (
-    <div className="app-shell">
-      <header className="app-header">
-        <div className="app-header-inner">
-          <div className="brand">
-            <a href="/">
+    <SidebarProvider>
+      <AppSidebar />
+      <SidebarInset>
+        <header className="supports-backdrop-blur:bg-background/60 sticky top-0 z-10 flex h-16 items-center gap-4 border-b bg-background/80 px-4 backdrop-blur">
+          <div className="flex items-center gap-3">
+            <SidebarTrigger className="-ml-1" />
+            <Separator orientation="vertical" className="h-6" />
+            <div className="flex items-center gap-2">
               <img
-                src={Config.logo}
                 alt={\`\${Config.applicationName} logo\`}
-                className="brand-logo"
+                className="size-10 rounded-lg border border-border/60 bg-background object-cover shadow-sm"
+                src={Config.logo}
               />
-              <span className="brand-name">{Config.applicationName}</span>
-            </a>
+              <div className="flex flex-col leading-tight">
+                <span className="text-sm font-semibold">
+                  {Config.applicationName}
+                </span>
+              </div>
+            </div>
           </div>
-
-          <nav className="app-nav">
-            {navItems.map((item) => (
-              <Link
-                key={item.to}
-                to={item.to}
-                className={pathname === item.to ? 'active' : undefined}
-              >
-                {item.label}
-              </Link>
-            ))}
-          </nav>
+        </header>
+        <div className="flex flex-1 flex-col gap-6 p-6 pt-4">
+          <Breadcrumb>
+            <BreadcrumbList>
+              {activeBreadcrumbs.map((crumb, index) => (
+                <React.Fragment key={crumb.href || index}>
+                  <BreadcrumbItem>
+                    {index === activeBreadcrumbs.length - 1 ? (
+                      <BreadcrumbPage>{crumb.text}</BreadcrumbPage>
+                    ) : (
+                      <BreadcrumbLink asChild>
+                        <Link to={crumb.href}>{crumb.text}</Link>
+                      </BreadcrumbLink>
+                    )}
+                  </BreadcrumbItem>
+                  {index < activeBreadcrumbs.length - 1 && (
+                    <BreadcrumbSeparator />
+                  )}
+                </React.Fragment>
+              ))}
+            </BreadcrumbList>
+          </Breadcrumb>
+          {children}
         </div>
-      </header>
-      <main className="app-main">
-        <nav className="breadcrumbs" aria-label="Breadcrumb">
-          {activeBreadcrumbs.map((crumb, index) => (
-            <span className="breadcrumb-segment" key={crumb.href || index}>
-              {index > 0 && <span className="breadcrumb-separator">/</span>}
-              {index === activeBreadcrumbs.length - 1 ? (
-                <span className="breadcrumb-current">{crumb.text}</span>
-              ) : (
-                <Link to={crumb.href}>{crumb.text}</Link>
-              )}
-            </span>
-          ))}
-        </nav>
-
-        <section className="card">{children}</section>
-      </main>
-    </div>
+      </SidebarInset>
+    </SidebarProvider>
   );
 };
 
@@ -450,36 +461,101 @@ export default AppLayout;
 "
 `;
 
-exports[`react-website generator (uxProvider=None) > should update package.json with required dependencies > test-app/src/components/alert.tsx 1`] = `
+exports[`react-website generator (uxProvider=Shadcn) > should update package.json with required dependencies > test-app/src/components/alert.tsx 1`] = `
 "import React from 'react';
+import {
+  Alert as ShadcnAlert,
+  AlertDescription,
+  AlertTitle,
+} from ':proj/common-shadcn/components/ui/alert';
+
+type AlertType = 'info' | 'error';
 
-interface AlertProps {
-  type: string;
-  header: string;
+export interface AlertProps {
+  type?: AlertType;
+  header: React.ReactNode;
   children: React.ReactNode;
 }
 
-export const Alert: React.FC<AlertProps> = ({ type, header, children }) => (
-  <div className={\`alert alert-\${type}\`} role="alert">
-    <div className="alert-header">{header}</div>
-    <div className="alert-body">{children}</div>
-  </div>
-);
+export const Alert: React.FC<AlertProps> = ({
+  type = 'info',
+  header,
+  children,
+}) => {
+  const variant = type === 'error' ? 'destructive' : 'default';
+  const role = type === 'error' ? 'alert' : 'status';
+
+  return (
+    <ShadcnAlert variant={variant} role={role}>
+      <AlertTitle>{header}</AlertTitle>
+      <AlertDescription>{children}</AlertDescription>
+    </ShadcnAlert>
+  );
+};
 "
 `;
 
-exports[`react-website generator (uxProvider=None) > should update package.json with required dependencies > test-app/src/components/spinner.tsx 1`] = `
-"import React from 'react';
+exports[`react-website generator (uxProvider=Shadcn) > should update package.json with required dependencies > test-app/src/components/app-sidebar.tsx 1`] = `
+"import { Home } from 'lucide-react';
 
-export const Spinner: React.FC = () => (
-  <div className="spinner" role="status" aria-live="polite" aria-busy="true">
-    Loading...
-  </div>
-);
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+} from ':proj/common-shadcn/components/ui/sidebar';
+import { Link } from '@tanstack/react-router';
+
+import Config from '../config';
+
+export function AppSidebar() {
+  // Menu items.
+  const navItems = [
+    {
+      label: 'Home',
+      to: '/',
+      icon: Home,
+    },
+  ];
+  return (
+    <Sidebar>
+      <SidebarContent>
+        <SidebarGroup>
+          <SidebarGroupLabel>{Config.applicationName}</SidebarGroupLabel>
+          <SidebarGroupContent>
+            <SidebarMenu>
+              {navItems.map((item) => (
+                <SidebarMenuItem key={item.label}>
+                  <SidebarMenuButton asChild>
+                    <Link to={item.to} preload="intent">
+                      <item.icon />
+                      <span>{item.label}</span>
+                    </Link>
+                  </SidebarMenuButton>
+                </SidebarMenuItem>
+              ))}
+            </SidebarMenu>
+          </SidebarGroupContent>
+        </SidebarGroup>
+      </SidebarContent>
+    </Sidebar>
+  );
+}
+"
+`;
+
+exports[`react-website generator (uxProvider=Shadcn) > should update package.json with required dependencies > test-app/src/components/spinner.tsx 1`] = `
+"import { Spinner as ShadcnSpinner } from ':proj/common-shadcn/components/ui/spinner';
+
+export const Spinner = ShadcnSpinner;
 "
 `;
 
-exports[`react-website generator (uxProvider=None) > should update package.json with required dependencies > test-app/src/config.ts 1`] = `
+exports[`react-website generator (uxProvider=Shadcn) > should update package.json with required dependencies > test-app/src/config.ts 1`] = `
 "export default {
   applicationName: 'test-app',
   logo: 'data:image/svg+xml;base64,PCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj4KDTwhLS0gVXBsb2FkZWQgdG86IFNWRyBSZXBvLCB3d3cuc3ZncmVwby5jb20sIFRyYW5zZm9ybWVkIGJ5OiBTVkcgUmVwbyBNaXhlciBUb29scyAtLT4KPHN2ZyBmaWxsPSIjMjQ4YmFlIiB3aWR0aD0iODAwcHgiIGhlaWdodD0iODAwcHgiIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHN0cm9rZT0iIzI0OGJhZSI+Cg08ZyBpZD0iU1ZHUmVwb19iZ0NhcnJpZXIiIHN0cm9rZS13aWR0aD0iMCIvPgoNPGcgaWQ9IlNWR1JlcG9fdHJhY2VyQ2FycmllciIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+Cg08ZyBpZD0iU1ZHUmVwb19pY29uQ2FycmllciI+Cg08dGl0bGU+aW9uaWNvbnMtdjVfbG9nb3M8L3RpdGxlPgoNPHBhdGggZD0iTTQxMC42NiwxODAuNzJoMHEtNy42Ny0yLjYyLTE1LjQ1LTQuODgsMS4yOS01LjI1LDIuMzgtMTAuNTZjMTEuNy01Ni45LDQuMDUtMTAyLjc0LTIyLjA2LTExNy44My0yNS0xNC40OC02NiwuNjEtMTA3LjM2LDM2LjY5cS02LjEsNS4zNC0xMS45NSwxMS0zLjktMy43Ni04LTcuMzZjLTQzLjM1LTM4LjU4LTg2LjgtNTQuODMtMTEyLjg4LTM5LjY5LTI1LDE0LjUxLTMyLjQzLDU3LjYtMjEuOSwxMTEuNTNxMS41OCw4LDMuNTUsMTUuOTNjLTYuMTUsMS43NS0xMi4wOSwzLjYyLTE3Ljc3LDUuNkM0OC40NiwxOTguOSwxNiwyMjYuNzMsMTYsMjU1LjU5YzAsMjkuODIsMzQuODQsNTkuNzIsODcuNzcsNzcuODVxNi40NCwyLjE5LDEzLDQuMDdRMTE0LjY0LDM0NiwxMTMsMzU0LjY4Yy0xMCw1My0yLjIsOTUuMDcsMjIuNzUsMTA5LjQ5LDI1Ljc3LDE0Ljg5LDY5LS40MSwxMTEuMTQtMzcuMzFxNS00LjM4LDEwLTkuMjUsNi4zMiw2LjExLDEzLDExLjg2YzQwLjgsMzUuMTgsODEuMDksNDkuMzksMTA2LDM0LjkzLDI1Ljc1LTE0Ljk0LDM0LjEyLTYwLjE0LDIzLjI1LTExNS4xM3EtMS4yNS02LjMtMi44OC0xMi44Niw0LjU2LTEuMzUsOC45My0yLjc5YzU1LTE4LjI3LDkwLjgzLTQ3LjgxLDkwLjgzLTc4QzQ5NiwyMjYuNjIsNDYyLjUsMTk4LjYxLDQxMC42NiwxODAuNzJabS0xMjktODEuMDhjMzUuNDMtMzAuOTEsNjguNTUtNDMuMTEsODMuNjUtMzQuMzloMGMxNi4wNyw5LjI5LDIyLjMyLDQ2Ljc1LDEyLjIyLDk1Ljg4cS0xLDQuOC0yLjE2LDkuNTdhNDg3LjgzLDQ4Ny44MywwLDAsMC02NC4xOC0xMC4xNiw0ODEuMjcsNDgxLjI3LDAsMCwwLTQwLjU3LTUwLjc1UTI3NiwxMDQuNTcsMjgxLjY0LDk5LjY0Wk0xNTcuNzMsMjgwLjI1cTYuNTEsMTIuNiwxMy42MSwyNC44OSw3LjIzLDEyLjU0LDE1LjA3LDI0LjcxYTQzNS4yOCw0MzUuMjgsMCwwLDEtNDQuMjQtNy4xM0MxNDYuNDEsMzA5LDE1MS42MywyOTQuNzUsMTU3LjczLDI4MC4yNVptMC00OC4zM2MtNi0xNC4xOS0xMS4wOC0yOC4xNS0xNS4yNS00MS42MywxMy43LTMuMDcsMjguMy01LjU4LDQzLjUyLTcuNDhxLTcuNjUsMTEuOTQtMTQuNzIsMjQuMjNUMTU3LjcsMjMxLjkyWm0xMC45LDI0LjE3cTkuNDgtMTkuNzcsMjAuNDItMzguNzhoMHExMC45My0xOSwyMy4yNy0zNy4xM2MxNC4yOC0xLjA4LDI4LjkyLTEuNjUsNDMuNzEtMS42NXMyOS41Mi41Nyw0My43OSwxLjY2cTEyLjIxLDE4LjA5LDIzLjEzLDM3dDIwLjY5LDM4LjZRMzM0LDI3NS42MywzMjMsMjk0LjczaDBxLTEwLjkxLDE5LTIzLDM3LjI0Yy0xNC4yNSwxLTI5LDEuNTUtNDQsMS41NXMtMjkuNDctLjQ3LTQzLjQ2LTEuMzhxLTEyLjQzLTE4LjE5LTIzLjQ2LTM3LjI5VDE2OC42LDI1Ni4wOVpNMzQwLjc1LDMwNXE3LjI1LTEyLjU4LDEzLjkyLTI1LjQ5aDBhNDQwLjQxLDQ0MC40MSwwLDAsMSwxNi4xMiw0Mi4zMkE0MzQuNDQsNDM0LjQ0LDAsMCwxLDMyNiwzMjkuNDhRMzMzLjYyLDMxNy4zOSwzNDAuNzUsMzA1Wm0xMy43Mi03My4wN3EtNi42NC0xMi42NS0xMy44MS0yNWgwcS03LTEyLjE4LTE0LjU5LTI0LjA2YzE1LjMxLDEuOTQsMzAsNC41Miw0My43Nyw3LjY3QTQzOS44OSw0MzkuODksMCwwLDEsMzU0LjQ3LDIzMS45M1pNMjU2LjIzLDEyNC40OGgwYTQzOS43NSw0MzkuNzUsMCwwLDEsMjguMjUsMzQuMThxLTI4LjM1LTEuMzUtNTYuNzQsMEMyMzcuMDcsMTQ2LjMyLDI0Ni42MiwxMzQuODcsMjU2LjIzLDEyNC40OFpNMTQ1LjY2LDY1Ljg2YzE2LjA2LTkuMzIsNTEuNTcsNCw4OSwzNy4yNywyLjM5LDIuMTMsNC44LDQuMzYsNy4yLDYuNjdBNDkxLjM3LDQ5MS4zNywwLDAsMCwyMDEsMTYwLjUxYTQ5OS4xMiw0OTkuMTIsMCwwLDAtNjQuMDYsMTBxLTEuODMtNy4zNi0zLjMtMTQuODJoMEMxMjQuNTksMTA5LjQ2LDEzMC41OCw3NC42MSwxNDUuNjYsNjUuODZaTTEyMi4yNSwzMTcuNzFxLTYtMS43MS0xMS44NS0zLjcxYy0yMy40LTgtNDIuNzMtMTguNDQtNTYtMjkuODFDNDIuNTIsMjc0LDM2LjUsMjYzLjgzLDM2LjUsMjU1LjU5YzAtMTcuNTEsMjYuMDYtMzkuODUsNjkuNTItNTVxOC4xOS0yLjg1LDE2LjUyLTUuMjFhNDkzLjU0LDQ5My41NCwwLDAsMCwyMy40LDYwLjc1QTUwMi40Niw1MDIuNDYsMCwwLDAsMTIyLjI1LDMxNy43MVptMTExLjEzLDkzLjY3Yy0xOC42MywxNi4zMi0zNy4yOSwyNy44OS01My43NCwzMy43MmgwYy0xNC43OCw1LjIzLTI2LjU1LDUuMzgtMzMuNjYsMS4yNy0xNS4xNC04Ljc1LTIxLjQ0LTQyLjU0LTEyLjg1LTg3Ljg2cTEuNTMtOCwzLjUtMTZhNDgwLjg1LDQ4MC44NSwwLDAsMCw2NC42OSw5LjM5LDUwMS4yLDUwMS4yLDAsMCwwLDQxLjIsNTFDMjM5LjU0LDQwNS44MywyMzYuNDksNDA4LjY1LDIzMy4zOCw0MTEuMzhabTIzLjQyLTIzLjIyYy05LjcyLTEwLjUxLTE5LjQyLTIyLjE0LTI4Ljg4LTM0LjY0cTEzLjc5LjU0LDI4LjA4LjU0YzkuNzgsMCwxOS40Ni0uMjEsMjktLjY0QTQzOS4zMyw0MzkuMzMsMCwwLDEsMjU2LjgsMzg4LjE2Wm0xMjQuNTIsMjguNTljLTIuODYsMTUuNDQtOC42MSwyNS43NC0xNS43MiwyOS44Ni0xNS4xMyw4Ljc4LTQ3LjQ4LTIuNjMtODIuMzYtMzIuNzItNC0zLjQ0LTgtNy4xMy0xMi4wNy0xMWE0ODQuNTQsNDg0LjU0LDAsMCwwLDQwLjIzLTUxLjIsNDc3Ljg0LDQ3Ny44NCwwLDAsMCw2NS0xMC4wNXExLjQ3LDUuOTQsMi42LDExLjY0aDBDMzgzLjgxLDM3Ny41OCwzODQuNSwzOTkuNTYsMzgxLjMyLDQxNi43NVptMTcuNC0xMDIuNjRoMGMtMi42Mi44Ny01LjMyLDEuNzEtOC4wNiwyLjUzYTQ4My4yNiw0ODMuMjYsMCwwLDAtMjQuMzEtNjAuOTQsNDgxLjUyLDQ4MS41MiwwLDAsMCwyMy4zNi02MC4wNmM0LjkxLDEuNDMsOS42OCwyLjkzLDE0LjI3LDQuNTIsNDQuNDIsMTUuMzIsNzEuNTIsMzgsNzEuNTIsNTUuNDNDNDc1LjUsMjc0LjE5LDQ0Ni4yMywyOTguMzMsMzk4LjcyLDMxNC4xMVoiLz4KDTxwYXRoIGQ9Ik0yNTYsMjk4LjU1YTQzLDQzLDAsMSwwLTQyLjg2LTQzQTQyLjkxLDQyLjkxLDAsMCwwLDI1NiwyOTguNTVaIi8+Cg08L2c+Cg08L3N2Zz4=',
@@ -487,11 +563,12 @@ exports[`react-website generator (uxProvider=None) > should update package.json
 "
 `;
 
-exports[`react-website generator (uxProvider=None) > should update package.json with required dependencies > test-app/src/main.tsx 1`] = `
+exports[`react-website generator (uxProvider=Shadcn) > should update package.json with required dependencies > test-app/src/main.tsx 1`] = `
 "import React from 'react';
 import { createRoot } from 'react-dom/client';
 import { RouterProvider, createRouter } from '@tanstack/react-router';
 import { routeTree } from './routeTree.gen';
+import './styles.css';
 
 // eslint-disable-next-line @typescript-eslint/no-empty-object-type
 export type RouterProviderContext = {};
@@ -522,7 +599,7 @@ root &&
 "
 `;
 
-exports[`react-website generator (uxProvider=None) > should update package.json with required dependencies > test-app/src/routeTree.gen.ts 1`] = `
+exports[`react-website generator (uxProvider=Shadcn) > should update package.json with required dependencies > test-app/src/routeTree.gen.ts 1`] = `
 "/* eslint-disable */
 
 // @ts-nocheck
@@ -585,7 +662,7 @@ export const routeTree = rootRouteImport
 "
 `;
 
-exports[`react-website generator (uxProvider=None) > should update package.json with required dependencies > test-app/src/routes/__root.tsx 1`] = `
+exports[`react-website generator (uxProvider=Shadcn) > should update package.json with required dependencies > test-app/src/routes/__root.tsx 1`] = `
 "import { createRootRouteWithContext } from '@tanstack/react-router';
 import AppLayout from '../components/AppLayout';
 import { RouterProviderContext } from '../main';
@@ -601,7 +678,7 @@ export const Route = createRootRouteWithContext<RouterProviderContext>()({
 "
 `;
 
-exports[`react-website generator (uxProvider=None) > should update package.json with required dependencies > test-app/src/routes/index.tsx 1`] = `
+exports[`react-website generator (uxProvider=Shadcn) > should update package.json with required dependencies > test-app/src/routes/index.tsx 1`] = `
 "import { createFileRoute } from '@tanstack/react-router';
 
 export const Route = createFileRoute('/')({
@@ -610,213 +687,20 @@ export const Route = createFileRoute('/')({
 
 function RouteComponent() {
   return (
-    <>
-      <h1>Welcome</h1>
-      <p>Welcome to your new React website!</p>
-    </>
+    <div className="text-center">
+      <header>
+        <h1>Welcome</h1>
+        <p>Welcome to your new React website!</p>
+      </header>
+    </div>
   );
 }
 "
 `;
 
-exports[`react-website generator (uxProvider=None) > should update package.json with required dependencies > test-app/src/styles.css 1`] = `
-"@import 'tailwindcss';
-
-:root {
-  color-scheme: light;
-  font-family:
-    system-ui,
-    -apple-system,
-    BlinkMacSystemFont,
-    'Segoe UI',
-    sans-serif;
-  background-color: #f8fafc;
-  color: #0f172a;
-}
-
-* {
-  box-sizing: border-box;
-}
-
-body {
-  margin: 0;
-}
-
-a {
-  color: inherit;
-  text-decoration: none;
-}
-
-.app-shell {
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-}
-
-.app-header {
-  display: flex;
-  align-items: center;
-  justify-content: flex-start;
-  padding: 1rem 0;
-  border-bottom: 1px solid #e2e8f0;
-  background: #ffffff;
-  position: sticky;
-  top: 0;
-  z-index: 1;
-}
-
-.app-header-inner {
-  display: flex;
-  align-items: center;
-  gap: 1.25rem;
-  width: min(1100px, 100%);
-  margin: 0 auto;
-  padding: 0 1rem;
-}
-
-.brand {
-  display: flex;
-  align-items: center;
-}
-
-.brand a {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.5rem;
-}
-
-.brand-logo {
-  height: 32px;
-  width: auto;
-}
-
-.brand-name {
-  font-weight: 700;
-  font-size: 1.1rem;
-  line-height: 1.1;
-  display: inline-flex;
-  align-items: center;
-}
-
-.user-greeting {
-  margin-left: auto;
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-}
-
-.signout-link {
-  border: none;
-  background: transparent;
-  color: #0ea5e9;
-  cursor: pointer;
-  font-weight: 600;
-  padding: 0.25rem 0.35rem;
-  border-radius: 0.35rem;
-}
-
-.signout-link:hover {
-  background: #e0f2fe;
-}
-
-.app-main {
-  width: min(1100px, 100%);
-  margin: 2rem auto;
-  padding: 0 1rem 3rem;
-}
-
-.card {
-  background: #ffffff;
-  border-radius: 0.75rem;
-  padding: 1.5rem;
-  box-shadow: 0 10px 40px rgba(15, 23, 42, 0.08);
-  border: 1px solid #e2e8f0;
-}
-
-.card h1 {
-  margin-top: 0;
-  margin-bottom: 0.5rem;
-  font-size: 1.5rem;
-}
-
-.card p {
-  margin: 0;
-  color: #334155;
-  line-height: 1.6;
-}
-
-.spinner {
-  display: inline-block;
-  padding: 0.75rem 1rem;
-  border: 1px solid #e2e8f0;
-  border-radius: 0.5rem;
-  background: #ffffff;
-  color: #0f172a;
-}
-
-.alert {
-  border-radius: 0.75rem;
-  padding: 1rem 1.25rem;
-  margin: 1rem 0;
-  border: 1px solid #e2e8f0;
-  background: #fff;
-  color: #0f172a;
-}
-
-.alert-error {
-  border-color: #fecdd3;
-  background: #fff1f2;
-  color: #881337;
-}
-
-.alert-header {
-  font-weight: 700;
-  margin-bottom: 0.35rem;
-}
-
-.alert-body {
-  margin: 0;
-}
-
-.app-nav {
-  display: flex;
-  align-items: center;
-  gap: 0.75rem;
-}
-
-.app-nav a {
-  display: inline-flex;
-  align-items: center;
-  padding: 0.35rem 0.65rem;
-  border-radius: 0.375rem;
-  line-height: 1.1;
-}
-
-.app-nav a.active {
-  background: #e2e8f0;
-}
-
-.breadcrumbs {
-  display: flex;
-  align-items: center;
-  gap: 0.35rem;
-  font-size: 0.95rem;
-  color: #475569;
-  margin: 0 0 1rem;
-}
-
-.breadcrumb-segment a {
-  color: inherit;
-}
-
-.breadcrumb-current {
-  font-weight: 600;
-  color: #0f172a;
-}
-
-.breadcrumb-separator {
-  color: #cbd5e1;
-}
+exports[`react-website generator (uxProvider=Shadcn) > should update package.json with required dependencies > test-app/src/styles.css 1`] = `
+"@import '../../packages/common/shadcn/src/styles/globals.css';
+@source './**/*.{ts,tsx}';
 "
 `;
 
@@ -1874,24 +1758,24 @@ exports[`react-website generator > Tanstack router integration > should generate
 "{
   "name": "@proj/source",
   "dependencies": {
-    "@cloudscape-design/board-components": "3.0.143",
-    "@cloudscape-design/components": "3.0.1181",
-    "@cloudscape-design/global-styles": "1.0.49",
-    "aws-cdk-lib": "2.235.1",
+    "@cloudscape-design/board-components": "3.0.145",
+    "@cloudscape-design/components": "3.0.1184",
+    "@cloudscape-design/global-styles": "1.0.50",
+    "aws-cdk-lib": "2.236.0",
     "constructs": "10.4.5",
-    "react": "19.2.3",
-    "react-dom": "19.2.3",
+    "react": "19.2.4",
+    "react-dom": "19.2.4",
     "tailwindcss": "4.1.18"
   },
   "devDependencies": {
     "@eslint/js": "^9.8.0",
-    "@nx/eslint": "22.4.1",
-    "@nx/eslint-plugin": "22.4.1",
-    "@nx/js": "22.4.1",
-    "@nx/react": "22.4.1",
-    "@nx/vite": "22.4.1",
-    "@nx/vitest": "22.4.1",
-    "@nx/web": "22.4.1",
+    "@nx/eslint": "22.4.4",
+    "@nx/eslint-plugin": "22.4.4",
+    "@nx/js": "22.4.4",
+    "@nx/react": "22.4.4",
+    "@nx/vite": "22.4.4",
+    "@nx/vitest": "22.4.4",
+    "@nx/web": "22.4.4",
     "@swc-node/register": "~1.9.1",
     "@swc/cli": "~0.6.0",
     "@swc/core": "~1.5.7",
@@ -3316,32 +3200,32 @@ exports[`react-website generator > Tanstack router integration > should generate
 "{
   "name": "@proj/source",
   "dependencies": {
-    "@cloudscape-design/board-components": "3.0.143",
-    "@cloudscape-design/components": "3.0.1181",
-    "@cloudscape-design/global-styles": "1.0.49",
-    "@tanstack/react-router": "1.154.12",
-    "aws-cdk-lib": "2.235.1",
+    "@cloudscape-design/board-components": "3.0.145",
+    "@cloudscape-design/components": "3.0.1184",
+    "@cloudscape-design/global-styles": "1.0.50",
+    "@tanstack/react-router": "1.157.16",
+    "aws-cdk-lib": "2.236.0",
     "constructs": "10.4.5",
-    "react": "19.2.3",
-    "react-dom": "19.2.3",
+    "react": "19.2.4",
+    "react-dom": "19.2.4",
     "tailwindcss": "4.1.18"
   },
   "devDependencies": {
     "@eslint/js": "^9.8.0",
-    "@nx/eslint": "22.4.1",
-    "@nx/eslint-plugin": "22.4.1",
-    "@nx/js": "22.4.1",
-    "@nx/react": "22.4.1",
-    "@nx/vite": "22.4.1",
-    "@nx/vitest": "22.4.1",
-    "@nx/web": "22.4.1",
+    "@nx/eslint": "22.4.4",
+    "@nx/eslint-plugin": "22.4.4",
+    "@nx/js": "22.4.4",
+    "@nx/react": "22.4.4",
+    "@nx/vite": "22.4.4",
+    "@nx/vitest": "22.4.4",
+    "@nx/web": "22.4.4",
     "@swc-node/register": "~1.9.1",
     "@swc/cli": "~0.6.0",
     "@swc/core": "~1.5.7",
     "@swc/helpers": "~0.5.11",
     "@tailwindcss/vite": "4.1.18",
-    "@tanstack/router-generator": "1.154.12",
-    "@tanstack/router-plugin": "1.154.12",
+    "@tanstack/router-generator": "1.157.16",
+    "@tanstack/router-plugin": "1.157.16",
     "@tanstack/router-utils": "1.154.7",
     "@tanstack/virtual-file-routes": "1.154.7",
     "@testing-library/dom": "10.4.0",
@@ -5403,14 +5287,14 @@ root &&
 
 exports[`react-website generator > should handle npm scope prefix correctly > scoped-dependencies 1`] = `
 {
-  "@cloudscape-design/board-components": "3.0.143",
-  "@cloudscape-design/components": "3.0.1181",
-  "@cloudscape-design/global-styles": "1.0.49",
-  "@tanstack/react-router": "1.154.12",
-  "aws-cdk-lib": "2.235.1",
+  "@cloudscape-design/board-components": "3.0.145",
+  "@cloudscape-design/components": "3.0.1184",
+  "@cloudscape-design/global-styles": "1.0.50",
+  "@tanstack/react-router": "1.157.16",
+  "aws-cdk-lib": "2.236.0",
   "constructs": "10.4.5",
-  "react": "19.2.3",
-  "react-dom": "19.2.3",
+  "react": "19.2.4",
+  "react-dom": "19.2.4",
   "tailwindcss": "4.1.18",
 }
 `;

package/src/ts/react-website/app/files/app/shadcn/src/app.tsx.template

@@ -0,0 +1,12 @@
+import AppLayout from './components/AppLayout';
+
+export const App = () => (
+  <AppLayout>
+    <div className="text-center">
+      <header>
+        <h1>Welcome</h1>
+        <p>Welcome to your new React website!</p>
+      </header>
+    </div>
+  </AppLayout>
+);