@wangs-ui/create-react-app 1.0.1

package/template/agents/AGENTS.md

@@ -0,0 +1,59 @@
+# AI Agent Instructions for Wangs UI
+
+This application is built with **Wangs UI** (`@wangs-ui/react-core`, `@wangs-ui/foundation`, `@wangs-ui/react-icons`, `@wangs-ui/react-presets`, `@wangs-ui/react-i18n`, `@wangs-ui/form`), Tailwind CSS v4, and Vite 8.
+
+---
+
+## 1. Core Principles & Strict Rules
+
+1. **Primitive Component Rule (Mandatory)**:
+   - Always use components from `@wangs-ui/react-core` (`Button`, `Card`, `Dialog`, `Modal`, `Form`, `Field`, `Input`, `NumberInput`, `Select`, `DataTable`, etc.) and universal typography primitives from `@wangs-ui/foundation/theme` (`Text`, `Code`, `Kbd`, `Link`, `Mark`, `Blockquote`, `List`).
+   - Do NOT write unstyled raw HTML controls (`<button>`, `<input>`, `<select>`, `<form>`, `<h1-h6>`, `<p>`).
+
+2. **Internationalization (`@wangs-ui/react-i18n`)**:
+   - All text visible to users MUST be wrapped in `t()` from `useI18n()`.
+   - Use natural English sentence keys (`t('Invoice Summary')`) and `{{variable}}` interpolation.
+   - Never hardcode raw string literals or concatenate strings in JSX.
+   - For formatting dates, times, currencies, or numbers, use `useLocaleFormatter()`:
+     ```tsx
+     import { useI18n, useLocaleFormatter } from '@wangs-ui/react-i18n';
+
+     const { t } = useI18n();
+     const { formatDate, formatCurrency } = useLocaleFormatter();
+     ```
+
+3. **Typography & Styling Tokens**:
+   - Use universal typography components from `@wangs-ui/foundation/theme` (`Text`, `Code`, `Kbd`, `Link`, `Mark`, `Blockquote`, `List`) with semantic variants (`display*`, `headline*`, `title*`, `body*`, `label*`) and color roles.
+   - Use predefined 4px spacing tokens (`gap-xs`, `gap-s`, `gap-md`, `gap-m`, `gap-l`, `gap-xl`, `gap-xxl` / `p-xs` to `p-xxl`) and color tokens (`bg-primary-500`, `text-secondary-900`, `shadow-level-1` to `shadow-level-5`).
+
+4. **MCP Component Inspection (Single Source of Truth)**:
+   - The `@wangs-ui/mcp` server is configured in this workspace.
+   - Always query the MCP server (`get-documentation`, `get-documentation-for-story`, `query_graph`) to inspect live component contracts, props, and story implementations before writing code.
+
+5. **Specialized System Patterns Over Generic React (Crucial)**:
+   - Never assume standard React patterns (e.g., raw `useState` for forms, native `<form onSubmit>`, raw `<a href>`) apply if the design system provides a specialized architecture.
+   - For Forms, you **MUST** use `useFormControl` from `@wangs-ui/form`, wrapped in `<Form>`, and input components wrapped in `<Field>`. Do not build "dummy" forms with raw `<form>` tags or standard React controlled inputs.
+   - Always use `graphify query` or read the relevant skill files (`.agents/skills/`) to understand the Wangs UI specialized way of implementing features before writing code.
+
+---
+
+## 2. Specialized Skills Reference
+
+When performing specific tasks, consult the modular skill files in `.agents/skills/`:
+
+- **`wangs-ui-components`**: Core component fundamentals, primitive substitution rule, subpath modular imports, and typography tokens.
+- **`data-table`**: Real-world data grids, `TableColumn<T>[]`, `useDataTable`, `useDataTableFetch`, pagination, sorting, and exports.
+- **`create-form`**: Form implementation, schema validation, server error mapping (`formControl.setError`), and multipart uploads.
+- **`dialog-modal`**: Overlay selection (`Dialog` vs `Modal` vs `DialogForm`), confirmation workflows, and mutation safety.
+- **`i18n-usage`**: Rules for JIT translation, natural English keys, dynamic variables `{{var}}`, ICU plurals, and locale formatters.
+- **`layout-navigation`**: Application layout structure with `AppLayout`, `Sidebar`, `Breadcrumb`, and `Tabs`.
+- **`react19-compiler-typescript`**: React 19 compiler conventions, automatic memoization, and pure rendering rules.
+- **`typescript-strict-typing`**: Strict type discipline (no `any`, `unknown` narrowing, discriminated unions).
+
+---
+
+## 3. Code Quality & Toolchain
+
+- **Linter**: `oxlint` (run `pnpm lint`)
+- **Formatter**: `oxfmt` (run `pnpm format`)
+- **Type Checker**: TypeScript with `tsc -b` (run `pnpm build`)

