Customizing Elements#

You can customize your Dokz site logo, nav items, footer and much more, simply pass the elements you want to replace to the DokzProvider props:

jsx
1
import { DokzProvider, GithubLink, ColorModeSwitch } from 'dokz'
2
import React from 'react'
3
4
export default function App(props) {
5
    const { Component, pageProps } = props
6
    return (
7
        <DokzProvider
8
            headerItems={[
9
                <GithubLink url='https://github.com/remorses/dokz' />,
10
                <ColorModeSwitch />,
11
            ]}
12
            headerLogo={
13
                <img
14
                    src='/dokz_logo.svg'
15
                    style={{ opacity: 0.8 }}
16
                    width='100px'
17
                />
18
            }
19
            initialColorMode='dark'
20
            sidebarOrdering={{
21
                'index.mdx': 1,
22
                general: {
23
                    'getting_started.mdx': null,
24
                    'writing_mdx.mdx': null,
25
                },
26
                customizing: { 'customizing_components.mdx': null },
27
            }}
28
        >
29
            <Component {...pageProps} />
30
        </DokzProvider>
31
    )
32
}

Other customizations are possible via the DokzProvider props