Dashboard UI Kit

Apps PreviewDownload Design Package

Modal

import { Modal, ModalHeader, ModalBody, ModalBodySecondary, ModalFooter } from '@duik/it'
import Modal, { ModalHeader, ModalBody, ModalBodySecondary, ModalFooter } from '@duik/modal'

Dashboard UI Kit gives you several components to effectively build nice and clean modals. Modals can be used anywhere in the code structure, the actuall DOM will be rendered in the body with help of react portal.

Text control

<Avatar imgUrl="/static/media/a01.c0656cf7.jpg" />
ReactHTML Snippet
John Snow
<Avatar imgUrl="/static/media/a01.c0656cf7.jpg" name="John Snow" />
ReactHTML Snippet
John Snow
<Avatar
  imgUrl="/static/media/a01.c0656cf7.jpg"
  name={<strong>John Snow</strong>}
/>
ReactHTML Snippet
Created byNatasha Special
<Avatar
  imgUrl="/static/media/a21.9703cc6c.jpg"
  name={<strong>Natasha Special</strong>}
  textTop="Created by"
/>
ReactHTML Snippet
Natasha SpecialSenior HR Manager
<Avatar
  imgUrl="/static/media/a21.9703cc6c.jpg"
  name={<strong>Natasha Special</strong>}
  textBottom={<><strong>Senior</strong> HR Manager</>}
/>
ReactHTML Snippet

Sizes

28px
<Avatar
  imgUrl="/static/media/a02.fa362332.jpg"
  name={<strong>28px</strong>}
  sm
/>
ReactHTML Snippet
38px
<Avatar
  imgUrl="/static/media/a03.89105576.jpg"
  name={<strong>38px</strong>}
/>
ReactHTML Snippet
60px
<Avatar
  imgUrl="/static/media/a04.b4a6f3b0.jpg"
  lg
  name={<strong>60px</strong>}
/>
ReactHTML Snippet
80px
<Avatar
  imgUrl="/static/media/a05.ed29976e.jpg"
  name={<strong>80px</strong>}
  xl
/>
ReactHTML Snippet
100px
<Avatar
  imgUrl="/static/media/a06.4d47556a.jpg"
  name={<strong>100px</strong>}
  xxl
/>
ReactHTML Snippet
120px
<Avatar
  imgUrl="/static/media/a07.f7e8bebd.jpg"
  jumbo
  name={<strong>120px</strong>}
/>
ReactHTML Snippet

Multiple Images

Group ConversationJust us
<Avatar
  imgUrl={[
    '/static/media/a05.ed29976e.jpg',
    '/static/media/a15.ec9a4b77.jpg'
  ]}
  lg
  name={<strong>Just us</strong>}
  textTop="Group Conversation"
/>
ReactHTML Snippet
Group ConversationReading strong
<Avatar
  imgUrl={[
    '/static/media/a10.08642329.jpg',
    '/static/media/a11.f961f960.jpg',
    '/static/media/a22.68645ff0.jpg'
  ]}
  lg
  name={<strong>Reading strong</strong>}
  textTop="Group Conversation"
/>
ReactHTML Snippet
Group ConversationParty people
<Avatar
  imgUrl={[
    '/static/media/a09.ef0f5dd5.jpg',
    '/static/media/a07.f7e8bebd.jpg',
    '/static/media/a25.96289da0.jpg',
    '/static/media/a23.43246f05.jpg'
  ]}
  lg
  name={<strong>Party people</strong>}
  textTop="Group Conversation"
/>
ReactHTML Snippet

Placeholders

PH28px
<Avatar
  avatarPlaceholder={{
    color: 'indigo',
    content: 'PH'
  }}
  name={<strong>28px</strong>}
  sm
/>
ReactHTML Snippet
PH38px
<Avatar
  avatarPlaceholder={{
    color: 'blue',
    content: 'PH'
  }}
  name={<strong>38px</strong>}
/>
ReactHTML Snippet
PH60px
<Avatar
  avatarPlaceholder={{
    color: 'green',
    content: 'PH'
  }}
  lg
  name={<strong>60px</strong>}
/>
ReactHTML Snippet
PH80px
<Avatar
  avatarPlaceholder={{
    color: 'red',
    content: 'PH'
  }}
  name={<strong>80px</strong>}
  xl
/>
ReactHTML Snippet
PH100px
<Avatar
  avatarPlaceholder={{
    color: 'orange',
    content: 'PH'
  }}
  name={<strong>100px</strong>}
  xxl
/>
ReactHTML Snippet
PH120px
<Avatar
  avatarPlaceholder={{
    color: 'yellow',
    content: 'PH'
  }}
  jumbo
  name={<strong>120px</strong>}
/>
ReactHTML Snippet

Other elements

Top help you render status etc.

O60px
<Avatar
  imgUrl="/static/media/a04.b4a6f3b0.jpg"
  leftEl={<span>O</span>}
  lg
  name={<strong>60px</strong>}
/>
ReactHTML Snippet

Prop table

className

false

type: string
className, e.g. "my-custom-styling"
name

false

type: React.ReactNode
Name, group conversation, ...
imgUrl

false

type: string | string[]
URL or multiple URLs to the image to be displayed
avatarPlaceholder

false

type: { color: THEME_COLOR, content: React.ReactNode }
Placeholder if image is not available
textBottom

false

type: React.ReactNode
Any (text) node, such as title, ...
textTop

false

type: React.ReactNode
Any (text) node, such as title, ...
rightEl

false

type: React.ReactNode
Element to be displayed on the right side of the Avatar
leftEl

false

type: React.ReactNode
Element to be displayed on the left side of the Avatar
sm

false

type: boolean
Renders smaller avatar with height 28px
lg

false

type: boolean
Renders larger avatar with height 60px
xl

false

type: boolean
Renders larger avatar with height 80px
xxl

false

type: boolean
Renders larger avatar with height 100px
jumbo

false

type: boolean
Renders larger avatar with height 120px
...rest

false

type: any
Other properties are passed down to the wrapping element

Simple Modal

This is a simple modal