@tanstack/create 0.49.1

package/src/frameworks/react/project/base/src/main.tsx.ejs

@@ -0,0 +1,166 @@
+<% if (addOnEnabled.start) { ignoreFile() } %><% if (codeRouter) {
+  
+/// Code Router
+
+%>import { StrictMode } from "react";
+import ReactDOM from "react-dom/client";
+import {
+  Outlet,
+  RouterProvider,
+  createRootRoute,
+  createRoute,
+  createRouter,
+} from "@tanstack/react-router";
+import { TanStackRouterDevtools } from "@tanstack/react-router-devtools";
+<% for(const route of routes) { %>import <%= route.jsName %> from "<%= relativePath(route.path) %>";
+<% } %><% if (routes.length > 0) { %>
+import Header from "./components/Header";
+<% } %><% for(const integration of integrations.filter(i => i.type === 'layout' || i.type === 'provider')) { %>
+import <%= integration.jsName %> from "<%= relativePath(integration.path) %>";
+<% } %><% for(const integration of integrations.filter(i => i.type === 'root-provider')) { %>
+import * as <%= integration.jsName %> from "<%= relativePath(integration.path) %>";
+<% } %>
+
+import "./styles.css";
+import reportWebVitals from "./reportWebVitals.<%= js %>";
+
+import App from "./App.<%= jsx %>";
+
+const rootRoute = createRootRoute({
+  component: () => (
+    <>
+    <% for(const integration of integrations.filter(i => i.type === 'provider')) { %>
+      <<%= integration.jsName %>>
+    <% } %>
+    <% if (routes.length > 0) { %><Header /><% } %>
+      <Outlet />
+      <TanStackRouterDevtools />
+      <% for(const integration of integrations.filter(i => i.type === 'layout')) { %>
+        <<%= integration.jsName %> />
+      <% } %>
+    <% for(const integration of integrations.filter(i => i.type === 'provider').reverse()) { %>
+      </<%= integration.jsName %>>
+    <% } %>
+    </>
+  ),
+});
+
+const indexRoute = createRoute({
+  getParentRoute: () => rootRoute,
+  path: "/",
+  component: App,
+});
+
+const routeTree = rootRoute.addChildren([indexRoute<%= routes.map(route => `, ${route.jsName}(rootRoute)`).join('') %>]);
+
+<% for(const integration of integrations.filter(i => i.type === 'root-provider')) { %>
+const <%= integration.jsName %>Context = <%= integration.jsName %>.getContext();
+<% } %>const router = createRouter({
+  routeTree,
+  context: {
+    <% for(const integration of integrations.filter(i => i.type === 'root-provider')) { %>
+      ...<%= integration.jsName %>Context,
+    <% } %>
+  },
+  defaultPreload: "intent",
+  scrollRestoration: true,
+  defaultStructuralSharing: true,
+  defaultPreloadStaleTime: 0,
+});
+<% if (typescript) { %>
+declare module "@tanstack/react-router" {
+  interface Register {
+    router: typeof router;
+  }
+}
+
+const rootElement = document.getElementById("app");
+<% } else { %>
+const rootElement = document.getElementById("app");
+<% } %>if (rootElement && !rootElement.innerHTML) {
+  const root = ReactDOM.createRoot(rootElement);
+  root.render(
+    <StrictMode>
+      <% for(const integration of integrations.filter(i => i.type === 'root-provider')) { %>
+        <<%= integration.jsName %>.Provider {...<%= integration.jsName %>Context}>
+      <% } %>
+        <RouterProvider router={router} />
+      <% for(const integration of integrations.filter(i => i.type === 'root-provider').reverse()) { %>
+        </<%= integration.jsName %>.Provider>
+      <% } %>
+    </StrictMode>
+  );
+}
+
+// If you want to start measuring performance in your app, pass a function
+// to log results (for example: reportWebVitals(console.log))
+// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
+reportWebVitals();
+<% } else {
+  
+/* File Router */
+  
+%>import { StrictMode } from "react";
+import ReactDOM from "react-dom/client";
+import { RouterProvider, createRouter } from "@tanstack/react-router";
+<% for(const integration of integrations.filter(i => i.type === 'root-provider')) { %>
+import * as <%= integration.jsName %> from "<%= relativePath(integration.path) %>";
+<% } %><% if (addOnEnabled.paraglide) { %>
+import { deLocalizeUrl, localizeUrl } from "./paraglide/runtime";
+<% } %>
+
+// Import the generated route tree
+import { routeTree } from "./routeTree.gen";
+
+import "./styles.css";
+import reportWebVitals from "./reportWebVitals.<%= js %>";
+
+// Create a new router instance
+<% for(const integration of integrations.filter(i => i.type === 'root-provider')) { %>
+const <%= integration.jsName %>Context = <%= integration.jsName %>.getContext();
+<% } %>const router = createRouter({
+  routeTree,
+  context: {
+    <% for(const integration of integrations.filter(i => i.type === 'root-provider')) { %>
+      ...<%= integration.jsName %>Context,
+    <% } %>
+  },<% if (addOnEnabled.paraglide) { %>
+  // Paraglide URL rewrite docs: https://github.com/TanStack/router/tree/main/examples/react/i18n-paraglide#rewrite-url
+  rewrite: {
+    input: ({ url }) => deLocalizeUrl(url),
+    output: ({ url }) => localizeUrl(url),
+  },<% } %>
+  defaultPreload: "intent",
+  scrollRestoration: true,
+  defaultStructuralSharing: true,
+  defaultPreloadStaleTime: 0,
+});
+
+// Register the router instance for type safety
+declare module "@tanstack/react-router" {
+  interface Register {
+    router: typeof router;
+  }
+}
+
+// Render the app
+const rootElement = document.getElementById("app");
+if (rootElement && !rootElement.innerHTML) {
+  const root = ReactDOM.createRoot(rootElement);
+  root.render(
+    <StrictMode>
+      <% for(const integration of integrations.filter(i => i.type === 'root-provider')) { %>
+        <<%= integration.jsName %>.Provider {...<%= integration.jsName %>Context}>
+      <% } %>
+          <RouterProvider router={router} />
+      <% for(const integration of integrations.filter(i => i.type === 'root-provider').reverse()) { %>
+        </<%= integration.jsName %>.Provider>
+      <% } %>
+    </StrictMode>
+  );
+}
+
+// If you want to start measuring performance in your app, pass a function
+// to log results (for example: reportWebVitals(console.log))
+// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
+reportWebVitals();<% } %>

