Layout Components

Components for page structure and layout.

Prerequisites

Complete the installation
Import styles: import '@tetherto/mdk-react-devkit/styles.css'

Accordion

import { Accordion } from '@tetherto/mdk-react-devkit'

Collapsible panel with a title trigger and animated content area. Exports both a high-level Accordion wrapper and composable primitives (AccordionRoot, AccordionItem, AccordionTrigger, AccordionContent).

Notes

Accordion wraps the primitives with type="multiple" and a single hard-coded item value; use AccordionRoot directly when you need multi-item control.
toggleIconPosition="right" swaps to PlusIcon/MinusIcon style; "left" uses ChevronDown/ChevronRight.

Example

/**
 * Runnable example for Accordion.
 */
import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionRoot,
  AccordionTrigger,
} from '@tetherto/mdk-react-devkit'

export const AccordionExample = () => (
  <div className="mdk-example-col">
    <Accordion title="Basic Accordion" isOpened>
      <p>Collapsed/expanded content goes here. Supports any React node as children.</p>
    </Accordion>

    <Accordion title="Solid Background" solidBackground>
      <p>This variant uses a solid background for the accordion panel.</p>
    </Accordion>

    <AccordionRoot type="multiple">
      <AccordionItem value="item-1">
        <AccordionTrigger toggleIconPosition="right">Custom trigger position</AccordionTrigger>
        <AccordionContent>
          <p>Content for item 1 using low-level Accordion primitives.</p>
        </AccordionContent>
      </AccordionItem>
      <AccordionItem value="item-2">
        <AccordionTrigger>Another section</AccordionTrigger>
        <AccordionContent>
          <p>Content for item 2.</p>
        </AccordionContent>
      </AccordionItem>
    </AccordionRoot>
  </div>
)

@tetherto/mdk-react-devkit

Import the public APIs on this page from @tetherto/mdk-react-devkit.

`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>s as children for full control.

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>. Pass a unique value so Radix can track open/closed state; wrap an <AccordionTrigger> and an <AccordionContent> as children.

agent-ready

`AccordionTrigger`

Accordion Trigger component (header/button)

agent-ready

Props

Prop	Type	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

Handles three states: - Loading: Shows skeleton loader - No data: Shows empty state placeholder - Has data: Shows chart content

agent-ready

Props

Prop	Type	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	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	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

Handles lazy loading with a fallback spinner while the component loads. Useful for code-splitting large tab components.

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

Features: - Named grid areas for layout - Responsive: stacks on mobile, grid on desktop - Auto-generates column tracks - Validates column count vs template

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`		-	-

Layout Components

On this page