Layout components

Layout components provide structure and organization for your application's UI.

Card

Flexible container component with optional header, body, and footer slots.

Import

import { Card, CardHeader, CardBody, CardFooter } from '@mdk/core'

Props

Prop	Type	Default	Description
`className`	`string`	none	Additional CSS class
`onClick`	`function`	none	Click handler (adds clickable styling)
`children`	`ReactNode`	none	Card content

Basic usage

<Card>
  <Card.Header>Title</Card.Header>
  <Card.Body>Content goes here</Card.Body>
  <Card.Footer>Actions</Card.Footer>
</Card>

Default children are automatically wrapped in the body slot:

<Card>
  <Card.Header>Title</Card.Header>
  This content goes to the body automatically
</Card>

Clickable card

<Card onClick={() => navigate('/details')}>
  <Card.Header>Click me</Card.Header>
  <Card.Body>Navigates on click</Card.Body>
</Card>

Styling

.mdk-card: Root container
.mdk-card--clickable: Applied when onClick is provided
.mdk-card__header: Header slot
.mdk-card__body: Body slot
.mdk-card__footer: Footer slot

Dialog

Modal dialog built on Radix UI primitives.

Import

import {
  Dialog,
  DialogTrigger,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogDescription,
  DialogFooter,
  DialogClose,
} from '@mdk/core'

`DialogContent` props

Prop	Type	Default	Description
`title`	`string`	none	Dialog title
`description`	`string`	none	Dialog description
`closable`	`boolean`	`false`	Show close button
`onClose`	`function`	none	Close callback
`closeOnClickOutside`	`boolean`	`true`	Close when clicking outside
`closeOnEscape`	`boolean`	`true`	Close on Escape key
`bare`	`boolean`	`false`	Minimal header styling

Basic usage

<Dialog>
  <DialogTrigger asChild>
    <Button>Open Dialog</Button>
  </DialogTrigger>
  <DialogContent title="Confirm Action" closable onClose={() => {}}>
    <p>Are you sure you want to proceed?</p>
    <DialogFooter>
      <DialogClose asChild>
        <Button variant="secondary">Cancel</Button>
      </DialogClose>
      <Button>Confirm</Button>
    </DialogFooter>
  </DialogContent>
</Dialog>

Styling

.mdk-dialog__overlay: Background overlay
.mdk-dialog__content: Dialog container
.mdk-dialog__header: Header area
.mdk-dialog__title: Title text
.mdk-dialog__description: Description text
.mdk-dialog__footer: Footer area

Accordion

Collapsible content sections built on Radix UI primitives.

Import

import {
  Accordion,
  AccordionItem,
  AccordionTrigger,
  AccordionContent,
} from '@mdk/core'

Accordion props

Prop	Type	Default	Description
`title`	`string`	`''`	Accordion header title
`isOpened`	`boolean`	`false`	Initially expanded
`isRow`	`boolean`	`false`	Row layout for content
`unpadded`	`boolean`	`false`	Remove content padding
`noBorder`	`boolean`	`false`	Remove trigger border
`solidBackground`	`boolean`	`false`	Solid background color
`showToggleIcon`	`boolean`	`true`	Show expand/collapse icon
`toggleIconPosition`	`'left' \| 'right'`	`'left'`	Icon position
`customLabel`	`ReactNode`	none	Custom label next to title
`onValueChange`	`function`	none	Callback when state changes

Basic usage

<Accordion title="FAQ Section">
  <p>This content can be expanded or collapsed.</p>
</Accordion>

With custom label

<Accordion
  title="System Status"
  customLabel={<Badge variant="success">Active</Badge>}
  showToggleIcon={false}
>
  <p>All systems operational.</p>
</Accordion>

Multiple items

<AccordionRoot type="multiple">
  <AccordionItem value="item-1">
    <AccordionTrigger>Section 1</AccordionTrigger>
    <AccordionContent>Content 1</AccordionContent>
  </AccordionItem>
  <AccordionItem value="item-2">
    <AccordionTrigger>Section 2</AccordionTrigger>
    <AccordionContent>Content 2</AccordionContent>
  </AccordionItem>
</AccordionRoot>

Styling

