Some options may not fully work or be documented.
Adding to Existing Project
SolidBase wraps your SolidStart config rather than wrapping Start itself, if your project isn't SolidStart you'll need create a new one.
Add SolidBase to Your Project
Install @kobalte/solidbase:
npm i @kobalte/solidbasepnpm add @kobalte/solidbaseyarn add @kobalte/solidbasebun add @kobalte/solidbasedeno add npm:@kobalte/solidbaseIn your project's app.config, wrap the config being passed to defineConfig with withSolidBase.
This will configure SolidBase with the default theme.
import { defineConfig } from "@solidjs/start/config";import { withSolidBase } from "@kobalte/solidbase/config";
export default defineConfig(withSolidBase(/* your SolidStart config */));Wrap Your App in SolidBaseRoot
Add the SolidBaseRoot component to the root of your project's 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>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> )} />));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: 6/1/25, 11:49 PM
Edit this page on GitHub