Some options may not fully work or be documented.
Getting Started
SolidBase wraps your SolidStart config rather than wrapping Start itself, so you can add SolidBase to most existing Start projects or create a new one.
Creating a New Project
Follow Start's getting started guide
to create a new project.
We'd recommend using the basic
preset as it includes @solidjs/router
,
and recommend against the with-mdx
preset as SolidBase will provide MDX spport for you.
Adding SolidBase to Your Project
Install @kobalte/solidbase
:
npm i @kobalte/solidbase
pnpm add @kobalte/solidbase
yarn add @kobalte/solidbase
bun add @kobalte/solidbase
deno add npm:@kobalte/solidbase
In 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 */));
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>
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,
a small script will automatically be injected to correct the theme before the page is rendered.
Your project is now setup with the default SolidBase theme!
Last updated: 3/12/25, 10:15 PM