Dashboard UI Kit

Dashboard UI kit installation

Install kit as npm package. Minimum React version is 16.8.x since the package is using react hooks.

Install packages

yarn add @duik/it@latest classnames react react-dom

Include CSS

Include styling. Do this only once per app!

// include everything
import '@duik/it/dist/styles.css'

// including only some component styles
import '@duik/core/dist/styles.css'
import '@duik/{your-component}/dist/styles.css'
import '@duik/{your-other-component}/dist/styles.css'

Fonts

Include fonts. The base font family of the Dashboard UI kit is Roboto and Roboto Mono. Feel free to modify the import (e.g. including support for extended characters).

<link href="https://fonts.googleapis.com/css?family=Roboto+Mono|Roboto:300,400,500&display=swap" rel="stylesheet">

Starting using the kit

Let's render a simple button. By importing @duik/it, we are including the whole package in our build.

import { Button } from '@duik/it'

const MyApp = () => {
  return (
    <Button primary>My First DUIK Button</Button>
  )
}

You can also import only components you need to reduce the build size.

import Button from '@duik/button
// or import { Button } from '@duik/button

const MyApp = () => {
  return (
    <Button primary>My First DUIK Button</Button>
  )
}