Layout

Components for page structure and layout.

Prerequisites

Complete the installation

Add the dependency to your app's package.json

{
  "dependencies": {
    "@tetherto/mdk-react-devkit": "*",
    "@tetherto/mdk-react-adapter": "*",
    "@tetherto/mdk-ui-foundation": "*"
  }
}

Run npm install from the mdk/ui workspace root after your app is under apps/ so npm links workspace packages.

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

Components

@tetherto/mdk-react-devkit

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

Source

https://github.com/tetherto/mdk/blob/main/ui/packages/react-devkit/src/primitives/components/accordion/USAGE.md#props-detail

Props

Prop	Status	Type / Options	Default	Description
`customLabel`	Optional	`React.ReactNode`	-	Extra content (e.g. a badge) rendered in the trigger header
`isOpened`	Optional	`boolean`	`false`	Whether the panel starts expanded
`isRow`	Optional	`boolean`	`false`	Lays out the content area as a flex row instead of column
`noBorder`	Optional	`boolean`	`false`	Removes the bottom border from the trigger
`onValueChange`	Optional	`((value: string \| string[]) => void)`	-	Fired when the open/close state changes
`showToggleIcon`	Optional	`boolean`	`true`	Shows/hides the expand/collapse chevron icon
`solidBackground`	Optional	`boolean`	`false`	Applies a solid background to the accordion container
`title`	Optional	`string`	`""`	Header label shown in the trigger button
`toggleIconPosition`	Optional	`"left" \| "right"`	`"left"`	Side on which the toggle icon appears
`unpadded`	Optional	`boolean`	`false`	Removes the default inner padding from the content area

`AccordionContent`

Accordion Content component (collapsible content area)

agent-ready

Source

https://github.com/tetherto/mdk/blob/main/ui/packages/react-devkit/src/primitives/components/accordion/USAGE.md#props-detail

`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

Source

https://github.com/tetherto/mdk/blob/main/ui/packages/react-devkit/src/primitives/components/accordion/USAGE.md#props-detail

`AccordionTrigger`

Accordion Trigger component (header/button)

agent-ready

Source

https://github.com/tetherto/mdk/blob/main/ui/packages/react-devkit/src/primitives/components/accordion/USAGE.md#props-detail

Props

Prop	Status	Type / Options	Default	Description
`customLabel`	Optional	`React.ReactNode`	-	Slot for extra content in the trigger header
`showToggleIcon`	Optional	`boolean`	`true`	Shows/hides the toggle icon
`timestamp`	Optional	`string`	-	Forwarded to the underlying Radix trigger element; not rendered by the component
`toggleIconPosition`	Optional	`"left" \| "right"`	`"left"`	Side on which the toggle icon appears

`CardBody`

Main content region of a <Card> — applies the standard inner padding and vertical rhythm

agent-ready

Source

https://github.com/tetherto/mdk/blob/main/ui/packages/react-devkit/src/primitives/components/card/USAGE.md#props-detail

`CardFooter`

Bottom action/metadata row of a <Card>, typically used for buttons, timestamps, or secondary info

agent-ready

Source

https://github.com/tetherto/mdk/blob/main/ui/packages/react-devkit/src/primitives/components/card/USAGE.md#props-detail

`CardHeader`

Top region of a <Card> that groups the title, optional subtitle, and an action slot

agent-ready

Source

https://github.com/tetherto/mdk/blob/main/ui/packages/react-devkit/src/primitives/components/card/USAGE.md#props-detail

`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

Source

https://github.com/tetherto/mdk/blob/main/ui/packages/react-devkit/src/domain/components/chart-wrapper/index.tsx

Props

Prop	Status	Type / Options	Default	Description
`children`	Optional	`React.ReactNode`	-	Chart content to render
`className`	Optional	`string`	-	Custom className for the container
`customLoader`	Optional	`React.ReactNode`	`<Loader />`	Custom loader component to show when loading (overrides default spinner)
`customNoDataMessage`	Optional	`React.ReactNode`	-	Custom message or component to show when no data
`data`	Optional	`unknown[] \| Record<string, unknown>`	-	Chart data object (for `LineChart` with datasets)
`dataset`	Optional	`unknown[] \| Record<string, unknown>`	-	Chart dataset (for `BarChart` with direct dataset)
`isLoading`	Optional	`boolean`	`false`	Loading state
`loadingMinHeight`	Optional	`number`	`minHeight`	Minimum height for the loading skeleton (in pixels) Falls back to minHeight if not provided
`minHeight`	Optional	`number`	`400`	Minimum height for the container (in pixels)
`showNoDataPlaceholder`	Optional	`boolean`	`true`	Whether to show "no data" placeholder when data is empty

