1. Default Layout
  2. Installation

Default Layout


Want something that just "looks good?" The next steps will get the default layout set up for you.

Quick Installation

The quick install option will offer to scaffold the default layout for you. Feel free to skip to the next section if you've already set up your application.

Manual Installation

  1. Add Color Scheme Script

    Add the following script inside the <head> tag of your app.html file.

      <!-- ... -->
        const key = 'svelteness::color-scheme';
        const scheme = localStorage[key];
        const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
        if (scheme === 'dark' || (scheme !== 'light' && prefersDark)) {
        } else {
  2. Copy Font Files

    Copy the theme font files to your lib folder.

    cp -R node_modules/@svelteness/kit-docs/client/fonts src/fonts
  3. Import Assets

    Import theme polyfills and styles into your layout file.

      import '@svelteness/kit-docs/client/polyfills/index.js';
      import '@svelteness/kit-docs/client/styles/normalize.css';
      import '@svelteness/kit-docs/client/styles/fonts.css';
      import '@svelteness/kit-docs/client/styles/theme.css';
      import '@svelteness/kit-docs/client/styles/vars.css';
  4. Add Default Layout

    Import KitDocsLayout and add it to your layout markup.

      import { KitDocsLayout } from '@svelteness/kit-docs';
      // ...
      /** @type {import('@svelteness/kit-docs').NavbarConfig} */
      const navbar = {
        links: [{ title: 'Documentation', slug: '/docs', match: /\/docs/ }],
      <KitDocsLayout {navbar} {sidebar}>
        <slot />
  5. Set Brand Colors

    Set your brand colors using RGB. You can play around in the browser to find what works.

      :global(:root) {
        --kd-color-brand-rgb: 233, 127, 6;
      :global(:root.dark) {
        --kd-color-brand-rgb: 213, 149, 76;


The default layout is built with Tailwind. If you're also using Tailwind in your project, we recommend removing certain CSS files so you don't end up with duplicate utility classes.

  1. First, remove the following CSS imports from your layout file:
- import '@svelteness/kit-docs/client/styles/normalize.css';
- import '@svelteness/kit-docs/client/styles/theme.css';
  1. Next, add our client files to your Tailwind contents config:
module.exports = {
  content: ['./src/**/*.{html,svelte}', './node_modules/@svelteness/kit-docs/client/**/*.svelte'],
  1. Finally, copy over our Tailwind config file from GitHub and adjust values as desired. Ignore the corePlugins and fontFamily settings.