.mdk-accordion: Root container
.mdk-accordion--solid-background: Solid background variant
.mdk-accordion__item: Individual item
.mdk-accordion__trigger: Clickable header
.mdk-accordion__content: Collapsible content area

Tabs

Tab navigation for organizing content into panels.

Import

import { Tabs, TabsList, TabsTrigger, TabsContent } from '@mdk/core'

Props

Prop	Type	Default	Description
`defaultValue`	`string`	none	Initially active tab
`value`	`string`	none	Controlled active tab
`onValueChange`	`function`	none	Tab change callback
`variant`	`'default' \| 'side'`	`'default'`	Tab layout variant

Basic usage

<Tabs defaultValue="overview">
  <TabsList>
    <TabsTrigger value="overview">Overview</TabsTrigger>
    <TabsTrigger value="settings">Settings</TabsTrigger>
    <TabsTrigger value="logs" disabled>Logs</TabsTrigger>
  </TabsList>
  <TabsContent value="overview">
    Overview content here
  </TabsContent>
  <TabsContent value="settings">
    Settings content here
  </TabsContent>
</Tabs>

Side variant

<Tabs defaultValue="tab1" variant="side">
  <TabsList variant="side">
    <TabsTrigger value="tab1" variant="side">Tab 1</TabsTrigger>
    <TabsTrigger value="tab2" variant="side">Tab 2</TabsTrigger>
  </TabsList>
  <TabsContent value="tab1">Content 1</TabsContent>
  <TabsContent value="tab2">Content 2</TabsContent>
</Tabs>

Styling

.mdk_tabs: Root container
.mdk_tabs__list: Tab button container
.mdk_tabs__list--side: Side variant list
.mdk_tabs__trigger: Individual tab button
.mdk_tabs__content: Tab panel content

Navigation sidebar with expand/collapse and overlay modes.

Import

import {
  Sidebar,
  useSidebarExpandedState,
  useSidebarSectionState,
  clearSidebarState,
} from '@mdk/core'

Props

Prop	Type	Default	Description
`items`	`SidebarMenuItem[]`	none	Required: Menu items array
`activeId`	`string`	none	Currently active item ID
`expanded`	`boolean`	none	Controlled expanded state
`defaultExpanded`	`boolean`	`false`	Initial expanded state
`visible`	`boolean`	`true`	Sidebar visibility
`overlay`	`boolean`	`false`	Overlay mode (mobile)
`header`	`ReactNode`	none	Header content
`onItemClick`	`function`	none	Item click callback
`onExpandedChange`	`function`	none	Expand state callback
`onClose`	`function`	none	Close callback (overlay mode)

`SidebarMenuItem` type

type SidebarMenuItem = {
  id: string
  label: string
  icon?: ReactNode
  href?: string
  children?: SidebarMenuItem[]
  disabled?: boolean
}

Basic usage

const items = [
  { id: 'dashboard', label: 'Dashboard', icon: <DashboardIcon /> },
  { id: 'settings', label: 'Settings', icon: <SettingsIcon /> },
  {
    id: 'reports',
    label: 'Reports',
    icon: <ReportsIcon />,
    children: [
      { id: 'daily', label: 'Daily' },
      { id: 'weekly', label: 'Weekly' },
    ],
  },
]

<Sidebar
  items={items}
  activeId="dashboard"
  onItemClick={(item) => navigate(item.href)}
/>

With persisted state

function App() {
  const [expanded, setExpanded] = useSidebarExpandedState(true)
  
  return (
    <Sidebar
      items={items}
      expanded={expanded}
      onExpandedChange={setExpanded}
    />
  )
}

Styling

.mdk-sidebar: Root container
.mdk-sidebar--expanded: Expanded state
.mdk-sidebar--hidden: Hidden state
.mdk-sidebar--overlay: Overlay mode
.mdk-sidebar__toggle: Expand/collapse button
.mdk-sidebar__menu: Menu container
.mdk-sidebar__backdrop: Overlay backdrop

Additional layout components

Component	Description
`Popover`	Floating content panel (Radix-based)
`DropdownMenu`	Dropdown menu system (Radix-based)
`Divider`	Visual separator line
`Separator`	Horizontal/vertical separator
`LabeledCard`	Card with label decoration
`Mosaic`	Grid/mosaic layout container

Layout components

On this page