Dashboard UI Kit

Apps PreviewDownload Design Package

    Table of contents

  1. Basic Example
  2. Vertical Splitting
  3. Horizontal Splitting
  4. Full Example With DUIK

Building layouts with Dashboard UI Kit

First thing to know is that you don't have to use any of these components to make your layout work in your project. You can freely build your layout with bootstrap or any other UI library as well.

On this page, we are going to show you how to build a dashboard type layout with already made components that are part of the kit and works with the kit design language. The main building blocks are using flexbox properties.

Example layout

Let's build our hypothetical layout with some help from the kit.

Top Bar
Menu
Main Content

Step 1: splitting the layout verticaly - top bar and the content

We know that we will always have these 3 segments visible. Let's cut the layout down into two parts. The top bar and the rest first, like this:


Top Bar
Menu
Main Content

For splitting the layout vertically, we can use ContainerVertical. The component has a display: flex property with flex-direction: column. The behaviour is very similar to <View /> component from react native.

The code with ContainerVertical

import {
  ContainerVertical
} from '@duik/it'

...

const MyLayout = () => (
  <div style={ { height: '400px' } }> {/* just to simulate viewport*/}
    <ContainerVertical>
      <div style={ { flexBasis: '70px', background: '#34ace0' } }>
        Top Bar
      </div>
      {/* we are adding flex-grow: 1 because we are inside flexbox element and we want to fill rest of the viewport height */}
      <div style={ { flexGrow: '1', background: '#ffb142' } }>
        Some content
      </div>
    </ContainerVertical>
  </div>
)

Result:

Top Bar
Some content

Step 2: splitting the content horizontaly - navigation and the page

The vertical split is done, let's cut down the bottom part of our layout like this:

Top Bar
Menu
Main Content

For splitting the layout horizontaly, we can use ContainerHorizontal. It works the same way as ContainerVertical, just horizontaly.


The code with ContainerHorizontal

import {
  ContainerVertical,
  ContainerHorizontal,
} from '@duik/it'

...

const MyLayout = () => (
  <div style={ { height: '400px' } }> {/* just to simulate viewport*/}
    <ContainerVertical>
      <div style={ { flexBasis: '70px', background: '#34ace0' } }>
        Top Bar
      </div>
      <ContainerHorizontal>
        <div style={ { background: '#ff5252', flexBasis: '30%' } }>
          Menu
        </div>
        <div style={ { background: '#ffb142', flexBasis: '70%' } }>
          Main Content
        </div>
      </ContainerHorizontal>
    </ContainerVertical>
  </div>
)

Result:

Top Bar
Menu
Main Content

Full Example: Using duik components in the layout

If you generally like the layout of the UI Kit, you can also use the predefined components to build the layout quickly. Here is an simple example, in which we will be using:


For splitting the layout horizontaly, we can use ContainerHorizontal. It works the same way as ContainerVertical, just horizontaly.

The code

With very little code, you can build quite complex interface. Of course, you should split the code into multiple files!

<div
  style={{
    background: 'var(--bg-base)',
    border: '1px solid var(--border-color-base)',
    height: '400px'
  }}
>
  <ContainerVertical>
    <TopBar>
      <TopBarSection>
        <TopBarTitle>
          Dashboard
        </TopBarTitle>
      </TopBarSection>
      <TopBarSection>
        <TopBarLinkContainer>
          <TopBarLink>
            Menu item 1
          </TopBarLink>
          <TopBarLink className="active" href="#">
            Menu item 1
          </TopBarLink>
        </TopBarLinkContainer>
      </TopBarSection>
    </TopBar>
    <ContainerHorizontal>
      <NavPanel>
        <NavSection>
          <NavSectionTitle>
            Menu
          </NavSectionTitle>
          <NavLink highlighted>
            Hello item
          </NavLink>
          <NavLink highlighted>
            Title for link
          </NavLink>
        </NavSection>
      </NavPanel>
      <ScrollArea>
        <WidgetContainer>
          <Widget padding>
            <h2>
              Title
            </h2>
          </Widget>
        </WidgetContainer>
      </ScrollArea>
    </ContainerHorizontal>
  </ContainerVertical>
</div>

Result