`Divider`

Thin horizontal or vertical rule used to separate logical sections of a layout

agent-ready

Source

https://github.com/tetherto/mdk/blob/main/ui/packages/react-devkit/src/primitives/components/divider/index.tsx

Props

Prop	Status	Type / Options	Default	Description
`align`	Optional	`"center" \| "left" \| "right"`	`"center"`	Horizontal alignment of the label
`children`	Optional	`React.ReactNode`	-	Text or node rendered in the middle of the divider
`className`	Optional	`string`	-	Custom className
`dashed`	Optional	`boolean`	`false`	Line style
`dotted`	Optional	`boolean`	`false`	Renders a dotted line (takes precedence over `dashed`)
`orientation`	Optional	`"horizontal" \| "vertical"`	`"horizontal"`	Line orientation
`plain`	Optional	`boolean`	`false`	Plain text style — no border around label

`LabeledCard`

Card variant that pairs a tiny label above the body — used for compact stat or metadata blocks

agent-ready

Source

https://github.com/tetherto/mdk/blob/main/ui/packages/react-devkit/src/primitives/components/labeled-card/labeled-card.tsx

Props

Prop	Status	Type / Options	Default	Description
`children`	Optional	`React.ReactNode`	-	Card body content
`className`	Optional	`string`	-	Additional class for the root element
`getNavigateOptions`	Optional	`(label: string) => Partial<{ href: string; target: string; }>`	-	Returns a link `href`/`target` for the label when provided
`hasNoBorder`	Optional	`boolean`	`false`	Removes the card border
`hasNoMargin`	Optional	`boolean`	`false`	Removes default margin
`hasNoWrap`	Optional	`boolean`	`false`	Prevents content from wrapping
`isDark`	Optional	`boolean`	`false`	Applies a dark background modifier
`isFullHeight`	Optional	`boolean`	`false`	Stretches the card to full container height
`isFullWidth`	Optional	`boolean`	`false`	Stretches the card to full container width
`isRelative`	Optional	`boolean`	`false`	Sets `position: relative` on the container
`isScrollable`	Optional	`boolean`	`false`	Enables vertical scroll on the card body
`label`	Optional	`React.ReactNode`	-	Header content shown above the card body

`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

Source

https://github.com/tetherto/mdk/blob/main/ui/packages/react-devkit/src/primitives/components/lazy-tab-wrapper/index.tsx

Props

Prop	Status	Type / Options	Default	Description
`Component`	Required	`React.ComponentType<{ data?: T \| undefined; }>`	-	Lazy-loaded component to render
`data`	Optional	`T`	-	Data to pass to the component
`fallback`	Optional	`React.ReactNode`	`<Spinner />`	Custom fallback component while loading
`spinnerType`	Optional	`"circle" \| "square"`	`"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

Source

https://github.com/tetherto/mdk/blob/main/ui/packages/react-devkit/src/primitives/components/mosaic/USAGE.md#props-detail

Props

Prop	Status	Type / Options	Default	Description
`children`	Required	`React.ReactNode`	-	`Mosaic.Item` elements
`template`	Required	`string[] \| string[][]`	-	Grid area layout. 1D: each string is a row of space-separated area names. 2D: each inner array is a row
`className`	Optional	`string`	-	Additional class for the grid element
`columns`	Optional	`string \| string[]`	-	Custom `grid-template-columns` value or array of track sizes. Defaults to equal-width fractional tracks
`gap`	Optional	`string`	`"12px"`	CSS gap between grid cells
`rowHeight`	Optional	`string`	`"auto"`	CSS height for each row

`Tabs`

Tabs component for organizing content into panels

agent-ready

Source

https://github.com/tetherto/mdk/blob/main/ui/packages/react-devkit/src/primitives/components/tabs/USAGE.md#tabslist--tabstrigger-props-detail

Props

Prop	Status	Type / Options	Default	Description
`defaultValue`	Optional	`string`	-	Uncontrolled initial active value
`onValueChange`	Optional	`((value: string) => void)`	-	Fired when the active tab changes
`orientation`	Optional	`"horizontal" \| "vertical"`	`"horizontal"`	Keyboard navigation orientation
`value`	Optional	`string`	-	Controlled active tab value
`variant`	Optional	`"default" \| "side" \| "underline"`	-	-

Show steps

On this page