Brand

WAVEINNO logo

The official logo. The wordmark follows the text colour, so it works in dark mode as is.

logo.tsx

"use client";

import { WaveinnoLogo, WaveinnoSymbol } from "@waveinno/ui";

export default function LogoExample() {
  return (
    <div className="space-y-5">
      <WaveinnoLogo className="h-10" />
      <div className="flex flex-wrap items-center gap-6">
        <WaveinnoLogo className="h-6" />
        <WaveinnoSymbol className="h-8" />
        <WaveinnoSymbol className="h-5" />
      </div>
      <div className="rounded-card bg-[#1a113e] p-4">
        <WaveinnoLogo tone="inverse" className="h-7" />
      </div>
    </div>
  );
}

Import#

Everything comes from the package root. The example above uses:

your-component.tsx

import { WaveinnoLogo, WaveinnoSymbol } from "@waveinno/ui";

Props#

Read from the source of this version, so they match the code exactly.

<WaveinnoLogo>

src/components/brand/waveinno-logo.tsx

Prop	Type	Default	Description
`className`	`string`	—
`tone`	`"default" \| "inverse"`	`"default"`	"inverse" for dark or photographic backgrounds in light mode.
`title`	`string`	`"WAVEINNO"`	Accessible name; pass "" when a visible name sits next to it.

<WaveinnoSymbol>

src/components/brand/waveinno-logo.tsx

Prop	Type	Default
`className`	`string`	—
`style`	`React.CSSProperties`	—
`title`	`string`	`"WAVEINNO"`
`mono`	`boolean`	`false`

Install#

If the project does not have the package yet, add it, then follow the setup for Next.js or Vite once.

$ npm install @waveinno/ui