package/src/frameworks/react/project/base/src/reportWebVitals.ts.ejs

@@ -0,0 +1,28 @@
+<% if (addOnEnabled.start) { ignoreFile() } %><% if (typescript) { %>
+const reportWebVitals = (onPerfEntry?: () => void) => {
+  if (onPerfEntry && onPerfEntry instanceof Function) {
+    import("web-vitals").then(
+      ({ onCLS, onINP, onFCP, onLCP, onTTFB }) => {
+        onCLS(onPerfEntry);
+        onINP(onPerfEntry);
+        onFCP(onPerfEntry);
+        onLCP(onPerfEntry);
+        onTTFB(onPerfEntry);
+      }
+    );
+  }
+};
+<% } else { %>  
+const reportWebVitals = onPerfEntry => {
+  if (onPerfEntry && onPerfEntry instanceof Function) {
+    import('web-vitals').then(({ onCLS, onINP, onFCP, onLCP, onTTFB }) => {
+      onCLS(onPerfEntry);
+      onINP(onPerfEntry);
+      onFCP(onPerfEntry);
+      onLCP(onPerfEntry);
+      onTTFB(onPerfEntry);
+    });
+  }
+};
+<% } %>
+export default reportWebVitals;

package/src/frameworks/react/project/base/src/routes/__root.tsx.ejs