package/template/agents/agents.mcp.json

@@ -0,0 +1,8 @@
+{
+  "mcpServers": {
+    "wangs-ui": {
+      "command": "npx",
+      "args": ["-y", "@wangs-ui/mcp@latest"]
+    }
+  }
+}

package/template/agents/kilo.mcp.json

@@ -0,0 +1,8 @@
+{
+  "mcpServers": {
+    "wangs-ui": {
+      "command": "npx",
+      "args": ["-y", "@wangs-ui/mcp@latest"]
+    }
+  }
+}

package/template/agents/mcp.json

@@ -0,0 +1,8 @@
+{
+  "mcpServers": {
+    "wangs-ui": {
+      "command": "npx",
+      "args": ["-y", "@wangs-ui/mcp@latest"]
+    }
+  }
+}

package/template/agents/opencode.json

@@ -0,0 +1,9 @@
+{
+  "$schema": "https://opencode.ai/config.json",
+  "mcp": {
+    "wangs-ui": {
+      "type": "local",
+      "command": ["npx", "-y", "@wangs-ui/mcp@latest"]
+    }
+  }
+}

package/template/index.html

@@ -0,0 +1,20 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/png" href="/wangs_ui_logo.png" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@400;500;600;700;800&display=swap"
+      rel="stylesheet"
+    />
+    <title>Wangs UI - Tactile & Grounded React Components</title>
+  </head>
+
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

package/template/oxfmt.config.ts

@@ -0,0 +1,3 @@
+import { oxfmtConfig } from '@fewangsit/oxlint-config-react';
+
+export default oxfmtConfig;

package/template/oxlint.config.ts

@@ -0,0 +1,3 @@
+import { oxlintConfig } from '@fewangsit/oxlint-config-react';
+
+export default oxlintConfig;

package/template/package.json

@@ -0,0 +1,48 @@
+{
+  "name": "wangs-ui-react-app",
+  "version": "0.0.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "analyze": "ANALYZE=true vite build",
+    "preview": "vite preview",
+    "lint": "oxlint -c oxlint.config.ts",
+    "lint:fix": "oxlint -c oxlint.config.ts --fix",
+    "format": "oxfmt --write",
+    "format:check": "oxfmt --check"
+  },
+  "dependencies": {
+    "@wangs-ui/animations": "workspace:*",
+    "@wangs-ui/form": "^1.0.16",
+    "@wangs-ui/foundation": "workspace:*",
+    "@wangs-ui/react-core": "workspace:*",
+    "@wangs-ui/react-i18n": "workspace:*",
+    "@wangs-ui/react-icons": "workspace:*",
+    "@wangs-ui/react-presets": "workspace:*",
+    "clsx": "^2.1.1",
+    "react": "19.2.7",
+    "react-dom": "19.2.7",
+    "react-router-dom": "7.17.0",
+    "tailwind-merge": "^3.6.0"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.29.7",
+    "@fewangsit/oxlint-config-react": "^1.0.13",
+    "@rolldown/plugin-babel": "^0.2.3",
+    "@tailwindcss/vite": "^4.3.3",
+    "@types/babel__core": "^7.20.5",
+    "@types/node": "^25.9.5",
+    "@types/react": "19.2.17",
+    "@types/react-dom": "19.2.4",
+    "@vitejs/plugin-react": "^6.0.5",
+    "babel-plugin-react-compiler": "^1.0.0",
+    "oxfmt": "^0.60.0",
+    "oxlint": "^1.78.0",
+    "rollup-plugin-visualizer": "^7.1.1",
+    "tailwindcss": "^4.3.3",
+    "typescript": "^6.0.3",
+    "vite": "^8.2.1"
+  }
+}

