diff --git a/packages/generators/src/generators/component/__snapshots__/component-generator.spec.ts.snap b/packages/generators/src/generators/component/__snapshots__/component-generator.spec.ts.snap
index 29ac563..23533e1 100644
--- a/packages/generators/src/generators/component/__snapshots__/component-generator.spec.ts.snap
+++ b/packages/generators/src/generators/component/__snapshots__/component-generator.spec.ts.snap
@@ -790,6 +790,93 @@ exports[`component generator should create files for header 1`] = `
 }
 `;
 
+exports[`component generator should create files for layout 1`] = `
+{
+  ".prettierrc": {
+    "content": [
+      "{ "singleQuote": true }",
+    ],
+    "isBinary": false,
+    "path": "./.prettierrc",
+  },
+  "nx.json": {
+    "content": [
+      "{",
+      ""affected": { "defaultBase": "main" },",
+      ""targetDefaults": {",
+      ""build": { "cache": true },",
+      ""lint": { "cache": true },",
+      ""e2e": { "cache": true }",
+      "}",
+      "}",
+    ],
+    "isBinary": false,
+    "path": "./nx.json",
+  },
+  "package.json": {
+    "content": [
+      "{",
+      ""name": "@proj/source",",
+      ""dependencies": {},",
+      ""devDependencies": {}",
+      "}",
+    ],
+    "isBinary": false,
+    "path": "./package.json",
+  },
+  "test": {
+    "children": {
+      "index.ts": {
+        "content": [
+          "export * from './ui-layout';",
+        ],
+        "isBinary": false,
+        "path": "./test/index.ts",
+      },
+      "ui-layout.tsx": {
+        "content": [
+          "import { AppShell, AppShellProps, Loader, rem } from '@mantine/core';",
+          "import { ReactNode, Suspense } from 'react';",
+          "export function UiLayout({",
+          "children,",
+          "header,",
+          "headerHeight = rem(56),",
+          "...props",
+          "}: Omit<AppShellProps, 'header'> & {",
+          "children: ReactNode;",
+          "header: ReactNode;",
+          "headerHeight?: string;",
+          "}) {",
+          "return (",
+          "<AppShell header={{ height: headerHeight }} padding="md" {...props}>",
+          "<AppShell.Header>{header}</AppShell.Header>",
+          "<AppShell.Main>",
+          "<Suspense fallback={<Loader />}>{children}</Suspense>",
+          "</AppShell.Main>",
+          "</AppShell>",
+          ");",
+          "}",
+        ],
+        "isBinary": false,
+        "path": "./test/ui-layout.tsx",
+      },
+    },
+    "path": "./test",
+  },
+  "tsconfig.base.json": {
+    "content": [
+      "{",
+      ""compilerOptions": {",
+      ""paths": {}",
+      "}",
+      "}",
+    ],
+    "isBinary": false,
+    "path": "./tsconfig.base.json",
+  },
+}
+`;
+
 exports[`component generator should create files for logo 1`] = `
 {
   ".prettierrc": {
@@ -1641,6 +1728,104 @@ exports[`component generator should create files for theme 1`] = `
 }
 `;
 
+exports[`component generator should create files for theme-switch 1`] = `
+{
+  ".prettierrc": {
+    "content": [
+      "{ "singleQuote": true }",
+    ],
+    "isBinary": false,
+    "path": "./.prettierrc",
+  },
+  "nx.json": {
+    "content": [
+      "{",
+      ""affected": { "defaultBase": "main" },",
+      ""targetDefaults": {",
+      ""build": { "cache": true },",
+      ""lint": { "cache": true },",
+      ""e2e": { "cache": true }",
+      "}",
+      "}",
+    ],
+    "isBinary": false,
+    "path": "./nx.json",
+  },
+  "package.json": {
+    "content": [
+      "{",
+      ""name": "@proj/source",",
+      ""dependencies": {},",
+      ""devDependencies": {}",
+      "}",
+    ],
+    "isBinary": false,
+    "path": "./package.json",
+  },
+  "test": {
+    "children": {
+      "index.ts": {
+        "content": [
+          "export * from './ui-theme-switch';",
+        ],
+        "isBinary": false,
+        "path": "./test/index.ts",
+      },
+      "ui-theme-switch.tsx": {
+        "content": [
+          "import { rem, Switch, SwitchProps, useMantineTheme } from '@mantine/core';",
+          "import { IconMoonStars, IconSun } from '@tabler/icons-react';",
+          "import { useUiColorScheme } from '../ui-theme';",
+          "export function UiThemeSwitch(props: SwitchProps) {",
+          "const theme = useMantineTheme();",
+          "const sunIcon = (",
+          "<IconSun",
+          "style={{ width: rem(16), height: rem(16) }}",
+          "stroke={2.5}",
+          "color={theme.colors.yellow[4]}",
+          "/>",
+          ");",
+          "const moonIcon = (",
+          "<IconMoonStars",
+          "style={{ width: rem(16), height: rem(16) }}",
+          "stroke={2.5}",
+          "color={theme.colors.brand[6]}",
+          "/>",
+          ");",
+          "const { toggleColorScheme, colorScheme } = useUiColorScheme();",
+          "return (",
+          "<Switch",
+          "size="lg"",
+          "color={'dark.6'}",
+          "onLabel={sunIcon}",
+          "offLabel={moonIcon}",
+          "onChange={() => toggleColorScheme()}",
+          "checked={colorScheme === 'dark'}",
+          "{...props}",
+          "/>",
+          ");",
+          "}",
+        ],
+        "isBinary": false,
+        "path": "./test/ui-theme-switch.tsx",
+      },
+    },
+    "path": "./test",
+  },
+  "tsconfig.base.json": {
+    "content": [
+      "{",
+      ""compilerOptions": {",
+      ""paths": {}",
+      "}",
+      "}",
+    ],
+    "isBinary": false,
+    "path": "./tsconfig.base.json",
+  },
+}
+`;
+
 exports[`component generator should create files for time 1`] = `
 {
   ".prettierrc": {
diff --git a/packages/generators/src/generators/components/__snapshots__/components-generator.spec.ts.snap b/packages/generators/src/generators/components/__snapshots__/components-generator.spec.ts.snap
index 25036e6..649739c 100644
--- a/packages/generators/src/generators/components/__snapshots__/components-generator.spec.ts.snap
+++ b/packages/generators/src/generators/components/__snapshots__/components-generator.spec.ts.snap
@@ -45,12 +45,14 @@ exports[`components generator should run successfully 1`] = `
           "export * from './ui-debug';",
           "export * from './ui-group';",
           "export * from './ui-header';",
+          "export * from './ui-layout';",
           "export * from './ui-logo';",
           "export * from './ui-menu';",
           "export * from './ui-search-input';",
           "export * from './ui-stack';",
           "export * from './ui-tab-routes';",
           "export * from './ui-theme';",
+          "export * from './ui-theme-switch';",
           "export * from './ui-time';",
           "export * from './ui-toast';",
         ],
@@ -511,6 +513,45 @@ exports[`components generator should run successfully 1`] = `
         },
         "path": "./test/ui-header",
       },