@@ -0,0 +1,135 @@
+<% let hasContext = addOnEnabled["apollo-client"] || addOnEnabled["tanstack-query"]; %>
+<% if (!fileRouter) { ignoreFile() } %>import { <% if (addOnEnabled.start) { %>
+  HeadContent<% } else { %>Outlet<% } %><% if (addOnEnabled.start) { %>, Scripts<% } %>, <% if (hasContext) { %>createRootRouteWithContext<% } else { %>createRootRoute<% } %><% if (addOnEnabled.paraglide) { %>, redirect<% } %> } from '@tanstack/react-router'
+import { TanStackRouterDevtoolsPanel } from '@tanstack/react-router-devtools';
+import { TanStackDevtools } from '@tanstack/react-devtools'
+<% if (addOns.length) { %>
+import Header from '../components/Header'
+<% } %><% for(const integration of integrations.filter(i => i.type === 'layout' || i.type === 'provider' || i.type === 'devtools')) { %>
+import <%= integration.jsName %> from '<%= relativePath(integration.path, true) %>'
+<% } %><% if (addOnEnabled.paraglide) { %>
+import { getLocale, shouldRedirect } from '@/paraglide/runtime'
+<% } %>
+<% if (addOnEnabled.start) { %>
+import appCss from '../styles.css?url'
+<% } %>
+<% if (addOnEnabled["apollo-client"]) { %>
+import type { ApolloClientIntegration } from "@apollo/client-integration-tanstack-start";
+<% } %>
+<% if (addOnEnabled["tanstack-query"]) { %>
+import type { QueryClient } from '@tanstack/react-query'
+<% if (addOnEnabled.tRPC) { %>
+import type { TRPCRouter } from '@/integrations/trpc/router'
+import type { TRPCOptionsProxy } from '@trpc/tanstack-react-query'
+<% } %>
+<% } %>
+<% if (hasContext) { %>
+interface MyRouterContext <% if (addOnEnabled["apollo-client"]) {%> extends ApolloClientIntegration.RouterContext <%} %>{
+<% if (addOnEnabled["tanstack-query"]) { %>
+  queryClient: QueryClient
+  <% if (addOnEnabled.tRPC) { %>
+  trpc: TRPCOptionsProxy<TRPCRouter>
+  <% } %>
+<% } %>
+}<% } %>
+
+export const Route = <% if (hasContext) { %>createRootRouteWithContext<MyRouterContext>()<% } else { %>createRootRoute<% } %>({
+<% if (addOnEnabled.paraglide) { %>
+  beforeLoad: async () => {
+    // Other redirect strategies are possible; see
+    // https://github.com/TanStack/router/tree/main/examples/react/i18n-paraglide#offline-redirect
+    if (typeof document !== 'undefined') {
+      document.documentElement.setAttribute('lang', getLocale())
+    }
+
+    <% if (!addOnEnabled.start) { %>// Client-side fallback redirect for SPA/file-router builds. Start apps should
+    // prefer server-side paraglideMiddleware (see start template server.ts).
+    if (typeof window !== 'undefined') {
+      const decision = await shouldRedirect({ url: window.location.href })
+
+      if (decision.redirectUrl) {
+        throw redirect({ href: decision.redirectUrl.href })
+      }
+    }<% } %>
+  },
+<% } %>
+<% if (addOnEnabled.start) { %>
+    head: () => ({
+    meta: [
+      {
+        charSet: 'utf-8',
+      },
+      {
+        name: 'viewport',
+        content: 'width=device-width, initial-scale=1',
+      },
+      {
+        title: 'TanStack Start Starter',
+      },
+    ],
+    links: [
+      {
+        rel: 'stylesheet',
+        href: appCss,
+      },
+    ],
+  }),
+<% } %>
+<% if (addOnEnabled.start) { %>
+  shellComponent: RootDocument
+<% } else { %>
+  component: () => (
+    <>
+  <% for(const integration of integrations.filter(i => i.type === 'provider')) { %><<%= integration.jsName %>>
+  <% } %><% if (addOns.length) { %><Header />  
+  <% } %><Outlet />
+        <TanStackDevtools
+        config={{
+          position: 'bottom-right',
+        }}
+        plugins={[
+          {
+            name: 'Tanstack Router',
+            render: <TanStackRouterDevtoolsPanel />,
+          },
+          <% for(const integration of integrations.filter(i => i.type === 'devtools')) { %><%= integration.jsName %>,<% } %>
+        ]}
+      />
+      <% for(const integration of integrations.filter(i => i.type === 'layout')) { %><<%= integration.jsName %> />
+      <% } %><% for(const integration of integrations.filter(i => i.type === 'provider').reverse()) { %></<%= integration.jsName %>>
+    <% } %>
+    </>)
+<% } %>
+})
+
+<% if (addOnEnabled.start) { %>
+function RootDocument({ children }: { children: React.ReactNode }) {
+  return (
+    <% if (addOnEnabled.paraglide) { %><html lang={getLocale()}><% } else { %><html lang="en"><% } %>
+      <head>
+        <HeadContent />
+      </head>
+      <body>
+        <% for(const integration of integrations.filter(i => i.type === 'provider')) { %><<%= integration.jsName %>>
+        <% } %><% if (addOns.length) { %><Header />  
+        <% } %>{children}
+          <TanStackDevtools
+            config={{
+              position: 'bottom-right',
+            }}
+            plugins={[
+              {
+                name: 'Tanstack Router',
+                render: <TanStackRouterDevtoolsPanel />,
+              },
+              <% for(const integration of integrations.filter(i => i.type === 'devtools')) { %><%= integration.jsName %>,<% } %>
+            ]}
+          />
+          <% for(const integration of integrations.filter(i => i.type === 'layout')) { %><<%= integration.jsName %> />
+          <% } %><% for(const integration of integrations.filter(i => i.type === 'provider').reverse()) { %></<%= integration.jsName %>>
+        <% } %><Scripts />
+      </body>
+    </html>
+  )
+}
+<% } %>

