Some options may not fully work or be documented.
Adding to Existing Project
SolidBase can be added to an existing SolidStart 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/solidbaseUpdate app.config
Since SolidBase is built on top of SolidStart, you'll need to update your app.config to include SolidBase's configuration. To do this, wrap the existing configuration with withSolidBase:
import { defineConfig } from "@solidjs/start/config";import { withSolidBase } from "@kobalte/solidbase/config";
export default defineConfig(withSolidBase(/* your SolidStart config */));import { defineConfig } from "@solidjs/start/config";import { withSolidBase } from "@kobalte/solidbase/config";
export default defineConfig(withSolidBase(/* your SolidStart config */));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 your app.tsx, import SolidBaseRoot from @kobalte/solidbase/client and wrap it around Router:
import { SolidBaseRoot } from "@kobalte/solidbase/client";import { Router } from "@solidjs/router";import { FileRoutes } from "@solidjs/start/router";
export default function App() { return ( <Router root={SolidBaseRoot}> <FileRoutes /> </Router> );}import { SolidBaseRoot } from "@kobalte/solidbase/client";import { Router } from "@solidjs/router";import { FileRoutes } from "@solidjs/start/router";
export default function App() { return ( <Router root={SolidBaseRoot}> <FileRoutes /> </Router> );}If your router already has a root component, you can wrap it with SolidBaseRoot:
<Router root={(props) => { return <SolidBaseRoot>{props.children}</SolidBaseRoot>; }}> <FileRoutes /></Router><Router root={(props) => { return <SolidBaseRoot>{props.children}</SolidBaseRoot>; }}> <FileRoutes /></Router>;Add HTML Attributes for SSR
To provide the lang and data-theme attributes to the html element during SSR,
spread getHtmlProps() onto it in entry-server:
// @refresh reloadimport { StartServer, createHandler } from "@solidjs/start/server";import { getHtmlProps } from "@kobalte/solidbase/server";
export default createHandler(() => ( <StartServer document={({ assets, children, scripts }) => ( <html {...getHtmlProps()}> ... </html> )} />));// @refresh reloadimport { StartServer, createHandler } from "@solidjs/start/server";import { getHtmlProps } from "@kobalte/solidbase/server";
export default createHandler(() => ( <StartServer document={({ assets, children, scripts }) => ( <html {...getHtmlProps()}>...</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/13/25, 4:43 PM
Edit this page on GitHub