Adding to Existing Project

Install @kobalte/solidbase

Install SolidBase and the Solid 2 packages it is built on by running the following commands in your project's root directory:

npm i @kobalte/solidbase solid-js@2.0.0-rc.16 @solidjs/web@2.0.0-rc.16 @solidjs/router@2.0.0-next.37

pnpm add @kobalte/solidbase solid-js@2.0.0-rc.16 @solidjs/web@2.0.0-rc.16 @solidjs/router@2.0.0-next.37

yarn add @kobalte/solidbase solid-js@2.0.0-rc.16 @solidjs/web@2.0.0-rc.16 @solidjs/router@2.0.0-next.37

bun add @kobalte/solidbase solid-js@2.0.0-rc.16 @solidjs/web@2.0.0-rc.16 @solidjs/router@2.0.0-next.37

deno add npm:@kobalte/solidbase solid-js@2.0.0-rc.16 @solidjs/web@2.0.0-rc.16 @solidjs/router@2.0.0-next.37

npm i @solidjs/vite-plugin@3.0.0-next.47 vite -D

pnpm add @solidjs/vite-plugin@3.0.0-next.47 vite -D

yarn add @solidjs/vite-plugin@3.0.0-next.47 vite -D

bun add @solidjs/vite-plugin@3.0.0-next.47 vite -d

deno add npm:@solidjs/vite-plugin@3.0.0-next.47 vite -D

Keep @solidjs/router on the same version SolidBase uses, so your app and SolidBase share one router. The same applies to @solidjs/meta@1.0.0-next.2 if you use it yourself.

Configure Vite

SolidBase runs on @solidjs/vite-plugin in start mode (the serving layer that replaced SolidStart). Create a createSolidBase instance and add its plugin next to the Solid plugin, using startConfig() for SolidBase's defaults (SSR start mode, .md/.mdx compiled as routes):

import { createSolidBase } from "@kobalte/solidbase/config";
import defaultTheme from "@kobalte/solidbase/default-theme";
import solid from "@solidjs/vite-plugin";
import { defineConfig } from "vite";

const solidBase = createSolidBase(defaultTheme);

export default defineConfig({
  plugins: [
    solidBase.plugin({
      // SolidBase options here
    }),
    solid(solidBase.startConfig()),
  ],
});

Pages are discovered from src/routes by SolidBase's file-system routing (built on filesystem-routing, the convention SolidStart used), and your pages are prerendered into dist/client after vite build. Pass fileRoutes: false or prerender: false to take over either.

Configure TypeScript

Solid 2's JSX types live in @solidjs/web, so point jsxImportSource at it:

{
  "compilerOptions": {
    "module": "ESNext",
    "moduleResolution": "bundler",
    "jsx": "preserve",
    "jsxImportSource": "@solidjs/web",
    "strict": true,
    "skipLibCheck": true
  }
}

Then reference SolidBase's types once, for example in src/global.d.ts. They declare the virtual modules your app imports: virtual:file-routes, virtual:solidbase/* and the ~icons/* icon components:

/// <reference types="vite/client" />
/// <reference types="@kobalte/solidbase/types" />

Wrap Your App in SolidBaseRoot

Once SolidBase is installed and configured, you'll need to wrap your application in the SolidBaseRoot component to provide the necessary context for SolidBase to function correctly.

In src/app.tsx (the root component @solidjs/vite-plugin generates entries for), create the router from the file routes and wrap the matched content in SolidBaseRoot:

import { SolidBaseRoot } from "@kobalte/solidbase/client";
import { createRouter } from "@solidjs/router";
import { fileRoutes } from "@solidjs/router/fs";
import { pageRoutes } from "virtual:file-routes";

const Router = createRouter({ routes: fileRoutes(pageRoutes) });

export default function App() {
  return <Router>{(props) => <SolidBaseRoot>{props.children}</SolidBaseRoot>}</Router>;
}

If you already wrap the matched content in a layout of your own, put SolidBaseRoot around it.

Add HTML Attributes for SSR

To provide the lang and data-theme attributes to the html element during SSR, spread getHtmlProps() onto it in your document shell (src/Document.tsx, picked up automatically by start mode):

import { getHtmlProps } from "@kobalte/solidbase/server";
import { HydrationScript } from "@solidjs/web";
import type { ParentProps } from "solid-js";

export default function Document(props: ParentProps) {
  return (
    <html {...getHtmlProps()}>
      <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <HydrationScript />
      </head>
      <body>
        <div id="app">{props.children}</div>
      </body>
    </html>
  );
}