Site Brand
Install this component.
Source
import * as React from "react"
import { cn } from "cn"
/**
* Any link component that renders an anchor from `href` + anchor props:
* a plain `"a"` (the default), Next.js `Link`, React Router's `Link`, or a
* locale-aware wrapper from your i18n library.
*/
export type SiteLinkComponent = React.ElementType<
React.AnchorHTMLAttributes<HTMLAnchorElement> & { href: string }
>
export interface MonarkMarkProps extends React.SVGProps<SVGSVGElement> {
/**
* Accessible name. Omit it (the default) when the mark sits next to text
* that already names the product: the mark is then decorative.
*/
title?: string
}
/**
* The Monark butterfly, colour version (`logo-branded-standalone.svg` from
* the brand kit), inlined so it needs no static file. Works on light and
* dark backgrounds. Don't recolour or redraw it: the red-to-orange gradient
* is part of the logo.
*/
function MonarkMark({ title, className, ...props }: MonarkMarkProps) {
// Gradient ids must be unique per instance: the header renders the mark
// more than once (desktop bar + mobile sheet).
const id = `monark-mark-${React.useId().replace(/[^a-zA-Z0-9_-]/g, "")}`
return (
<svg
viewBox="0 0 305 304"
fill="none"
xmlns="http://www.w3.org/2000/svg"
data-slot="monark-mark"
role={title ? "img" : undefined}
aria-hidden={title ? undefined : true}
focusable="false"
className={cn("size-7 shrink-0", className)}
{...props}
>
{title ? <title>{title}</title> : null}
<path
d="M53.2979 91.7524C54.8054 146.99 113.095 139.457 113.095 139.457C67.8703 122.886 66.8655 103.804 66.8655 103.804L79.4277 99.7867L114.1 119.873L125.154 144.479L123.144 175.11L110.63 190.175L93.4972 200.72L85.4575 203.733L83.95 197.707L89.98 172.599L110.582 163.058C67.8703 161.552 76.4127 212.772 76.4127 212.772C126.159 216.287 133.194 148.496 133.194 148.496L152.289 170.517V152.785C152.289 152.785 145.254 146.99 120.129 116.86C101.286 94.2631 73.1152 91.4385 60.2074 91.4385C55.9049 91.4385 53.2979 91.7524 53.2979 91.7524Z"
fill={`url(#${id}-0)`}
/>
<path
d="M184.449 116.86C159.325 146.99 152.29 152.785 152.29 152.785V170.517L171.384 148.496C171.384 148.496 178.42 216.287 228.166 212.772C228.166 212.772 236.709 161.552 193.997 163.058L214.599 172.599L220.629 197.707L219.121 203.733L211.081 200.72L193.949 190.175L181.434 175.11L179.425 144.479L190.479 119.873L225.151 99.787L237.714 103.804C237.714 103.804 236.709 122.886 191.484 139.457C191.484 139.457 249.773 146.99 251.281 91.7527C251.281 91.7527 248.674 91.4387 244.371 91.4387C231.464 91.4387 203.293 94.2633 184.449 116.86Z"
fill={`url(#${id}-1)`}
/>
<path
d="M193.494 112.341C168.369 133.431 152.29 162.054 152.29 162.054C152.29 162.054 136.21 133.431 111.085 112.341C85.9606 91.2501 54.3037 94.2631 54.3037 94.2631C54.3424 94.6005 54.3836 94.935 54.4268 95.2667C59.9934 137.912 102.543 135.44 102.543 135.44C61.3386 115.354 66.8662 103.804 66.8662 103.804C66.8662 103.804 115.105 105.31 122.14 141.968C131.509 190.789 86.9657 200.218 86.9657 200.218C90.4832 169.084 110.583 163.058 110.583 163.058C72.3933 159.543 75.9107 208.754 75.9107 208.754C75.9107 208.754 86.9657 213.776 108.573 198.209C137.753 177.186 133.195 148.496 133.195 148.496L152.29 170.517L171.384 148.496C171.384 148.496 166.826 177.186 196.006 198.209C217.614 213.776 228.669 208.754 228.669 208.754C228.669 208.754 232.186 159.543 193.997 163.058C193.997 163.058 214.096 169.084 217.614 200.218C217.614 200.218 173.07 190.789 182.439 141.968C189.474 105.31 237.714 103.804 237.714 103.804C237.714 103.804 243.241 115.354 202.036 135.44C202.036 135.44 244.586 137.912 250.153 95.2667C250.196 94.935 250.237 94.6005 250.276 94.2631C250.276 94.2631 248.711 94.1143 246.005 94.1143C236.529 94.114 213.037 95.9358 193.494 112.341Z"
fill={`url(#${id}-2)`}
/>
<defs>
<linearGradient id={`${id}-0`} x1="53.298" y1="152.171" x2="152.289" y2="152.171" gradientUnits="userSpaceOnUse">
<stop stopColor="#ED2723" />
<stop offset="1" stopColor="#FBA60B" />
</linearGradient>
<linearGradient id={`${id}-1`} x1="152.29" y1="152.171" x2="251.281" y2="152.171" gradientUnits="userSpaceOnUse">
<stop stopColor="#ED2723" />
<stop offset="1" stopColor="#FBA60B" />
</linearGradient>
<linearGradient id={`${id}-2`} x1="54.3037" y1="151.821" x2="250.276" y2="151.821" gradientUnits="userSpaceOnUse">
<stop stopColor="#ED2723" />
<stop offset="1" stopColor="#FBA60B" />
</linearGradient>
</defs>
</svg>
)
}
export interface MonarkLogoProps extends React.SVGProps<SVGSVGElement> {
/** Accessible name. Default "Monark". */
title?: string
}
// Wordmark of the horizontal logo, outlined from the brand kit
// (`monark-horizontal-color-on-{light,dark}.svg`), coordinates rounded.
const MONARK_WORDMARK = "M239.84 137.25L249.34 74.65C249.63 73.02 250.21 72.16 250.97 72.16C251.74 72.16 252.32 72.64 253.57 75.13L279.77 129.28L305.89 74.46C306.65 72.93 307.13 72.16 308 72.16C308.86 72.16 309.44 73.12 309.73 75.13L318.46 134.46C319.33 140.51 320.29 143.29 323.17 144.16C325.95 145.02 327.87 145.12 329.12 145.12C329.98 145.12 330.65 145.21 330.65 145.79C330.65 146.56 329.5 146.84 328.16 146.84C325.76 146.84 312.51 146.56 308.67 146.27C306.46 146.08 305.89 145.79 305.89 145.21C305.89 144.73 306.27 144.44 306.94 144.16C307.52 143.97 307.81 142.72 307.42 140.03L301.66 97.79H301.28L280.35 141.37C278.14 145.88 277.66 146.75 276.8 146.75C275.93 146.75 274.97 144.83 273.44 141.95C271.13 137.53 263.55 122.84 262.4 120.16C261.53 118.14 255.77 106.05 252.41 98.85H252.03L247.04 137.05C246.85 138.78 246.75 140.03 246.75 141.56C246.75 143.39 248 144.25 249.63 144.64C251.36 145.02 252.7 145.12 253.66 145.12C254.43 145.12 255.1 145.31 255.1 145.79C255.1 146.65 254.24 146.84 252.8 146.84C248.77 146.84 244.45 146.56 242.72 146.56C240.89 146.56 236.29 146.84 233.21 146.84C232.25 146.84 231.49 146.65 231.49 145.79C231.49 145.31 232.06 145.12 233.02 145.12C233.79 145.12 234.46 145.12 235.9 144.83C238.59 144.25 239.36 140.51 239.84 137.25ZM368.87 147.9C344.3 147.9 334.31 130.43 334.31 115.93C334.31 102.01 344.1 83.97 369.74 83.97C391.05 83.97 404.3 95.77 404.3 114.49C404.3 133.21 390.66 147.9 368.87 147.9ZM372.33 143.49C378.28 143.49 391.72 140.7 391.72 117.47C391.72 99.42 380.87 88.29 367.24 88.29C357.83 88.29 346.79 93.28 346.79 113.44C346.79 130.24 356.39 143.49 372.33 143.49ZM424.35 102.4L425.31 135.71C425.5 142.04 426.56 143.97 428.19 144.54C429.63 145.02 431.26 145.12 432.6 145.12C433.56 145.12 434.04 145.5 434.04 145.98C434.04 146.65 433.27 146.84 432.12 146.84C426.65 146.84 422.71 146.56 421.18 146.56C420.41 146.56 416.38 146.84 412.06 146.84C410.91 146.84 410.14 146.75 410.14 145.98C410.14 145.5 410.71 145.12 411.48 145.12C412.63 145.12 414.17 145.02 415.32 144.73C417.53 144.16 417.82 141.95 417.92 134.84L418.68 86.46C418.68 84.83 419.26 83.68 420.12 83.68C421.18 83.68 422.33 84.93 423.77 86.37C424.83 87.42 437.5 100.38 449.79 112.38C455.55 118.05 466.78 129.56 468.03 130.72H468.41L467.55 94.43C467.45 89.44 466.68 88 464.67 87.23C463.42 86.75 461.4 86.75 460.25 86.75C459.19 86.75 458.91 86.37 458.91 85.89C458.91 85.21 459.77 85.12 461.02 85.12C465.44 85.12 469.95 85.31 471.77 85.31C472.73 85.31 475.9 85.12 480.03 85.12C481.18 85.12 481.95 85.21 481.95 85.89C481.95 86.37 481.47 86.75 480.51 86.75C479.64 86.75 478.97 86.75 477.92 87.04C475.61 87.71 474.94 89.15 474.84 93.76L473.88 145.21C473.88 147.04 473.21 147.81 472.54 147.81C471.1 147.81 469.95 146.94 469.08 146.08C463.8 141.18 453.24 131.1 444.41 122.56C435.19 113.72 426.27 103.84 424.63 102.4H424.35ZM524.26 126.3H504.39C503.91 126.3 503.82 126.4 503.63 126.88L499.11 137.82C498.25 139.84 497.87 141.85 497.87 142.81C497.87 144.25 498.63 145.12 501.23 145.12H502.47C503.53 145.12 503.72 145.5 503.72 145.98C503.72 146.65 503.24 146.84 502.38 146.84C499.59 146.84 495.66 146.56 492.97 146.56C492.11 146.56 487.59 146.84 483.18 146.84C482.12 146.84 481.64 146.65 481.64 145.98C481.64 145.5 481.93 145.12 482.6 145.12C483.37 145.12 484.33 145.02 485.1 145.02C488.94 144.44 490.38 141.95 492.11 137.82L514.18 86.46C515.14 84.16 515.82 83.2 516.68 83.2C517.93 83.2 518.31 83.97 519.18 85.79C521.19 90.3 535.3 123.71 540.68 136.09C543.95 143.49 546.35 144.54 547.88 144.83C549.13 145.02 550.09 145.12 551.05 145.12C551.82 145.12 552.2 145.41 552.2 145.98C552.2 146.65 551.72 146.84 548.55 146.84C545.58 146.84 539.43 146.84 532.33 146.65C530.79 146.56 529.83 146.56 529.83 145.98C529.83 145.5 530.02 145.21 530.89 145.12C531.47 145.02 532.04 144.25 531.66 143.29L525.13 126.88C524.94 126.4 524.65 126.3 524.26 126.3ZM506.12 121.79H522.44C522.83 121.79 522.92 121.6 522.83 121.31L514.86 100.57C514.76 100.28 514.66 99.81 514.47 99.81C514.18 99.81 514.09 100.28 513.99 100.57L505.83 121.21C505.64 121.6 505.83 121.79 506.12 121.79ZM561.4 123.13V108.73C561.4 96.35 561.4 94.05 561.31 91.45C561.11 88.67 560.35 87.81 557.66 87.04C556.99 86.85 555.55 86.75 554.3 86.75C553.43 86.75 552.86 86.46 552.86 85.89C552.86 85.31 553.53 85.12 554.78 85.12C559.19 85.12 564.57 85.31 566.3 85.31C569.18 85.31 576.86 85.12 579.45 85.12C584.83 85.12 590.97 85.6 595.48 88.57C597.88 90.21 601.43 94.33 601.43 99.81C601.43 105.85 597.98 111.23 589.72 117.85C597.21 127.07 603.16 134.46 608.25 139.55C612.95 144.25 615.93 144.64 617.27 144.93C618.14 145.12 618.62 145.12 619.29 145.12C619.96 145.12 620.35 145.6 620.35 145.98C620.35 146.65 619.77 146.84 618.71 146.84H610.65C605.95 146.84 603.64 146.37 601.43 145.21C597.79 143.39 594.62 139.55 589.91 133.21C586.55 128.8 583 123.33 581.95 122.08C581.47 121.6 580.99 121.5 580.41 121.5L572.83 121.31C572.44 121.31 572.15 121.5 572.15 121.98V123.13C572.15 130.72 572.25 137.05 572.63 140.51C572.92 142.91 573.31 144.44 575.9 144.83C577.15 145.02 578.97 145.12 580.03 145.12C580.7 145.12 581.08 145.6 581.08 145.98C581.08 146.56 580.41 146.84 579.35 146.84C574.46 146.84 567.45 146.56 566.2 146.56C564.57 146.56 559.19 146.84 555.83 146.84C554.78 146.84 554.2 146.56 554.2 145.98C554.2 145.6 554.49 145.12 555.55 145.12C556.79 145.12 557.75 145.02 558.52 144.83C560.25 144.44 560.73 142.91 561.02 140.51C561.4 137.05 561.4 130.62 561.4 123.13ZM572.15 90.78V115.07C572.15 115.93 572.35 116.22 572.92 116.51C574.75 117.08 577.24 117.28 579.35 117.28C582.71 117.28 583.87 116.99 585.31 115.93C587.9 114.11 590.78 110.56 590.78 103.84C590.78 92.32 582.91 89.34 577.91 89.34C575.8 89.34 573.79 89.44 572.92 89.63C572.35 89.82 572.15 90.11 572.15 90.78ZM638.25 108.73V112.38H638.64C641.52 109.31 653.81 97.21 656.3 94.43C658.7 91.74 660.53 89.82 660.53 88.38C660.53 87.52 660.14 86.94 659.37 86.75C658.61 86.56 658.22 86.37 658.22 85.89C658.22 85.31 658.7 85.12 659.57 85.12C661.39 85.12 666 85.31 668.3 85.31C670.89 85.31 675.6 85.12 678.19 85.12C679.05 85.12 679.63 85.31 679.63 85.89C679.63 86.46 679.15 86.75 678.38 86.75C677.13 86.75 675.02 87.13 673.49 87.71C670.8 88.67 668.11 90.4 664.56 93.76C661.87 96.25 649.29 108.16 646.7 111.13C649.68 114.97 666.29 132.25 669.55 135.32C673.29 138.69 676.56 142.24 681.07 144.06C683.57 145.12 685.29 145.12 686.25 145.12C686.93 145.12 687.41 145.5 687.41 145.98C687.41 146.56 686.93 146.84 685.39 146.84H678C675.5 146.84 673.97 146.84 672.14 146.65C667.63 146.27 664.85 144.54 661.2 141.37C657.55 138.21 641.33 119.39 639.5 116.89L638.64 115.74H638.25V123.13C638.25 130.62 638.25 137.05 638.45 140.6C638.64 142.91 639.41 144.44 641.52 144.83C642.67 145.02 644.59 145.12 645.65 145.12C646.32 145.12 646.8 145.6 646.8 145.98C646.8 146.56 646.13 146.84 645.17 146.84C640.46 146.84 634.41 146.56 632.3 146.56C630.38 146.56 625.01 146.84 621.65 146.84C620.59 146.84 620.01 146.56 620.01 145.98C620.01 145.6 620.3 145.12 621.36 145.12C622.61 145.12 623.57 145.02 624.33 144.83C626.06 144.44 626.54 142.91 626.83 140.51C627.21 137.05 627.21 130.62 627.21 123.13V108.73C627.21 96.35 627.21 94.05 627.12 91.45C626.93 88.67 626.16 87.81 623.47 87.04C622.8 86.85 621.36 86.75 620.11 86.75C619.25 86.75 618.67 86.46 618.67 85.89C618.67 85.31 619.34 85.12 620.59 85.12C625.01 85.12 630.38 85.31 632.4 85.31C634.41 85.31 640.46 85.12 643.25 85.12C644.49 85.12 645.07 85.31 645.07 85.89C645.07 86.46 644.59 86.75 643.92 86.75C643.05 86.75 642.57 86.85 641.52 87.04C639.21 87.42 638.54 88.57 638.35 91.45C638.25 94.05 638.25 96.35 638.25 108.73Z"
const MONARK_LOGO_MARK = [
"M16.5 49.61C18.01 104.85 76.3 97.31 76.3 97.31C31.08 80.74 30.07 61.66 30.07 61.66L42.63 57.64L77.3 77.73L88.36 102.34L86.35 132.97L73.84 148.03L56.7 158.58L48.66 161.59L47.16 155.56L53.19 130.46L73.79 120.92C31.08 119.41 39.62 170.63 39.62 170.63C89.36 174.15 96.4 106.35 96.4 106.35L115.49 128.38V110.64C115.49 110.64 108.46 104.85 83.33 74.72C64.49 52.12 36.32 49.3 23.41 49.3C19.11 49.3 16.5 49.61 16.5 49.61Z",
"M147.65 74.72C122.53 104.85 115.5 110.64 115.5 110.64V128.38L134.59 106.35C134.59 106.35 141.63 174.15 191.37 170.63C191.37 170.63 199.91 119.41 157.2 120.92L177.8 130.46L183.83 155.56L182.33 161.59L174.29 158.58L157.15 148.03L144.64 132.97L142.63 102.34L153.68 77.73L188.36 57.64L200.92 61.66C200.92 61.66 199.91 80.74 154.69 97.32C154.69 97.32 212.98 104.85 214.49 49.61C214.49 49.61 211.88 49.3 207.58 49.3C194.67 49.3 166.5 52.12 147.65 74.72Z",
"M156.7 70.2C131.57 91.29 115.5 119.91 115.5 119.91C115.5 119.91 99.42 91.29 74.29 70.2C49.17 49.11 17.51 52.12 17.51 52.12C17.55 52.46 17.59 52.79 17.63 53.12C23.2 95.77 65.75 93.3 65.75 93.3C24.54 73.21 30.07 61.66 30.07 61.66C30.07 61.66 78.31 63.17 85.35 99.83C94.71 148.65 50.17 158.08 50.17 158.08C53.69 126.94 73.79 120.92 73.79 120.92C35.6 117.4 39.12 166.61 39.12 166.61C39.12 166.61 50.17 171.63 71.78 156.07C100.96 135.04 96.4 106.35 96.4 106.35L115.5 128.38L134.59 106.35C134.59 106.35 130.03 135.04 159.21 156.07C180.82 171.63 191.87 166.61 191.87 166.61C191.87 166.61 195.39 117.4 157.2 120.92C157.2 120.92 177.3 126.94 180.82 158.08C180.82 158.08 136.28 148.65 145.64 99.83C152.68 63.17 200.92 61.66 200.92 61.66C200.92 61.66 206.45 73.21 165.24 93.3C165.24 93.3 207.79 95.77 213.36 53.12C213.4 52.79 213.44 52.46 213.48 52.12C213.48 52.12 211.92 51.97 209.21 51.97C199.74 51.97 176.24 53.79 156.7 70.2Z",
]
const MONARK_LOGO_GRADIENTS = [
[16.5, 110.03, 115.49, 110.03],
[115.5, 110.03, 214.49, 110.03],
[17.51, 109.68, 213.48, 109.68],
] as const
/**
* The official horizontal Monark logo (butterfly + wordmark) as one inline
* SVG. The butterfly keeps its brand gradient; the wordmark is drawn in
* `currentColor`, so it follows `text-foreground` and serves both the
* on-light (#141414) and on-dark (white) brand-kit variants. Size it by
* height (`h-9` by default); the width follows the aspect ratio.
*/
function MonarkLogo({ title = "Monark", className, ...props }: MonarkLogoProps) {
const id = `monark-logo-${React.useId().replace(/[^a-zA-Z0-9_-]/g, "")}`
return (
<svg
viewBox="14 47 676 130"
fill="none"
xmlns="http://www.w3.org/2000/svg"
data-slot="monark-logo"
role="img"
aria-label={title}
focusable="false"
className={cn("h-9 w-auto shrink-0 text-foreground", className)}
{...props}
>
<title>{title}</title>
{MONARK_LOGO_MARK.map((d, index) => (
<path key={index} d={d} fill={`url(#${id}-${index})`} />
))}
<path d={MONARK_WORDMARK} fill="currentColor" />
<defs>
{MONARK_LOGO_GRADIENTS.map(([x1, y1, x2, y2], index) => (
<linearGradient
key={index}
id={`${id}-${index}`}
x1={x1}
y1={y1}
x2={x2}
y2={y2}
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#ED2723" />
<stop offset="1" stopColor="#FBA60B" />
</linearGradient>
))}
</defs>
</svg>
)
}
export interface SiteBrandProps
extends Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, "href"> {
/** The product name, e.g. "Splitflow". Set in text, never as an image. */
name: React.ReactNode
/** The site's home page. Default `/`; pass the locale root (`/fr`) on localised sites. */
href?: string
/**
* The link's accessible name. Defaults to `"{name}, by Monark: home"`
* when `name` is a string; pass a translated label on non-English pages.
*/
"aria-label"?: string
/** Link component used for the home link. Default: a plain `<a>`. */
LinkComponent?: SiteLinkComponent
}
/**
* The Monark product brand for a site header: the colour butterfly mark
* (28px), a 10px gap, then the product name in Nunito Sans 800 at 18px.
* No "by Monark" here; that credit belongs in the footer.
*/
function SiteBrand({
name,
href = "/",
"aria-label": ariaLabel,
LinkComponent = "a",
className,
...props
}: SiteBrandProps) {
const label =
ariaLabel ?? (typeof name === "string" ? `${name}, by Monark: home` : undefined)
return (
<LinkComponent
href={href}
aria-label={label}
data-slot="site-brand"
className={cn(
"inline-flex shrink-0 items-center gap-2.5 rounded-md py-1 pr-1 whitespace-nowrap outline-none focus-visible:ring-3 focus-visible:ring-ring/50",
className
)}
{...props}
>
<MonarkMark className="size-7" />
<span className="text-lg leading-none font-extrabold tracking-[-0.02em] text-foreground">
{name}
</span>
</LinkComponent>
)
}
export { SiteBrand, MonarkMark, MonarkLogo }