Layout Components
Page layouts, grids, containers, and spacing
Components for page structure and layout.
Prerequisites
- Complete the installation
- Import styles:
import '@tetherto/mdk-react-devkit/styles.css'
Components
Accordion
Vertically stacked, collapsible content panels with optional toggle icon. Renders a styled wrapper around Radix Accordion: pass title for the default header or compose <[**AccordionItem**](/reference/ui/components/layout/#accordionitem)>s as childre…
agent-ready
Props
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
title | string | ✓ | - | - |
isRow | boolean | undefined | - | - | |
isOpened | boolean | undefined | - | - | |
unpadded | boolean | undefined | - | - | |
noBorder | boolean | undefined | - | - | |
showToggleIcon | boolean | undefined | - | - | |
solidBackground | boolean | undefined | - | - | |
customLabel | React.ReactNode | - | - | |
toggleIconPosition | TAccordionToggleIconPosition | undefined | - | - | |
onValueChange | ((value: string | string[]) => void) | undefined | - | - |
AccordionContent
Accordion Content component (collapsible content area)
agent-ready
AccordionItem
Single collapsible row within an <[**Accordion**](/reference/ui/components/layout/#accordion)>. Pass a unique value so Radix can track open/closed state; wrap an <[**AccordionTrigger**](/reference/ui/components/layout/#accordiontrigger)> and an <[**AccordionContent**](/reference/ui/components/layout/#accordioncontent)> as children.
agent-ready
AccordionTrigger
Accordion Trigger component (header/button)
agent-ready
Props
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
timestamp | string | undefined | - | - | |
showToggleIcon | boolean | undefined | - | - | |
toggleIconPosition | TAccordionToggleIconPosition | undefined | - | - | |
customLabel | React.ReactNode | - | - |
CardBody
Main content region of a <Card> — applies the standard inner padding and vertical rhythm.
agent-ready
CardFooter
Bottom action/metadata row of a <Card>, typically used for buttons, timestamps, or secondary info.
agent-ready
CardHeader
Top region of a <Card> that groups the title, optional subtitle, and an action slot.
agent-ready
ChartWrapper
ChartWrapper - Wrapper component for charts with loading and empty states
agent-ready
Props
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
children | React.ReactNode | - | Chart content to render | |
data | unknown[] | Record<string, unknown> | undefined | - | Chart data object (for LineChart with datasets) | |
dataset | unknown[] | Record<string, unknown> | undefined | - | Chart dataset (for BarChart with direct dataset) | |
isLoading | boolean | undefined | false | Loading state | |
customLoader | React.ReactNode | - | Custom loader component to show when loading (overrides default spinner) | |
showNoDataPlaceholder | boolean | undefined | true | Whether to show "no data" placeholder when data is empty | |
customNoDataMessage | React.ReactNode | - | Custom message or component to show when no data | |
minHeight | number | undefined | - | Minimum height for the container (in pixels) | |
loadingMinHeight | number | undefined | - | Minimum height for the loading skeleton (in pixels) Falls back to minHeight if not provided | |
className | string | undefined | - | Custom className for the container |
Divider
Thin horizontal or vertical rule used to separate logical sections of a layout.
agent-ready
Props
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
orientation | DividerOrientation | undefined | - | Line orientation | |
dashed | boolean | undefined | - | Line style | |
dotted | boolean | undefined | - | - | |
children | React.ReactNode | - | Text or node rendered in the middle of the divider | |
align | "center" | "left" | "right" | undefined | - | Horizontal alignment of the label | |
plain | boolean | undefined | - | Plain text style — no border around label | |
className | string | undefined | - | Custom className |
LabeledCard
Card variant that pairs a tiny label above the body — used for compact stat or metadata blocks.
agent-ready
Props
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
isDark | boolean | - | - | |
className | string | - | - | |
hasNoWrap | boolean | - | - | |
isRelative | boolean | - | - | |
isFullWidth | boolean | - | - | |
hasNoMargin | boolean | - | - | |
hasNoBorder | boolean | - | - | |
isFullHeight | boolean | - | - | |
isScrollable | boolean | - | - | |
label | React.ReactNode | - | - | |
children | React.ReactNode | - | - | |
getNavigateOptions | (label: string) => Partial<{ href: string; target: string; }> | - | - |
LazyTabWrapper
LazyTabWrapper - Wrapper for lazy-loaded tab components with Suspense
agent-ready
Props
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
Component | React.ComponentType<{ data?: T | undefined; }> | ✓ | - | Lazy-loaded component to render |
data | T | undefined | - | Data to pass to the component | |
fallback | React.ReactNode | <Spinner /> | Custom fallback component while loading | |
spinnerType | "circle" | "square" | undefined | 'circle' | Spinner type when using default fallback |
Mosaic
Mosaic - Grid layout component with named areas
agent-ready
Props
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
template | string[] | string[][] | ✓ | - | - |
gap | string | undefined | - | - | |
rowHeight | string | undefined | - | - | |
columns | string | string[] | undefined | - | - | |
children | React.ReactNode | ✓ | - | - |
className | string | undefined | - | - |
Tabs
Tabs component for organizing content into panels
agent-ready
Props
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
variant | TabsVariant | undefined | - | - |