MDK Logo

Branding

Logos, wordmarks, and brand identity elements

Components for brand identity and visual consistency.

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

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

MdkWordmark

MDK wordmark — the canonical brand lockup, rendered as inline SVG so it tints to currentColor. Use this in <AppHeader> (via the logo slot) or anywhere else the brand should appear

agent-ready

Source

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

Props

PropStatusType / OptionsDefaultDescription
classNameOptionalstring-Optional class hook on the outer <svg>
sizeOptional"sm" | "md" | "lg""md"Visual size of the wordmark. sm ≈ 24px tall, md ≈ 32px, lg ≈ 64px
titleOptionalstring"MDK"Accessible label

On this page