+      "ui-layout": {
+        "children": {
+          "index.ts": {
+            "content": [
+              "export * from './ui-layout';",
+            ],
+            "isBinary": false,
+            "path": "./test/ui-layout/index.ts",
+          },
+          "ui-layout.tsx": {
+            "content": [
+              "import { AppShell, AppShellProps, Loader, rem } from '@mantine/core';",
+              "import { ReactNode, Suspense } from 'react';",
+              "export function UiLayout({",
+              "children,",
+              "header,",
+              "headerHeight = rem(56),",
+              "...props",
+              "}: Omit<AppShellProps, 'header'> & {",
+              "children: ReactNode;",
+              "header: ReactNode;",
+              "headerHeight?: string;",
+              "}) {",
+              "return (",
+              "<AppShell header={{ height: headerHeight }} padding="md" {...props}>",
+              "<AppShell.Header>{header}</AppShell.Header>",
+              "<AppShell.Main>",
+              "<Suspense fallback={<Loader />}>{children}</Suspense>",
+              "</AppShell.Main>",
+              "</AppShell>",
+              ");",
+              "}",
+            ],
+            "isBinary": false,
+            "path": "./test/ui-layout/ui-layout.tsx",
+          },
+        },
+        "path": "./test/ui-layout",
+      },
       "ui-logo": {
         "children": {
           "index.ts": {
@@ -1074,6 +1115,56 @@ exports[`components generator should run successfully 1`] = `
         },
         "path": "./test/ui-theme",
       },
+      "ui-theme-switch": {
+        "children": {
+          "index.ts": {
+            "content": [
+              "export * from './ui-theme-switch';",
+            ],
+            "isBinary": false,
+            "path": "./test/ui-theme-switch/index.ts",
+          },
+          "ui-theme-switch.tsx": {
+            "content": [
+              "import { rem, Switch, SwitchProps, useMantineTheme } from '@mantine/core';",
+              "import { IconMoonStars, IconSun } from '@tabler/icons-react';",
+              "import { useUiColorScheme } from '../ui-theme';",
+              "export function UiThemeSwitch(props: SwitchProps) {",
+              "const theme = useMantineTheme();",
+              "const sunIcon = (",
+              "<IconSun",
+              "style={{ width: rem(16), height: rem(16) }}",
+              "stroke={2.5}",
+              "color={theme.colors.yellow[4]}",
+              "/>",
+              ");",
+              "const moonIcon = (",
+              "<IconMoonStars",
+              "style={{ width: rem(16), height: rem(16) }}",
+              "stroke={2.5}",
+              "color={theme.colors.brand[6]}",
+              "/>",
+              ");",
+              "const { toggleColorScheme, colorScheme } = useUiColorScheme();",
+              "return (",
+              "<Switch",
+              "size="lg"",
+              "color={'dark.6'}",
+              "onLabel={sunIcon}",
+              "offLabel={moonIcon}",
+              "onChange={() => toggleColorScheme()}",
+              "checked={colorScheme === 'dark'}",
+              "{...props}",
+              "/>",
+              ");",
+              "}",
+            ],
+            "isBinary": false,
+            "path": "./test/ui-theme-switch/ui-theme-switch.tsx",
+          },
+        },
+        "path": "./test/ui-theme-switch",
+      },
       "ui-time": {
         "children": {
           "index.ts": {
diff --git a/packages/generators/src/generators/feature/__snapshots__/feature-generator.spec.ts.snap b/packages/generators/src/generators/feature/__snapshots__/feature-generator.spec.ts.snap
index 0cc2792..e2f5910 100644
--- a/packages/generators/src/generators/feature/__snapshots__/feature-generator.spec.ts.snap
+++ b/packages/generators/src/generators/feature/__snapshots__/feature-generator.spec.ts.snap
@@ -40,8 +40,8 @@ exports[`feature generator should create files for demo 1`] = `
         "content": [
           "import { SimpleGrid } from '@mantine/core';",
           "import {",
-          "UiCard,",
           "UiAlert,",
+          "UiCard,",
           "UiError,",
           "UiInfo,",
           "UiSuccess,",
@@ -70,6 +70,7 @@ exports[`feature generator should create files for demo 1`] = `
           "export function DemoFeatureCard() {",
           "return (",
           "<UiStack>",
+          "<UiCard title="Default Card">CARD CONTENT</UiCard>",
           "<UiCard withBorder title="Card" shadow="lg">",
           "CARD CONTENT",
           "</UiCard>",
@@ -150,22 +151,224 @@ exports[`feature generator should create files for demo 1`] = `
         "isBinary": false,
         "path": "./test/demo-feature-group.tsx",
       },
+      "demo-feature-header.tsx": {
+        "content": [
+          "import { ActionIcon, Avatar, Button, Group, rem, Text } from '@mantine/core';",
+          "import { useDisclosure } from '@mantine/hooks';",
+          "import {",
+          "UiCard,",
+          "UiHeader,",
+          "UiMenu,",
+          "UiSearchInput,",
+          "UiStack,",
+          "} from '@pubkey-ui/core';",
+          "import {",
+          "IconDoorExit,",
+          "IconLetterP,",
+          "IconMessageCircle,",
+          "IconPhoto,",
+          "IconSearch,",
+          "IconSettings,",
+          "IconUser,",
+          "IconUserCog,",
+          "} from '@tabler/icons-react';",
+          "import { useState } from 'react';",
+          "import { Route, Routes } from 'react-router-dom';",
+          "export function DemoFeatureHeader() {",
+          "const [opened, { toggle }] = useDisclosure(false);",
+          "const [signedIn, setSignedIn] = useState(false);",
+          "return (",
+          "<UiCard title="Header">",
+          "<UiStack gap="xl">",
+          "<UiHeader",
+          "base="/demo/header"",
+          "opened={opened}",
+          "toggle={toggle}",
+          "links={[",
+          "{ link: '/demo/header/about', label: 'Features' },",
+          "{ link: '/demo/header/pricing', label: 'Pricing' },",
+          "{ link: '/demo/header/learn', label: 'Learn' },",
+          "]}",
+          "profile={<UiSearchInput text={{ size: 'sm' }} />}",
+          "/>",
+          "<UiHeader",
+          "profile={",
+          "<ActionIcon radius="xl" size="lg" variant="light">",
+          "<IconSearch",
+          "style={{ width: rem(16), height: rem(16) }}",
+          "stroke={1.5}",
+          "/>",
+          "</ActionIcon>",
+          "}",
+          "/>",
+          "<UiHeader",
+          "base="/demo/header"",
+          "logo={",
+          "<Group gap={6}>",
+          "<IconLetterP size={28} />",
+          "<Text size="xl" fw="bold">",
+          "PubKey",
+          "</Text>",
+          "</Group>",
+          "}",
+          "logoSmall={<IconLetterP size={28} />}",
+          "/>",
+          "<UiHeader",
+          "profile={",
+          "<Group gap="xs">",
+          "{signedIn ? (",
+          "<UiMenu",
+          "position="bottom-end"",
+          "withArrow",
+          "arrowOffset={14}",
+          "icon={",
+          "<Avatar",
+          "src="https://avatars.githubusercontent.com/u/36491?v=4"",
+          "size={32}",
+          ">",
+          "<IconUser />",
+          "</Avatar>",
+          "}",
+          "items={[",
+          "{ label: 'Application', type: 'label' },",
+          "{",
+          "label: 'Settings',",
+          "type: 'item',",
+          "leftSection: (",
+          "<IconSettings",
+          "style={{ width: rem(14), height: rem(14) }}",
+          "/>",
+          "),",
+          "},",
+          "{",
+          "label: 'Messages',",
+          "type: 'item',",
+          "leftSection: (",
+          "<IconMessageCircle",
+          "style={{ width: rem(14), height: rem(14) }}",
+          "/>",
+          "),",
+          "},",
+          "{",
+          "label: 'Gallery',",
+          "type: 'item',",
+          "leftSection: (",
+          "<IconPhoto",
+          "style={{ width: rem(14), height: rem(14) }}",
+          "/>",
+          "),",
+          "},",
+          "{",
+          "label: 'Search',",
+          "type: 'item',",
+          "leftSection: (",
+          "<IconSearch",
+          "style={{ width: rem(14), height: rem(14) }}",
+          "/>",
+          "),",
+          "rightSection: (",
+          "<Text size="xs" c="dimmed">",
+          "⌘K",
+          "</Text>",
+          "),",
+          "},",
+          "{",
+          "label: 'Account',",
+          "type: 'label',",
+          "},",
+          "{",
+          "label: 'Profile',",
+          "type: 'item',",
+          "leftSection: (",
+          "<IconUserCog",
+          "style={{ width: rem(14), height: rem(14) }}",
+          "/>",
+          "),",
+          "},",
+          "{",
+          "label: 'Sign out',",
+          "type: 'item',",
+          "leftSection: (",
+          "<IconDoorExit",
+          "style={{ width: rem(14), height: rem(14) }}",
+          "/>",
+          "),",
+          "onClick: () => setSignedIn(false),",
+          "},",
+          "]}",
+          "/>",
+          ") : (",
+          "<Button",
+          "size="sm"",
+          "variant="light"",
+          "onClick={() => setSignedIn(true)}",
+          ">",
+          "Sign in",
+          "</Button>",
+          ")}",
+          "</Group>",
+          "}",
+          "/>",
+          "<UiStack hiddenFrom="md">",
+          "{opened ? (",
+          "<Button onClick={toggle}>Close menu</Button>",
+          ") : (",
+          "<Button variant="light" onClick={toggle}>",
+          "Open menu",
+          "</Button>",
+          ")}",
+          "</UiStack>",
+          "<Routes>",
+          "<Route path="about" element={<div>About</div>} />",
+          "<Route path="pricing" element={<div>Pricing</div>} />",
+          "<Route path="learn" element={<div>Learn</div>} />",
+          "</Routes>",
+          "</UiStack>",
+          "</UiCard>",
+          ");",
+          "}",
+        ],
+        "isBinary": false,
+        "path": "./test/demo-feature-header.tsx",
+      },
       "demo-feature-logo.tsx": {
         "content": [
           "import { SimpleGrid } from '@mantine/core';",
           "import {",
           "UiCard,",
+          "UiGroup,",
+          "UiLogo,",
           "UiLogoType,",
           "UiLogoTypeBlack,",
           "UiLogoTypeWhite,",
+          "UiStack,",
+          "UiThemeSwitch,",
           "} from '@pubkey-ui/core';",
           "export function DemoFeatureLogo() {",
           "return (",
-          "<UiCard title="Logo">",
+          "<UiCard title="Logo and LogoType">",
           "<SimpleGrid cols={2}>",
-          "<UiLogoType height={64} />",
+          "<UiStack align="center">",
+          "<UiLogo height={64} />",
+          "</UiStack>",
+          "<UiStack align="center">",
+          "<UiLogo height={128} />",
+          "</UiStack>",
+          "<UiStack align="center">",
           "<UiLogoTypeBlack height={64} />",
+          "</UiStack>",
+          "<UiStack align="center">",
           "<UiLogoTypeWhite height={64} />",
+          "</UiStack>",
+          "<UiStack align="center">",
+          "<UiLogoType height={64} />",
+          "</UiStack>",
+          "<UiGroup>",
+          "<UiStack align="center">",
+          "<span>Toggle the theme to see the logo change color.</span>",
+          "<UiThemeSwitch />",
+          "</UiStack>",
+          "</UiGroup>",
           "</SimpleGrid>",
           "</UiCard>",
           ");",
@@ -174,13 +377,111 @@ exports[`feature generator should create files for demo 1`] = `
         "isBinary": false,
         "path": "./test/demo-feature-logo.tsx",
       },
+      "demo-feature-menu.tsx": {
+        "content": [
+          "import { Avatar, rem, Text } from '@mantine/core';",
+          "import {",
+          "UiCard,",
+          "UiGroup,",
+          "UiMenu,",
+          "UiMenuItem,",
+          "useUiColorScheme,",
+          "} from '@pubkey-ui/core';",
+          "import {",
+          "IconDoorExit,",
+          "IconMessageCircle,",
+          "IconMoon,",
+          "IconPhoto,",
+          "IconSearch,",
+          "IconSettings,",
+          "IconSun,",
+          "IconUser,",
+          "IconUserCog,",
+          "} from '@tabler/icons-react';",
+          "import { ReactNode } from 'react';",
+          "export function DemoFeatureMenu() {",
+          "const { colorScheme, toggleColorScheme } = useUiColorScheme();",
+          "const icon: ReactNode = (",
+          "<Avatar src="https://avatars.githubusercontent.com/u/36491?v=4" size={32}>",
+          "<IconUser />",
+          "</Avatar>",
+          ");",
+          "const items: UiMenuItem[] = [",
+          "{ label: 'Application', type: 'label' },",
+          "{",
+          "label: 'Settings',",
+          "type: 'item',",
+          "leftSection: <IconSettings style={{ width: rem(14), height: rem(14) }} />,",
+          "},",
+          "{",
+          "label: 'Messages',",
+          "type: 'item',",
+          "leftSection: (",
+          "<IconMessageCircle style={{ width: rem(14), height: rem(14) }} />",
+          "),",
+          "},",
+          "{",
+          "label: 'Gallery',",
+          "type: 'item',",
+          "leftSection: <IconPhoto style={{ width: rem(14), height: rem(14) }} />,",
+          "},",
+          "{",
+          "label: 'Search',",
+          "type: 'item',",
+          "leftSection: <IconSearch style={{ width: rem(14), height: rem(14) }} />,",
+          "rightSection: (",
+          "<Text size="xs" c="dimmed">",
+          "⌘K",
+          "</Text>",
+          "),",
+          "},",
+          "{",
+          "label: \`\${colorScheme === 'dark' ? 'Light' : 'Dark'} theme\`,",
+          "type: 'item',",
+          "leftSection:",
+          "colorScheme === 'dark' ? (",
+          "<IconSun style={{ width: rem(14), height: rem(14) }} />",
+          ") : (",
+          "<IconMoon style={{ width: rem(14), height: rem(14) }} />",
+          "),",
+          "onClick: () => toggleColorScheme(),",
+          "},",
+          "{",
+          "label: 'Account',",
+          "type: 'label',",
+          "},",
+          "{",
+          "label: 'Profile',",
+          "type: 'item',",
+          "leftSection: <IconUserCog style={{ width: rem(14), height: rem(14) }} />,",
+          "},",
+          "{",
+          "label: 'Sign out',",
+          "type: 'item',",
+          "leftSection: <IconDoorExit style={{ width: rem(14), height: rem(14) }} />,",
+          "},",
+          "];",
+          "return (",
+          "<UiCard title="Menu">",
+          "<UiGroup justify="space-between">",
+          "<UiMenu icon={icon} items={items} />",
+          "<UiMenu icon={icon} items={items} position="bottom-end" />",
+          "</UiGroup>",
+          "</UiCard>",
+          ");",
+          "}",
+        ],
+        "isBinary": false,
+        "path": "./test/demo-feature-menu.tsx",
+      },
       "demo-feature-search-input.tsx": {
         "content": [
           "import { SimpleGrid } from '@mantine/core';",
-          "import { UiCard, UiGroup, UiSearchInput } from '@pubkey-ui/core';",
+          "import { UiCard, UiGroup, UiSearchInput, UiStack } from '@pubkey-ui/core';",
           "export function DemoFeatureSearchInput() {",
           "return (",
           "<UiCard title="SearchInput">",
+          "<UiStack>",
           "<SimpleGrid cols={2}>",
           "<UiSearchInput />",
           "<UiSearchInput icon={{ radius: 0 }} text={{ radius: 0 }} />",
@@ -192,6 +493,7 @@ exports[`feature generator should create files for demo 1`] = `
           "<UiSearchInput />",
           "<UiSearchInput />",
           "</UiGroup>",
+          "</UiStack>",
           "</UiCard>",
           ");",
           "}",
@@ -239,9 +541,9 @@ exports[`feature generator should create files for demo 1`] = `
           "import { UiCard, UiTabRoutes } from '@pubkey-ui/core';",
           "export function DemoFeatureTabRoutes() {",
           "return (",
-          "<UiCard title="Time">",
+          "<UiCard title="Tab Routes">",
           "<UiTabRoutes",
-          "baseUrl="/demo"",
+          "baseUrl="/demo/tab-routes"",
           "tabs={[",
           "{",
           "value: 'overview',",
@@ -356,34 +658,77 @@ exports[`feature generator should create files for demo 1`] = `
       },
       "demo-feature.tsx": {
         "content": [
+          "import { Grid, NavLink } from '@mantine/core';",
           "import { UiContainer, UiStack } from '@pubkey-ui/core';",
+          "import { ReactNode } from 'react';",
+          "import { Link, Navigate, useLocation, useRoutes } from 'react-router-dom';",
           "import { DemoFeatureAlerts } from './demo-feature-alerts';",
           "import { DemoFeatureCard } from './demo-feature-card';",
           "import { DemoFeatureCopy } from './demo-feature-copy';",
           "import { DemoFeatureDebug } from './demo-feature-debug';",
           "import { DemoFeatureGroup } from './demo-feature-group';",
+          "import { DemoFeatureHeader } from './demo-feature-header';",
           "import { DemoFeatureLogo } from './demo-feature-logo';",
+          "import { DemoFeatureMenu } from './demo-feature-menu';",
           "import { DemoFeatureSearchInput } from './demo-feature-search-input';",
           "import { DemoFeatureStack } from './demo-feature-stack';",
           "import { DemoFeatureTabRoutes } from './demo-feature-tab-routes';",
           "import { DemoFeatureTime } from './demo-feature-time';",
           "import { DemoFeatureToast } from './demo-feature-toast';",
           "export function DemoFeature() {",
+          "const { pathname } = useLocation();",
+          "const demos: {",
+          "path: string;",
+          "label: string;",
+          "element: ReactNode;",
+          "}[] = [",
+          "{ path: 'alerts', label: 'Alerts', element: <DemoFeatureAlerts /> },",
+          "{ path: 'card', label: 'Card', element: <DemoFeatureCard /> },",
+          "{ path: 'copy', label: 'Copy', element: <DemoFeatureCopy /> },",
+          "{ path: 'debug', label: 'Debug', element: <DemoFeatureDebug /> },",
+          "{ path: 'group', label: 'Group', element: <DemoFeatureGroup /> },",
+          "{ path: 'header', label: 'Header', element: <DemoFeatureHeader /> },",
+          "{ path: 'logo', label: 'Logo', element: <DemoFeatureLogo /> },",
+          "{ path: 'menu', label: 'Menu', element: <DemoFeatureMenu /> },",
+          "{",
+          "path: 'search-input',",
+          "label: 'Search Input',",
+          "element: <DemoFeatureSearchInput />,",
+          "},",
+          "{ path: 'stack', label: 'Stack', element: <DemoFeatureStack /> },",
+          "{",
+          "path: 'tab-routes',",
+          "label: 'Tab Routes',",
+          "element: <DemoFeatureTabRoutes />,",
+          "},",
+          "{ path: 'time', label: 'Time', element: <DemoFeatureTime /> },",
+          "{ path: 'toast', label: 'Toast', element: <DemoFeatureToast /> },",
+          "];",
+          "const routes = useRoutes([",
+          "{ index: true, element: <Navigate to={demos[0].path} replace /> },",
+          "...demos.map((demo) => ({ path: \`\${demo.path}/*\`, element: demo.element })),",
+          "]);",
           "return (",
           "<UiContainer>",
-          "<UiStack>",
-          "<DemoFeatureAlerts />",
-          "<DemoFeatureCard />",
-          "<DemoFeatureCopy />",
-          "<DemoFeatureDebug />",
-          "<DemoFeatureGroup />",
-          "<DemoFeatureLogo />",
-          "<DemoFeatureSearchInput />",
-          "<DemoFeatureStack />",
-          "<DemoFeatureTabRoutes />",
-          "<DemoFeatureTime />",
-          "<DemoFeatureToast />",
-          "</UiStack>",
+          "<Grid>",
+          "<Grid.Col span={{ base: 12, sm: 2 }}>",
+          "{demos.map((demo) => {",
+          "const to = \`/demo/\${demo.path}\`;",
+          "return (",
+          "<NavLink",
+          "active={pathname.startsWith(to)}",
+          "component={Link}",
+          "key={demo.path}",
+          "label={demo.label}",
+          "to={to}",
+          "/>",
+          ");",
+          "})}",
+          "</Grid.Col>",
+          "<Grid.Col span={{ base: 12, sm: 10 }}>",
+          "<UiStack gap="xl">{routes}</UiStack>",
+          "</Grid.Col>",
+          "</Grid>",
           "</UiContainer>",
           ");",
           "}",
diff --git a/packages/generators/src/generators/features/__snapshots__/features-generator.spec.ts.snap b/packages/generators/src/generators/features/__snapshots__/features-generator.spec.ts.snap
index 21a28ba..b65bf8d 100644
--- a/packages/generators/src/generators/features/__snapshots__/features-generator.spec.ts.snap
+++ b/packages/generators/src/generators/features/__snapshots__/features-generator.spec.ts.snap
@@ -42,8 +42,8 @@ exports[`features generator should run successfully 1`] = `
             "content": [
               "import { SimpleGrid } from '@mantine/core';",
               "import {",
-              "UiCard,",
               "UiAlert,",
+              "UiCard,",
               "UiError,",
               "UiInfo,",
               "UiSuccess,",
@@ -72,6 +72,7 @@ exports[`features generator should run successfully 1`] = `
               "export function DemoFeatureCard() {",
               "return (",
               "<UiStack>",
+              "<UiCard title="Default Card">CARD CONTENT</UiCard>",
               "<UiCard withBorder title="Card" shadow="lg">",
               "CARD CONTENT",
               "</UiCard>",
@@ -152,22 +153,224 @@ exports[`features generator should run successfully 1`] = `
             "isBinary": false,
             "path": "./test/demo/demo-feature-group.tsx",
           },
+          "demo-feature-header.tsx": {
+            "content": [
+              "import { ActionIcon, Avatar, Button, Group, rem, Text } from '@mantine/core';",
+              "import { useDisclosure } from '@mantine/hooks';",
+              "import {",
+              "UiCard,",
+              "UiHeader,",
+              "UiMenu,",
+              "UiSearchInput,",
+              "UiStack,",
+              "} from '@pubkey-ui/core';",
+              "import {",
+              "IconDoorExit,",
+              "IconLetterP,",
+              "IconMessageCircle,",
+              "IconPhoto,",
+              "IconSearch,",
+              "IconSettings,",
+              "IconUser,",
+              "IconUserCog,",
+              "} from '@tabler/icons-react';",
+              "import { useState } from 'react';",
+              "import { Route, Routes } from 'react-router-dom';",
+              "export function DemoFeatureHeader() {",
+              "const [opened, { toggle }] = useDisclosure(false);",
+              "const [signedIn, setSignedIn] = useState(false);",
+              "return (",
+              "<UiCard title="Header">",
+              "<UiStack gap="xl">",
+              "<UiHeader",
+              "base="/demo/header"",
+              "opened={opened}",
+              "toggle={toggle}",
+              "links={[",
+              "{ link: '/demo/header/about', label: 'Features' },",
+              "{ link: '/demo/header/pricing', label: 'Pricing' },",
+              "{ link: '/demo/header/learn', label: 'Learn' },",
+              "]}",
+              "profile={<UiSearchInput text={{ size: 'sm' }} />}",
+              "/>",
+              "<UiHeader",
+              "profile={",
+              "<ActionIcon radius="xl" size="lg" variant="light">",
+              "<IconSearch",
+              "style={{ width: rem(16), height: rem(16) }}",
+              "stroke={1.5}",
+              "/>",
+              "</ActionIcon>",
+              "}",
+              "/>",
+              "<UiHeader",
+              "base="/demo/header"",
+              "logo={",
+              "<Group gap={6}>",
+              "<IconLetterP size={28} />",
+              "<Text size="xl" fw="bold">",
+              "PubKey",
+              "</Text>",
+              "</Group>",
+              "}",
+              "logoSmall={<IconLetterP size={28} />}",
+              "/>",
+              "<UiHeader",
+              "profile={",
+              "<Group gap="xs">",
+              "{signedIn ? (",
+              "<UiMenu",
+              "position="bottom-end"",
+              "withArrow",
+              "arrowOffset={14}",
+              "icon={",
+              "<Avatar",
+              "src="https://avatars.githubusercontent.com/u/36491?v=4"",
+              "size={32}",
+              ">",
+              "<IconUser />",
+              "</Avatar>",
+              "}",
+              "items={[",
+              "{ label: 'Application', type: 'label' },",
+              "{",
+              "label: 'Settings',",
+              "type: 'item',",
+              "leftSection: (",
+              "<IconSettings",
+              "style={{ width: rem(14), height: rem(14) }}",
+              "/>",
+              "),",
+              "},",
+              "{",
+              "label: 'Messages',",
+              "type: 'item',",
+              "leftSection: (",
+              "<IconMessageCircle",
+              "style={{ width: rem(14), height: rem(14) }}",
+              "/>",
+              "),",
+              "},",
+              "{",
+              "label: 'Gallery',",
+              "type: 'item',",
+              "leftSection: (",
+              "<IconPhoto",
+              "style={{ width: rem(14), height: rem(14) }}",
+              "/>",
+              "),",
+              "},",
+              "{",
+              "label: 'Search',",
+              "type: 'item',",
+              "leftSection: (",
+              "<IconSearch",
+              "style={{ width: rem(14), height: rem(14) }}",
+              "/>",
+              "),",
+              "rightSection: (",
+              "<Text size="xs" c="dimmed">",
+              "⌘K",
+              "</Text>",
+              "),",
+              "},",
+              "{",
+              "label: 'Account',",
+              "type: 'label',",
+              "},",
+              "{",
+              "label: 'Profile',",
+              "type: 'item',",
+              "leftSection: (",
+              "<IconUserCog",
+              "style={{ width: rem(14), height: rem(14) }}",
+              "/>",
+              "),",
+              "},",
+              "{",
+              "label: 'Sign out',",
+              "type: 'item',",
+              "leftSection: (",
+              "<IconDoorExit",
+              "style={{ width: rem(14), height: rem(14) }}",
+              "/>",
+              "),",
+              "onClick: () => setSignedIn(false),",
+              "},",
+              "]}",
+              "/>",
+              ") : (",
+              "<Button",
+              "size="sm"",
+              "variant="light"",
+              "onClick={() => setSignedIn(true)}",
+              ">",
+              "Sign in",
+              "</Button>",
+              ")}",
+              "</Group>",
+              "}",
+              "/>",
+              "<UiStack hiddenFrom="md">",
+              "{opened ? (",
+              "<Button onClick={toggle}>Close menu</Button>",
+              ") : (",
+              "<Button variant="light" onClick={toggle}>",
+              "Open menu",
+              "</Button>",
+              ")}",
+              "</UiStack>",
+              "<Routes>",
+              "<Route path="about" element={<div>About</div>} />",
+              "<Route path="pricing" element={<div>Pricing</div>} />",
+              "<Route path="learn" element={<div>Learn</div>} />",
+              "</Routes>",
+              "</UiStack>",
+              "</UiCard>",
+              ");",
+              "}",
+            ],
+            "isBinary": false,
+            "path": "./test/demo/demo-feature-header.tsx",
+          },
           "demo-feature-logo.tsx": {
             "content": [
               "import { SimpleGrid } from '@mantine/core';",
               "import {",
               "UiCard,",
+              "UiGroup,",
+              "UiLogo,",
               "UiLogoType,",
               "UiLogoTypeBlack,",
               "UiLogoTypeWhite,",
+              "UiStack,",
+              "UiThemeSwitch,",
               "} from '@pubkey-ui/core';",
               "export function DemoFeatureLogo() {",
               "return (",
-              "<UiCard title="Logo">",
+              "<UiCard title="Logo and LogoType">",
               "<SimpleGrid cols={2}>",
-              "<UiLogoType height={64} />",
+              "<UiStack align="center">",
+              "<UiLogo height={64} />",
+              "</UiStack>",
+              "<UiStack align="center">",
+              "<UiLogo height={128} />",
+              "</UiStack>",
+              "<UiStack align="center">",
               "<UiLogoTypeBlack height={64} />",
+              "</UiStack>",
+              "<UiStack align="center">",
               "<UiLogoTypeWhite height={64} />",
+              "</UiStack>",
+              "<UiStack align="center">",
+              "<UiLogoType height={64} />",
+              "</UiStack>",
+              "<UiGroup>",
+              "<UiStack align="center">",
+              "<span>Toggle the theme to see the logo change color.</span>",
+              "<UiThemeSwitch />",
+              "</UiStack>",
+              "</UiGroup>",
               "</SimpleGrid>",
               "</UiCard>",
               ");",
@@ -176,13 +379,111 @@ exports[`features generator should run successfully 1`] = `
             "isBinary": false,
             "path": "./test/demo/demo-feature-logo.tsx",
           },
+          "demo-feature-menu.tsx": {
+            "content": [
+              "import { Avatar, rem, Text } from '@mantine/core';",
+              "import {",
+              "UiCard,",
+              "UiGroup,",
+              "UiMenu,",
+              "UiMenuItem,",
+              "useUiColorScheme,",
+              "} from '@pubkey-ui/core';",
+              "import {",
+              "IconDoorExit,",
+              "IconMessageCircle,",
+              "IconMoon,",
+              "IconPhoto,",
+              "IconSearch,",
+              "IconSettings,",
+              "IconSun,",
+              "IconUser,",
+              "IconUserCog,",
+              "} from '@tabler/icons-react';",
+              "import { ReactNode } from 'react';",
+              "export function DemoFeatureMenu() {",
+              "const { colorScheme, toggleColorScheme } = useUiColorScheme();",
+              "const icon: ReactNode = (",
+              "<Avatar src="https://avatars.githubusercontent.com/u/36491?v=4" size={32}>",
+              "<IconUser />",
+              "</Avatar>",
+              ");",
+              "const items: UiMenuItem[] = [",
+              "{ label: 'Application', type: 'label' },",
+              "{",
+              "label: 'Settings',",
+              "type: 'item',",
+              "leftSection: <IconSettings style={{ width: rem(14), height: rem(14) }} />,",
+              "},",
+              "{",
+              "label: 'Messages',",
+              "type: 'item',",
+              "leftSection: (",
+              "<IconMessageCircle style={{ width: rem(14), height: rem(14) }} />",
+              "),",
+              "},",
+              "{",
+              "label: 'Gallery',",
+              "type: 'item',",
+              "leftSection: <IconPhoto style={{ width: rem(14), height: rem(14) }} />,",
+              "},",
+              "{",
+              "label: 'Search',",
+              "type: 'item',",
+              "leftSection: <IconSearch style={{ width: rem(14), height: rem(14) }} />,",
+              "rightSection: (",
+              "<Text size="xs" c="dimmed">",
+              "⌘K",
+              "</Text>",
+              "),",
+              "},",
+              "{",
+              "label: \`\${colorScheme === 'dark' ? 'Light' : 'Dark'} theme\`,",
+              "type: 'item',",
+              "leftSection:",
+              "colorScheme === 'dark' ? (",
+              "<IconSun style={{ width: rem(14), height: rem(14) }} />",
+              ") : (",
+              "<IconMoon style={{ width: rem(14), height: rem(14) }} />",
+              "),",
+              "onClick: () => toggleColorScheme(),",
+              "},",
+              "{",
+              "label: 'Account',",
+              "type: 'label',",
+              "},",
+              "{",
+              "label: 'Profile',",
+              "type: 'item',",
+              "leftSection: <IconUserCog style={{ width: rem(14), height: rem(14) }} />,",
+              "},",
+              "{",
+              "label: 'Sign out',",
+              "type: 'item',",
+              "leftSection: <IconDoorExit style={{ width: rem(14), height: rem(14) }} />,",
+              "},",
+              "];",
+              "return (",
+              "<UiCard title="Menu">",
+              "<UiGroup justify="space-between">",
+              "<UiMenu icon={icon} items={items} />",
+              "<UiMenu icon={icon} items={items} position="bottom-end" />",
+              "</UiGroup>",
+              "</UiCard>",
+              ");",
+              "}",
+            ],
+            "isBinary": false,
+            "path": "./test/demo/demo-feature-menu.tsx",
+          },
           "demo-feature-search-input.tsx": {
             "content": [
               "import { SimpleGrid } from '@mantine/core';",
-              "import { UiCard, UiGroup, UiSearchInput } from '@pubkey-ui/core';",
+              "import { UiCard, UiGroup, UiSearchInput, UiStack } from '@pubkey-ui/core';",
               "export function DemoFeatureSearchInput() {",
               "return (",
               "<UiCard title="SearchInput">",
+              "<UiStack>",
               "<SimpleGrid cols={2}>",
               "<UiSearchInput />",
               "<UiSearchInput icon={{ radius: 0 }} text={{ radius: 0 }} />",
@@ -194,6 +495,7 @@ exports[`features generator should run successfully 1`] = `
               "<UiSearchInput />",
               "<UiSearchInput />",
               "</UiGroup>",
+              "</UiStack>",
               "</UiCard>",
               ");",
               "}",
@@ -241,9 +543,9 @@ exports[`features generator should run successfully 1`] = `
               "import { UiCard, UiTabRoutes } from '@pubkey-ui/core';",
               "export function DemoFeatureTabRoutes() {",
               "return (",
-              "<UiCard title="Time">",
+              "<UiCard title="Tab Routes">",
               "<UiTabRoutes",
-              "baseUrl="/demo"",
+              "baseUrl="/demo/tab-routes"",
               "tabs={[",
               "{",
               "value: 'overview',",
@@ -358,34 +660,77 @@ exports[`features generator should run successfully 1`] = `
           },
           "demo-feature.tsx": {
             "content": [
+              "import { Grid, NavLink } from '@mantine/core';",
               "import { UiContainer, UiStack } from '@pubkey-ui/core';",
+              "import { ReactNode } from 'react';",
+              "import { Link, Navigate, useLocation, useRoutes } from 'react-router-dom';",
               "import { DemoFeatureAlerts } from './demo-feature-alerts';",
               "import { DemoFeatureCard } from './demo-feature-card';",
               "import { DemoFeatureCopy } from './demo-feature-copy';",
               "import { DemoFeatureDebug } from './demo-feature-debug';",
               "import { DemoFeatureGroup } from './demo-feature-group';",
+              "import { DemoFeatureHeader } from './demo-feature-header';",
               "import { DemoFeatureLogo } from './demo-feature-logo';",
+              "import { DemoFeatureMenu } from './demo-feature-menu';",
               "import { DemoFeatureSearchInput } from './demo-feature-search-input';",
               "import { DemoFeatureStack } from './demo-feature-stack';",
               "import { DemoFeatureTabRoutes } from './demo-feature-tab-routes';",
               "import { DemoFeatureTime } from './demo-feature-time';",
               "import { DemoFeatureToast } from './demo-feature-toast';",
               "export function DemoFeature() {",
+              "const { pathname } = useLocation();",
+              "const demos: {",
+              "path: string;",
+              "label: string;",
+              "element: ReactNode;",
+              "}[] = [",
+              "{ path: 'alerts', label: 'Alerts', element: <DemoFeatureAlerts /> },",
+              "{ path: 'card', label: 'Card', element: <DemoFeatureCard /> },",
+              "{ path: 'copy', label: 'Copy', element: <DemoFeatureCopy /> },",
+              "{ path: 'debug', label: 'Debug', element: <DemoFeatureDebug /> },",
+              "{ path: 'group', label: 'Group', element: <DemoFeatureGroup /> },",
+              "{ path: 'header', label: 'Header', element: <DemoFeatureHeader /> },",
+              "{ path: 'logo', label: 'Logo', element: <DemoFeatureLogo /> },",
+              "{ path: 'menu', label: 'Menu', element: <DemoFeatureMenu /> },",
+              "{",
+              "path: 'search-input',",
+              "label: 'Search Input',",
+              "element: <DemoFeatureSearchInput />,",
+              "},",
+              "{ path: 'stack', label: 'Stack', element: <DemoFeatureStack /> },",
+              "{",
+              "path: 'tab-routes',",
+              "label: 'Tab Routes',",
+              "element: <DemoFeatureTabRoutes />,",
+              "},",
+              "{ path: 'time', label: 'Time', element: <DemoFeatureTime /> },",
+              "{ path: 'toast', label: 'Toast', element: <DemoFeatureToast /> },",
+              "];",
+              "const routes = useRoutes([",
+              "{ index: true, element: <Navigate to={demos[0].path} replace /> },",
+              "...demos.map((demo) => ({ path: \`\${demo.path}/*\`, element: demo.element })),",
+              "]);",
               "return (",
               "<UiContainer>",
-              "<UiStack>",
-              "<DemoFeatureAlerts />",
-              "<DemoFeatureCard />",
-              "<DemoFeatureCopy />",
-              "<DemoFeatureDebug />",
-              "<DemoFeatureGroup />",
-              "<DemoFeatureLogo />",
-              "<DemoFeatureSearchInput />",
-              "<DemoFeatureStack />",
-              "<DemoFeatureTabRoutes />",
-              "<DemoFeatureTime />",
-              "<DemoFeatureToast />",
-              "</UiStack>",
+              "<Grid>",
+              "<Grid.Col span={{ base: 12, sm: 2 }}>",
+              "{demos.map((demo) => {",
+              "const to = \`/demo/\${demo.path}\`;",
+              "return (",
+              "<NavLink",
+              "active={pathname.startsWith(to)}",
+              "component={Link}",
+              "key={demo.path}",
+              "label={demo.label}",
+              "to={to}",
+              "/>",
+              ");",
+              "})}",
+              "</Grid.Col>",
+              "<Grid.Col span={{ base: 12, sm: 10 }}>",
+              "<UiStack gap="xl">{routes}</UiStack>",
+              "</Grid.Col>",
+              "</Grid>",
               "</UiContainer>",
               ");",
               "}",
diff --git a/packages/generators/src/generators/theme/__snapshots__/theme-generator.spec.ts.snap b/packages/generators/src/generators/theme/__snapshots__/theme-generator.spec.ts.snap
index 4c4eed7..2a036a6 100644
--- a/packages/generators/src/generators/theme/__snapshots__/theme-generator.spec.ts.snap
+++ b/packages/generators/src/generators/theme/__snapshots__/theme-generator.spec.ts.snap
@@ -76,40 +76,81 @@ exports[`theme generator should run successfully 1`] = `
             "children": {
               "app-layout.tsx": {
                 "content": [
-                  "import { ActionIcon, Anchor, Box, Card, Group } from '@mantine/core';",
-                  "import { UiContainer, UiLogoType, useUiColorScheme, useUiTheme } from './ui';",
-                  "import { IconMoon, IconSun } from '@tabler/icons-react';",
+                  "import { ActionIcon, Avatar, Group, rem } from '@mantine/core';",
+                  "import { UiHeader, UiLayout, UiMenu, useUiColorScheme } from '@pubkey-ui/core';",
+                  "import {",
+                  "IconMoon,",
+                  "IconSettings,",
+                  "IconSun,",
+                  "IconUser,",
+                  "IconUserCog,",
+                  "} from '@tabler/icons-react';",
                   "import { ReactNode } from 'react';",
+                  "import { AccountChecker } from './features/account/account-ui';",
+                  "import { ClusterChecker } from './features/cluster/cluster-ui';",
                   "export function AppLayout({ children }: { children: ReactNode }) {",
-                  "const { Link } = useUiTheme();",
                   "return (",
-                  "<Box>",
-                  "<Card p="0" display="block">",
-                  "<UiContainer py="sm">",
-                  "<Group justify="space-between">",
-                  "<Group align="center">",
-                  "<Anchor component={Link} to="/" display="flex">",
-                  "<UiLogoType height={32} />",
-                  "</Anchor>",
-                  "<Anchor component={Link} to="/dashboard">",
-                  "Dashboard",
-                  "</Anchor>",
-                  "<Anchor component={Link} to="/demo">",
-                  "Demo",
-                  "</Anchor>",
-                  "</Group>",
+                  "<UiLayout",
+                  "header={",
+                  "<UiHeader",
+                  "links={[",
+                  "{ label: 'Dashboard', link: '/dashboard' },",
+                  "{ label: 'Account', link: '/account' },",
+                  "{ label: 'Demo', link: '/demo' },",
+                  "{ label: 'Dev', link: '/dev' },",
+                  "]}",
+                  "profile={",
+                  "<Group>",
                   "<ThemeToggle />",
+                  "<UiMenu",
+                  "position="bottom-end"",
+                  "withArrow",
+                  "arrowOffset={14}",
+                  "icon={",
+                  "<Avatar",
+                  "src="https://avatars.githubusercontent.com/u/36491?v=4"",
+                  "size={32}",
+                  ">",
+                  "<IconUser />",
+                  "</Avatar>",
+                  "}",
+                  "items={[",
+                  "{ label: 'Account', type: 'label' },",
+                  "{",
+                  "label: 'Settings',",
+                  "type: 'item',",
+                  "leftSection: (",
+                  "<IconSettings",
+                  "style={{ width: rem(14), height: rem(14) }}",
+                  "/>",
+                  "),",
+                  "},",
+                  "{",
+                  "label: 'Profile',",
+                  "type: 'item',",
+                  "leftSection: (",
+                  "<IconUserCog",
+                  "style={{ width: rem(14), height: rem(14) }}",
+                  "/>",
+                  "),",
+                  "},",
+                  "]}",
+                  "/>",
                   "</Group>",
-                  "</UiContainer>",
-                  "</Card>",
+                  "}",
+                  "/>",
+                  "}",
+                  ">",
+                  "<ClusterChecker>",
+                  "<AccountChecker />",
+                  "</ClusterChecker>",
                   "{children}",
-                  "</Box>",
+                  "</UiLayout>",
                   ");",
                   "}",
-                  "function ThemeToggle() {",
+                  "export function ThemeToggle() {",
                   "const { toggleColorScheme, colorScheme } = useUiColorScheme();",
                   "return (",
-                  "<Group justify="center">",
                   "<ActionIcon",
                   "onClick={() => toggleColorScheme()}",
                   "variant="default"",
@@ -117,12 +158,11 @@ exports[`theme generator should run successfully 1`] = `
                   "aria-label="Toggle color scheme"",
                   ">",
                   "{colorScheme === 'dark' ? (",
-                  "<IconSun className={''} stroke={1.5} />",
+                  "<IconSun stroke={1.5} />",
                   ") : (",
-                  "<IconMoon className={''} stroke={1.5} />",
+                  "<IconMoon stroke={1.5} />",
                   ")}",
                   "</ActionIcon>",
-                  "</Group>",
                   ");",
                   "}",
                 ],
@@ -205,12 +245,14 @@ exports[`theme generator should run successfully 1`] = `
                       "export * from './ui-debug';",
                       "export * from './ui-group';",
                       "export * from './ui-header';",
+                      "export * from './ui-layout';",
                       "export * from './ui-logo';",
                       "export * from './ui-menu';",
                       "export * from './ui-search-input';",
                       "export * from './ui-stack';",
                       "export * from './ui-tab-routes';",
                       "export * from './ui-theme';",
+                      "export * from './ui-theme-switch';",
                       "export * from './ui-time';",
                       "export * from './ui-toast';",
                     ],
@@ -671,6 +713,45 @@ exports[`theme generator should run successfully 1`] = `
                     },
                     "path": "./test-target/src/app/ui/ui-header",
                   },
+                  "ui-layout": {
+                    "children": {
+                      "index.ts": {
+                        "content": [
+                          "export * from './ui-layout';",
+                        ],
+                        "isBinary": false,
+                        "path": "./test-target/src/app/ui/ui-layout/index.ts",
+                      },
+                      "ui-layout.tsx": {
+                        "content": [
+                          "import { AppShell, AppShellProps, Loader, rem } from '@mantine/core';",
+                          "import { ReactNode, Suspense } from 'react';",
+                          "export function UiLayout({",
+                          "children,",
+                          "header,",
+                          "headerHeight = rem(56),",
+                          "...props",
+                          "}: Omit<AppShellProps, 'header'> & {",
+                          "children: ReactNode;",
+                          "header: ReactNode;",
+                          "headerHeight?: string;",
+                          "}) {",
+                          "return (",
+                          "<AppShell header={{ height: headerHeight }} padding="md" {...props}>",
+                          "<AppShell.Header>{header}</AppShell.Header>",
+                          "<AppShell.Main>",
+                          "<Suspense fallback={<Loader />}>{children}</Suspense>",
+                          "</AppShell.Main>",
+                          "</AppShell>",
+                          ");",
+                          "}",
+                        ],
+                        "isBinary": false,
+                        "path": "./test-target/src/app/ui/ui-layout/ui-layout.tsx",
+                      },
+                    },
+                    "path": "./test-target/src/app/ui/ui-layout",
+                  },
                   "ui-logo": {
                     "children": {
                       "index.ts": {
@@ -1234,6 +1315,56 @@ exports[`theme generator should run successfully 1`] = `
                     },
                     "path": "./test-target/src/app/ui/ui-theme",
                   },
+                  "ui-theme-switch": {
+                    "children": {
+                      "index.ts": {
+                        "content": [
+                          "export * from './ui-theme-switch';",
+                        ],
+                        "isBinary": false,
+                        "path": "./test-target/src/app/ui/ui-theme-switch/index.ts",
+                      },
+                      "ui-theme-switch.tsx": {
+                        "content": [
+                          "import { rem, Switch, SwitchProps, useMantineTheme } from '@mantine/core';",
+                          "import { IconMoonStars, IconSun } from '@tabler/icons-react';",
+                          "import { useUiColorScheme } from '../ui-theme';",
+                          "export function UiThemeSwitch(props: SwitchProps) {",
+                          "const theme = useMantineTheme();",
+                          "const sunIcon = (",
+                          "<IconSun",
+                          "style={{ width: rem(16), height: rem(16) }}",
+                          "stroke={2.5}",
+                          "color={theme.colors.yellow[4]}",
+                          "/>",
+                          ");",
+                          "const moonIcon = (",
+                          "<IconMoonStars",
+                          "style={{ width: rem(16), height: rem(16) }}",
+                          "stroke={2.5}",
+                          "color={theme.colors.brand[6]}",
+                          "/>",
+                          ");",
+                          "const { toggleColorScheme, colorScheme } = useUiColorScheme();",
+                          "return (",
+                          "<Switch",
+                          "size="lg"",
+                          "color={'dark.6'}",
+                          "onLabel={sunIcon}",
+                          "offLabel={moonIcon}",
+                          "onChange={() => toggleColorScheme()}",
+                          "checked={colorScheme === 'dark'}",
+                          "{...props}",
+                          "/>",
+                          ");",
+                          "}",
+                        ],
+                        "isBinary": false,
+                        "path": "./test-target/src/app/ui/ui-theme-switch/ui-theme-switch.tsx",
+                      },
+                    },
+                    "path": "./test-target/src/app/ui/ui-theme-switch",
+                  },
                   "ui-time": {
                     "children": {
                       "index.ts": {