package/src/frameworks/react/project/base/src/routes/index.tsx.ejs

@@ -0,0 +1,67 @@
+<% if (codeRouter || addOnEnabled.start) { ignoreFile() } %>
+import { createFileRoute } from "@tanstack/react-router";
+import logo from "../logo.svg";<% if (!tailwind) { %>
+import "../App.css";
+<% } %>
+
+export const Route = createFileRoute("/")({
+  component: App,
+});
+
+function App() {
+  return (<% if (tailwind) { %>
+    <div className="text-center">
+      <header className="min-h-screen flex flex-col items-center justify-center bg-[#282c34] text-white text-[calc(10px+2vmin)]">
+        <img
+          src={logo}
+          className="h-[40vmin] pointer-events-none animate-[spin_20s_linear_infinite]"
+          alt="logo"
+        />
+        <p>
+          Edit <code>src/routes/index.tsx</code> and save to reload.
+        </p>
+        <a
+          className="text-[#61dafb] hover:underline"
+          href="https://reactjs.org"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          Learn React
+        </a>
+        <a
+          className="text-[#61dafb] hover:underline"
+          href="https://tanstack.com"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          Learn TanStack
+        </a>
+      </header>
+    </div>
+<% } else { %>
+    <div className="App">
+      <header className="App-header">
+        <img src={logo} className="App-logo" alt="logo" />
+        <p>
+          Edit <code>src/routes/index.tsx</code> and save to reload.
+        </p>
+        <a
+          className="App-link"
+          href="https://reactjs.org"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          Learn React
+        </a>
+        <a
+          className="App-link"
+          href="https://tanstack.com"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          Learn TanStack
+        </a>
+      </header>
+    </div>
+<% } %>  );
+}

