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
Props
| Prop | Status | Type / Options | Default | Description |
|---|---|---|---|---|
className | Optional | string | - | Optional class hook on the outer <svg> |
size | Optional | "sm" | "md" | "lg" | "md" | Visual size of the wordmark. sm ≈ 24px tall, md ≈ 32px, lg ≈ 64px |
title | Optional | string | "MDK" | Accessible label |