package/template/src/App.tsx

@@ -0,0 +1,26 @@
+import React, { Suspense } from 'react';
+import { BrowserRouter, Route, Routes } from 'react-router-dom';
+
+const Landing = React.lazy(() => import('./pages/Landing'));
+const Login = React.lazy(() => import('./pages/Login'));
+const Register = React.lazy(() => import('./pages/Register'));
+
+export default function App(): React.JSX.Element {
+  return (
+    <BrowserRouter>
+      <Suspense
+        fallback={
+          <div className="bg-background flex min-h-screen items-center justify-center">
+            <div className="border-primary size-8 animate-spin rounded-full border-4 border-t-transparent"></div>
+          </div>
+        }
+      >
+        <Routes>
+          <Route path="/" element={<Landing />} />
+          <Route path="/login" element={<Login />} />
+          <Route path="/register" element={<Register />} />
+        </Routes>
+      </Suspense>
+    </BrowserRouter>
+  );
+}

package/template/src/components/AuthLayout.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+
+import Footer from './Footer';
+
+interface AuthLayoutProps {
+  children: React.ReactNode;
+}
+
+export default function AuthLayout({ children }: AuthLayoutProps): React.JSX.Element {
+  return (
+    <div className="bg-background text-on-surface font-body-md relative flex min-h-screen flex-col overflow-hidden">
+      {/* Decorative subtle background elements */}
+      <div className="pointer-events-none absolute top-0 left-0 h-full w-full opacity-[0.03]">
+        <svg height="100%" width="100%" xmlns="http://www.w3.org/2000/svg">
+          <defs>
+            <pattern height="40" id="grid" patternUnits="userSpaceOnUse" width="40">
+              <path d="M 40 0 L 0 0 0 40" fill="none" stroke="currentColor" strokeWidth="1"></path>
+            </pattern>
+          </defs>
+          <rect fill="url(#grid)" height="100%" width="100%"></rect>
+        </svg>
+      </div>
+
+      <main className="relative z-10 flex grow items-center justify-center p-6 md:p-10">
+        <div className="w-full max-w-md">{children}</div>
+      </main>
+
+      <Footer />
+    </div>
+  );
+}

package/template/src/components/Footer.tsx

@@ -0,0 +1,41 @@
+import { Link, Text } from '@wangs-ui/foundation/theme';
+import React from 'react';
+
+export default function Footer(): React.JSX.Element {
+  return (
+    <footer className="border-outline-variant bg-surface-container-lowest border-t px-6 py-12">
+      <div className="mx-auto flex max-w-7xl flex-col items-center justify-between gap-6 md:flex-row">
+        <div className="flex items-center gap-3">
+          <img
+            src="/wangs_ui_logo.png"
+            alt="Wangs UI Logo"
+            className="h-6 w-6 opacity-60 grayscale"
+          />
+          <Text variant="bodyMedium" color="secondary">
+            © {new Date().getFullYear()} Wangs UI. All rights reserved.
+          </Text>
+        </div>
+        <div className="flex flex-wrap justify-center gap-6">
+          <Link
+            href="/"
+            className="text-on-surface-variant hover:text-primary text-body-small transition-colors"
+          >
+            Twitter
+          </Link>
+          <Link
+            href="/"
+            className="text-on-surface-variant hover:text-primary text-body-small transition-colors"
+          >
+            GitHub
+          </Link>
+          <Link
+            href="/"
+            className="text-on-surface-variant hover:text-primary text-body-small transition-colors"
+          >
+            Discord
+          </Link>
+        </div>
+      </div>
+    </footer>
+  );
+}

package/template/src/index.css

@@ -0,0 +1,5 @@
+@import '@wangs-ui/foundation/theme/theme.css';
+@import '@wangs-ui/react-icons/style.css';
+
+@source "../node_modules/@wangs-ui/react-presets";
+@source "../node_modules/@wangs-ui/foundation";

package/template/src/main.tsx