package/src/frameworks/react/project/base/src/styles.css.ejs

@@ -0,0 +1,15 @@
+<% if (tailwind) { %>@import "tailwindcss";
+<% } %>
+body {
+  <% if (tailwind) { %>@apply m-0;<% } else { %>margin: 0;<% } %>
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
+    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+code {
+  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
+    monospace;
+}

package/src/frameworks/react/project/base/tsconfig.json.ejs

@@ -0,0 +1,30 @@
+<% if (!typescript) { ignoreFile() } %>{
+  <% if (addOnEnabled.eslint) { %>"include": ["**/*.ts", "**/*.tsx", "eslint.config.js", "prettier.config.js", "vite.config.js"],
+  <% } else { %>"include": ["**/*.ts", "**/*.tsx"],<% } %>
+  "compilerOptions": {
+    "target": "ES2022",
+    "jsx": "react-jsx",
+    "module": "ESNext",
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "types": ["vite/client"],
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,<% if (addOnEnabled.paraglide) { %>
+    "allowJs": true,<% } %>
+    "verbatimModuleSyntax": <%= addOnEnabled['start'] ? 'false' : 'true' %>,
+    "noEmit": true,
+
+    /* Linting */
+    "skipLibCheck": true,
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true,
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  }
+}

package/src/frameworks/react/project/base/vite.config.ts.ejs

@@ -0,0 +1,33 @@
+<% if (addOnEnabled.start) { ignoreFile() } %>import { defineConfig } from "vite";
+import { devtools } from '@tanstack/devtools-vite'<% if (addOnEnabled.paraglide) { %>
+import { paraglideVitePlugin } from "@inlang/paraglide-js"<% } %>
+import viteReact from "@vitejs/plugin-react";
+<% if (tailwind) { %>
+import tailwindcss from "@tailwindcss/vite";
+<% } %><%if (fileRouter) { %>
+import { tanstackRouter } from "@tanstack/router-plugin/vite";<% } %><% if (addOnEnabled['module-federation']) { %>
+import { federation } from "@module-federation/vite";<% } %>
+import { fileURLToPath, URL } from 'node:url';<% if (addOnEnabled['module-federation']) { %>
+import federationConfig from "./module-federation.config.js";<% } %><% for(const integration of integrations.filter(i => i.type === 'vite-plugin')) { %><%- integrationImportContent(integration) %>
+<% } %>
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [devtools(), <% if (addOnEnabled.paraglide) { %>paraglideVitePlugin({
+    project: './project.inlang',
+    outdir: './src/paraglide',
+    strategy: ['url'],
+  }), <% } %><% for(const integration of integrations.filter(i => i.type === 'vite-plugin')) { %><%- integrationImportCode(integration) %>,<% } %> <% if(fileRouter) { %>tanstackRouter({
+    target: "react",
+    autoCodeSplitting: true,
+  }), <% } %>viteReact(<% if (addOnEnabled.compiler) { %>{
+    babel: {
+      plugins: ["babel-plugin-react-compiler"],
+    },
+  }<% } %>)<% if (tailwind) { %>, tailwindcss()<% } %><% if (addOnEnabled['module-federation']) { %>, federation(federationConfig)<% } %>],
+  resolve: {
+    alias: {
+      '@': fileURLToPath(new URL('./src', import.meta.url)),
+    },
+  }
+});

package/src/frameworks/react/project/packages.json

@@ -0,0 +1,22 @@
+{
+  "typescript": {
+    "devDependencies": {
+      "@types/react": "^19.2.0",
+      "@types/node": "^22.10.2",
+      "@types/react-dom": "^19.2.0",
+      "typescript": "^5.7.2"
+    }
+  },
+  "tailwindcss": {
+    "dependencies": {
+      "@tailwindcss/vite": "^4.0.6",
+      "tailwindcss": "^4.0.6",
+      "lucide-react": "^0.545.0"
+    }
+  },
+  "file-router": {
+    "dependencies": {
+      "@tanstack/router-plugin": "^1.132.0"
+    }
+  }
+}

