SolidBase can be added to an existing Solid + Vite project in a few simple steps.
Install @kobalte/solidbase
To install SolidBase, run the following command in your project's root directory:
npm i @kobalte/solidbasepnpm add @kobalte/solidbaseyarn add @kobalte/solidbasebun add @kobalte/solidbasedeno add npm:@kobalte/solidbaseConfigure 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.
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> );}SolidBase prerenders your pages by default, so data-theme will probably be incorrect in the initial HTML.
To account for this, this small script will automatically be injected to correct the theme before the page is rendered.
Done!
Your project is now setup with the default SolidBase theme! You can now create Markdown routes in your project that take advantage of SolidBase's Markdown Extensions, and customise your project's appearance by customising the default theme or creating a new theme.
Last updated: 10/3/26, 11:39 PM