@@ -0,0 +1,36 @@
+import { WangsUiProvider } from '@wangs-ui/react-core/api';
+import { WangsUiI18nProvider } from '@wangs-ui/react-i18n';
+import gold from '@wangs-ui/react-presets/gold';
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+
+import App from './App';
+
+import './index.css';
+
+ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
+  <React.StrictMode>
+    <WangsUiI18nProvider defaultLocale="en">
+      <WangsUiProvider
+        configOptions={{
+          preset: gold,
+          defaultProps: {
+            divider: {
+              pt: {
+                label: {
+                  className: 'tracking-wider uppercase',
+                },
+              },
+            },
+          },
+        }}
+        theme={{
+          palette: 'gold',
+          fontFamily: { sans: '"Hanken Grotesk", sans-serif' },
+        }}
+      >
+        <App />
+      </WangsUiProvider>
+    </WangsUiI18nProvider>
+  </React.StrictMode>,
+);

package/template/src/pages/Landing.tsx

@@ -0,0 +1,321 @@
+import { Text, Link as ThemeLink, Ul, Li, useTheme, cn } from '@wangs-ui/foundation/theme';
+import Badge from '@wangs-ui/react-core/primitive/badge';
+import Button from '@wangs-ui/react-core/primitive/button';
+import Card from '@wangs-ui/react-core/primitive/card';
+import CopyButton from '@wangs-ui/react-core/primitive/copybutton';
+import Label from '@wangs-ui/react-core/primitive/label';
+import Switch from '@wangs-ui/react-core/primitive/switch';
+import {
+  ArrowRightLine,
+  CheckLine,
+  CodeLine,
+  GlobalLine,
+  PaletteLine,
+  MoonFill,
+  SunLine,
+} from '@wangs-ui/react-icons';
+import React, { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+
+import Footer from '../components/Footer';
+
+function DarkModeSwitch(props: Partial<React.ComponentProps<typeof Switch>>): React.ReactElement {
+  const { mode, setMode } = useTheme();
+  return (
+    <Switch
+      {...props}
+      checked={mode === 'dark'}
+      onChange={(checked) => setMode(checked ? 'dark' : 'light')}
+      aria-label="Toggle dark mode"
+      pt={{
+        track: () => ({
+          className: [
+            'flex items-center w-16 border-transparent!',
+            mode === 'dark' ? 'bg-secondary-800!' : 'bg-general-50!',
+          ],
+        }),
+        thumb: () => ({
+          className: [
+            'flex items-center justify-center',
+            mode === 'dark' ? 'bg-secondary-900!' : 'bg-white!',
+          ],
+        }),
+      }}
+      size="lg"
+      thumbContent={() => {
+        const Icon = mode === 'dark' ? MoonFill : SunLine;
+        return (
+          <Icon className={cn('size-3.5', mode === 'dark' ? 'text-white' : 'text-general-500')} />
+        );
+      }}
+      trackContent={() => (
+        <span
+          className={`text-label-small flex w-full items-center p-1 font-medium transition-all ${
+            mode === 'dark' ? 'justify-start text-white' : 'text-general-500 justify-end'
+          }`}
+        >
+          {mode === 'dark' ? 'Dark' : 'Light'}
+        </span>
+      )}
+    />
+  );
+}
+
+export default function Landing(): React.ReactElement {
+  const { mode, setMode } = useTheme();
+  const [analyticsEnabled, setAnalyticsEnabled] = useState(true);
+  const navigate = useNavigate();
+
+  return (
+    <div className="bg-background text-on-background selection:bg-primary-200 selection:text-primary-900 min-h-screen antialiased">
+      {/* Header */}
+      <header className="border-outline-variant bg-surface/80 sticky top-0 z-50 flex items-center justify-between border-b px-6 py-4 backdrop-blur-md">
+        <div className="flex items-center gap-3">
+          <img src="/wangs_ui_logo.png" alt="Wangs UI Logo" className="h-8 w-8 rounded-md" />
+          <Text as="span" variant="titleMedium" weight="bold" color="on-surface">
+            Wangs UI
+          </Text>
+        </div>
+        <nav className="hidden items-center gap-6 md:flex">
+          <ThemeLink
+            href="/"
+            className="text-on-surface-variant hover:text-primary text-body-medium font-medium transition-colors"
+          >
+            Docs
+          </ThemeLink>
+          <ThemeLink
+            href="/"
+            className="text-on-surface-variant hover:text-primary text-body-medium font-medium transition-colors"
+          >
+            Components
+          </ThemeLink>
+          <ThemeLink
+            href="/"
+            className="text-on-surface-variant hover:text-primary text-body-medium font-medium transition-colors"
+          >
+            Design System
+          </ThemeLink>
+          <ThemeLink
+            href="/"
+            className="text-on-surface-variant hover:text-primary text-body-medium font-medium transition-colors"
+          >
+            GitHub
+          </ThemeLink>
+        </nav>
+        <div className="flex items-center gap-3">
+          <DarkModeSwitch />
+          <Button
+            variant="text"
+            label="Log in"
+            severity="secondary"
+            size="sm"
+            onClick={() => navigate('/login')}
+          />
+          <Button
+            variant="filled"
+            label="Get Started"
+            severity="primary"
+            size="sm"
+            onClick={() => navigate('/register')}
+          />
+        </div>
+      </header>
+
+      <main>
+        {/* Hero Section */}
+        <section className="relative flex flex-col items-center justify-center overflow-hidden px-6 py-32 text-center md:py-48">
+          <div className="from-primary-100/50 via-background to-background absolute inset-0 -z-10 bg-[radial-gradient(ellipse_at_top,var(--tw-gradient-stops))]" />
+          <div className="animate-fadein max-w-3xl space-y-8">
+            <Label severity="primary" variant="light" size="sm">
+              <Badge variant="dot" size="xs" className="animate-pulse" />
+              v1.0 is now live
+            </Label>
+
+            <Text
+              as="h1"
+              variant="displayLarge"
+              weight="bold"
+              color="onSurface"
+              className="font-sans"
+            >
+              Tactile. Grounded. <span className="text-primary-600">Accessible.</span>
+            </Text>
+
+            <Text
+              as="p"
+              variant="titleLarge"
+              color="onSurfaceVariant"
+              className="mx-auto max-w-2xl"
+            >
+              A premium React UI library designed for developers who value speed, accessibility, and
+              a unique earthy aesthetic. Build distinct digital experiences.
+            </Text>
+
+            <div className="flex flex-col items-center justify-center gap-4 pt-4 sm:flex-row">
+              <Button
+                variant="filled"
+                severity="primary"
+                size="lg"
+                label="Explore Components"
+                icon={<ArrowRightLine />}
+              />
+              <Button
+                variant="outline"
+                severity="secondary"
+                size="lg"
+                label="Read Documentation"
+                icon={<CodeLine />}
+              />
+            </div>
+
+            <div className="border-outline-variant bg-surface-container-low shadow-level-1 mx-auto mt-12 flex max-w-md items-center justify-center rounded-xl border p-4 font-mono text-sm">
+              <Text variant="bodyMedium" color="onSurfaceVariant" className="mr-4 select-none">
+                $
+              </Text>
+              <Text variant="bodyMedium" color="onSurface">
+                pnpm create @wangs-ui/react-app my-app
+              </Text>
+              <CopyButton className="ml-auto" text="pnpm create @wangs-ui/react-app my-app" />
+            </div>
+          </div>
+        </section>
+
+        {/* Features Grid */}
+        <section className="bg-surface-container-lowest border-outline-variant border-y px-6 py-24">
+          <div className="mx-auto max-w-7xl">
+            <div className="mb-16 text-center">
+              <Text as="h2" variant="headlineMedium" weight="bold" color="on-surface">
+                Designed for the modern web
+              </Text>
+              <Text variant="bodyLarge" color="secondary" className="mt-4">
+                Everything you need to build stunning, production-ready applications.
+              </Text>
+            </div>
+
+            <div className="grid grid-cols-1 gap-8 md:grid-cols-3">
+              {[
+                {
+                  icon: <GlobalLine className="h-6 w-6" />,
+                  title: 'Accessible by Default',
+                  desc: 'Built with ARIA support, focus management, and keyboard navigation at its core. 100/100 Lighthouse scores guaranteed.',
+                },
+                {
+                  icon: <PaletteLine className="h-6 w-6" />,
+                  title: 'Themable Design System',
+                  desc: 'Powered by a robust token system. Easily adapt roundness, typography, and organic color palettes like our signature Gold.',
+                },
+                {
+                  icon: <CodeLine className="h-6 w-6" />,
+                  title: 'Developer Experience',
+                  desc: 'Strictly typed, thoroughly documented, and lightweight with zero bloat. Seamlessly integrated with Tailwind CSS v4.',
+                },
+              ].map((feature, i) => (
+                <div
+                  key={i}
+                  className="border-outline-variant bg-surface shadow-level-1 hover:border-primary-300 flex flex-col gap-4 rounded-2xl border p-8 transition-transform hover:-translate-y-1"
+                >
+                  <div className="bg-primary-100 text-primary-700 flex h-12 w-12 items-center justify-center rounded-xl">
+                    {feature.icon}
+                  </div>
+                  <Text variant="titleLarge" weight="bold" color="on-surface">
+                    {feature.title}
+                  </Text>
+                  <Text variant="bodyMedium" color="secondary" className="leading-relaxed">
+                    {feature.desc}
+                  </Text>
+                </div>
+              ))}
+            </div>
+          </div>
+        </section>
+
+        {/* Interactive Showcase */}
+        <section className="px-6 py-24">
+          <div className="mx-auto max-w-5xl">
+            <div className="grid grid-cols-1 items-center gap-16 lg:grid-cols-2">
+              <div className="space-y-6">
+                <Text as="h2" variant="headlineMedium" weight="bold" color="on-surface">
+                  Premium aesthetics out of the box
+                </Text>
+                <Text variant="bodyLarge" color="secondary" className="leading-relaxed">
+                  Notice the tactile feel, the carefully calibrated spacing, and the warm, grounded
+                  colors. Wangs UI breaks away from cold, generic material trends to give your
+                  product a distinct soul.
+                </Text>
+                <Ul spacing="tight" className="pt-4">
+                  {[
+                    'Hanken Grotesk typography',
+                    '4px unified roundness tokens',
+                    'Earthy & organic gold palette',
+                  ].map((item, i) => (
+                    <Li
+                      key={i}
+                      icon={
+                        <div className="bg-success-100 text-success-700 flex h-6 w-6 items-center justify-center rounded-full">
+                          <CheckLine className="h-4 w-4" />
+                        </div>
+                      }
+                    >
+                      <Text variant="bodyMedium" weight="medium" color="on-surface">
+                        {item}
+                      </Text>
+                    </Li>
+                  ))}
+                </Ul>
+              </div>
+
+              <Card className="shadow-level-3 border-outline before:from-primary-300 before:to-primary-600 bg-surface relative mx-auto flex w-full max-w-md flex-col gap-6 p-8 before:absolute before:-inset-0.5 before:-z-10 before:rounded-3xl before:bg-linear-to-tr before:opacity-20 before:blur-xl before:transition-all before:duration-500 hover:before:opacity-40 hover:before:blur-2xl">
+                <div className="flex items-center justify-between">
+                  <div className="flex items-center gap-4">
+                    <div className="bg-primary-100 text-primary-700 flex h-12 w-12 items-center justify-center rounded-full text-lg font-bold">
+                      WU
+                    </div>
+                    <div>
+                      <Text variant="titleMedium" weight="bold" color="on-surface">
+                        Organization Settings
+                      </Text>
+                      <Text variant="labelSmall" color="secondary">
+                        Manage your workspace preferences
+                      </Text>
+                    </div>
+                  </div>
+                </div>
+
+                <div className="border-outline-variant space-y-4 border-t pt-4">
+                  <Switch
+                    checked={analyticsEnabled}
+                    onChange={setAnalyticsEnabled}
+                    aria-label="Enable Analytics"
+                    label="Enable Analytics"
+                    labelPosition="before"
+                    className="text-label-small w-full justify-between"
+                  />
+                  <Switch
+                    checked={mode === 'dark'}
+                    onChange={(checked) => setMode(checked ? 'dark' : 'light')}
+                    aria-label="Toggle dark mode"
+                    label="Dark Mode"
+                    labelPosition="before"
+                    className="text-label-small w-full justify-between"
+                  />
+                </div>
+
+                <div className="border-outline-variant flex gap-3 border-t pt-6">
+                  <Button
+                    className="flex-1"
+                    variant="filled"
+                    severity="primary"
+                    label="Save Changes"
+                  />
+                  <Button variant="outline" severity="secondary" label="Cancel" />
+                </div>
+              </Card>
+            </div>
+          </div>
+        </section>
+      </main>
+
+      <Footer />
+    </div>
+  );
+}