package/src/frameworks/react/toolchains/biome/assets/biome.json

@@ -0,0 +1,36 @@
+{
+	"$schema": "https://biomejs.dev/schemas/2.2.4/schema.json",
+	"vcs": {
+		"enabled": false,
+		"clientKind": "git",
+		"useIgnoreFile": false
+	},
+	"files": {
+		"ignoreUnknown": false,
+		"includes": [
+			"**/src/**/*",
+			"**/.vscode/**/*",
+			"**/index.html",
+			"**/vite.config.ts",
+			"!**/src/routeTree.gen.ts",
+			"!**/src/styles.css"
+		]
+	},
+	"formatter": {
+		"enabled": true,
+		"indentStyle": "tab"
+	},
+	"assist": { "actions": { "source": { "organizeImports": "on" } } },
+	"linter": {
+		"enabled": true,
+		"rules": {
+			"recommended": true
+		}
+	},
+	"javascript": {
+		"formatter": {
+			"quoteStyle": "double"
+		}
+	}
+}
+

package/src/frameworks/react/toolchains/biome/info.json

@@ -0,0 +1,12 @@
+{
+  "name": "Biome",
+  "description": "Biome toolchain support.",
+  "phase": "setup",
+  "type": "toolchain",
+  "category": "tooling",
+  "exclusive": ["linter"],
+  "color": "#60A5FA",
+  "priority": 2,
+  "modes": ["code-router", "file-router"],
+  "link": "https://biomejs.dev"
+}

package/src/frameworks/react/toolchains/biome/package.json

@@ -0,0 +1,10 @@
+{
+  "scripts": {
+    "format": "biome format",
+    "lint": "biome lint",
+    "check": "biome check"
+  },
+  "devDependencies": {
+    "@biomejs/biome": "2.2.4"
+  }
+}

package/src/frameworks/react/toolchains/biome/small-logo.svg

@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg viewBox="0 0 64 55.425" width="64" height="55.425" version="1.0" xmlns="http://www.w3.org/2000/svg">
+ <rect id="background" width="100%" height="100%" fill="none" />
+ <path id="emblem" d="m32 0-14.255 24.69c5.409-1.6676 11.228-1.9148 16.869-0.58434l4.8177 1.1372-4.5328 19.22-4.8247-1.1372c-5.9293-1.3987-11.628 1.716-14.036 6.6851l-4.4595-2.1575c3.4034-7.0291 11.424-11.285 19.636-9.3476l2.2595-9.579c-8.0938-1.9081-16.624-9e-3 -23.145 5.153-6.5204 5.1607-10.329 13.028-10.329 21.344l64 7.9e-4z" fill="#60a5fa" stroke-linecap="square" stroke-width="4.8768" style="paint-order:markers fill stroke" />
+</svg>

package/src/frameworks/react/toolchains/eslint/assets/_dot_prettierignore

@@ -0,0 +1,3 @@
+package-lock.json
+pnpm-lock.yaml
+yarn.lock

package/src/frameworks/react/toolchains/eslint/assets/eslint.config.js

@@ -0,0 +1,5 @@
+//  @ts-check
+
+import { tanstackConfig } from '@tanstack/eslint-config'
+
+export default [...tanstackConfig]

package/src/frameworks/react/toolchains/eslint/assets/prettier.config.js

@@ -0,0 +1,10 @@
+//  @ts-check
+
+/** @type {import('prettier').Config} */
+const config = {
+  semi: false,
+  singleQuote: true,
+  trailingComma: "all",
+};
+
+export default config;

package/src/frameworks/react/toolchains/eslint/info.json

