Dashboard UI Kit

Apps PreviewDownload Design Package

Tabs

import { Tabs, TabItem } from '@duik/it'
import Tabs, { TabItem } from '@duik/tabs'

A simple container to evenly distribute the TabItems with ability to control the size. You can check more examples (e.g. with react-router-dom) on Building Tab Navigation page.

Basic Usage Within Widget

Widget Content

Controling size

Small

Widget Content

Extra Small

Widget Content

Prop table

className

Required: false

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

Required: false

type: React.ReactNode
Children nodes, e.g. TabItem(s)
sm

Required: false

type: boolean
render TabItem(s) with 62px height instead of 70px
xs

Required: false

type: boolean
render TabItem(s) with 50px height instead of 70px
...rest

Required: false

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