brand

BrandMark

The chevron-checkmark logomark, optionally with a per-product wordmark next to it. Use exactly one in the topbar of every product — never recreate the symbol elsewhere.

Install

Pull this component (and its dependencies) straight into your app via the shadcn CLI:

npx shadcn@latest add https://design.oapps.io/r/brand-mark.json

Or import from the workspace package:

import { BrandMark } from "@8maverik8/design";

Examples

Symbol only

<BrandMark size={32} />

With wordmark

ciparchi

<BrandMark withWordmark wordmark="cip" />
<BrandMark withWordmark wordmark="archi" />

Variants

props

withWordmarkRender the lowercase product name next to the symbol (e.g. `wordmark="cip"`).
sizePixel size of the symbol. Default 20px (size-5).
wordmarkLowercase product name. Default `"supertest"` — set per app.

Guidelines

Set `wordmark` to your product name in the AppShell config — this is what shows in the topbar.
Replace the SVG with a custom logo.The whole platform reads as one family because every product uses the same mark. Use the wordmark to differentiate.