@@ -0,0 +1,12 @@
+{
+  "name": "ESLint",
+  "description": "ESLint + Prettier toolchain support.",
+  "phase": "setup",
+  "type": "toolchain",
+  "category": "tooling",
+  "exclusive": ["linter"],
+  "color": "#4B32C3",
+  "priority": 0,
+  "modes": ["code-router", "file-router"],
+  "link": "https://eslint.org"
+}

package/src/frameworks/react/toolchains/eslint/package.json

@@ -0,0 +1,11 @@
+{
+  "scripts": {
+    "lint": "eslint",
+    "format": "prettier",
+    "check": "prettier --write . && eslint --fix"
+  },
+  "devDependencies": {
+    "@tanstack/eslint-config": "^0.3.0",
+    "prettier": "^3.5.3"
+  }
+}

package/src/frameworks/react/toolchains/eslint/small-logo.svg

@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg height="285.09601" viewBox="0 0 323.99971 285.09601" width="323.99973" xmlns="http://www.w3.org/2000/svg">
+   <g transform="matrix(1.2548929 0 0 1.2548929 -22.9868 -19.949332)">
+      <path d="m97.021 99.016l48.432-27.962c1.212-.7 2.706-.7 3.918 0l48.433 27.962c1.211.7 1.959 1.993 1.959 3.393v55.924c0 1.399-.748 2.693-1.959 3.394l-48.433 27.962c-1.212.7-2.706.7-3.918 0l-48.432-27.962c-1.212-.7-1.959-1.994-1.959-3.394v-55.924c.001-1.4.748-2.693 1.959-3.393" fill="#8080F2"/>
+      <path d="m273.336 124.488l-57.867-100.672c-2.102-3.64-5.985-6.325-10.188-6.325h-115.736c-4.204 0-8.088 2.685-10.19 6.325l-57.867 100.45c-2.102 3.641-2.102 8.236 0 11.877l57.867 99.847c2.102 3.64 5.986 5.501 10.19 5.501h115.735c4.203 0 8.087-1.805 10.188-5.446l57.867-100.01c2.104-3.639 2.104-7.907.001-11.547m-47.917 48.41c0 1.48-.891 2.849-2.174 3.59l-73.71 42.527c-1.282.74-2.888.74-4.17 0l-73.767-42.527c-1.282-.741-2.179-2.109-2.179-3.59v-85.055c0-1.481.884-2.849 2.167-3.59l73.707-42.527c1.282-.741 2.886-.741 4.168 0l73.772 42.527c1.283.741 2.186 2.109 2.186 3.59z" fill="#4b32c3"/>
+   </g>
+</svg>

package/src/frameworks/solid/add-ons/better-auth/README.md

@@ -0,0 +1,32 @@
+## Setting up Better Auth
+
+1. Generate and set the `BETTER_AUTH_SECRET` environment variable in your `.env.local`:
+
+   ```bash
+   npx @better-auth/cli secret
+   ```
+
+2. Visit the [Better Auth documentation](https://www.better-auth.com) to unlock the full potential of authentication in your app.
+
+### Adding a Database (Optional)
+
+Better Auth can work in stateless mode, but to persist user data, add a database:
+
+```typescript
+// src/lib/auth.ts
+import { betterAuth } from "better-auth";
+import { Pool } from "pg";
+
+export const auth = betterAuth({
+  database: new Pool({
+    connectionString: process.env.DATABASE_URL,
+  }),
+  // ... rest of config
+});
+```
+
+Then run migrations:
+
+```bash
+npx @better-auth/cli migrate
+```

package/src/frameworks/solid/add-ons/better-auth/assets/_dot_env.local.append

@@ -0,0 +1,3 @@
+# Better Auth configuration
+BETTER_AUTH_URL=http://localhost:3000
+BETTER_AUTH_SECRET= # Generate a secret key: `npx @better-auth/cli secret`