@zedtech/zedkit-ui

BrandLogo

Render your own logo as an inline SVG that paints with `currentColor`, so it follows the text colour in light, dark and every visual identity.

beta@zedtech/zedkit-ui

Wraps: none (inline SVG)

Harbor Studio

Same mark, four sizes and three text colors. It inherits the color from the text around it.

View props table

Who is it for?: Teams building a header, a footer or a share image for their own site.
When should I use it?: Next to your product name in a site header or footer, or as the mark of a share image.
When should I pick something else?: For the zedkit mark — `Logo` is zedkit's own mark, used by the zedkit docs site; do not ship it as yours.

Use it

Simple

import { BrandLogo } from "@zedtech/zedkit-ui";
<BrandLogo title="Harbor Studio" viewBox="0 0 32 24" className="h-logo text-primary">
  <path d="M16 1 25 15H7Z" />
  <path d="M0 19c4 0 4 3 8 3s4-3 8-3 4 3 8 3 4-3 8-3v5H0Z" />
</BrandLogo>

Header link to the home page

Harbor Studio

import { BrandLogo } from "@zedtech/zedkit-ui";
<a href="/" className="flex items-center gap-stack-sm text-foreground">
  <BrandLogo title="" viewBox="0 0 32 24" className="h-logo text-primary">
    <path d="M16 1 25 15H7Z" />
  </BrandLogo>
  Harbor Studio
</a>

Kit not installed yet?

This ships on npm only; there is no copy-source brick for it.

You get

Every component from one import, with the theme tokens included. Updates arrive with your package manager.

You need

React 19 and Tailwind CSS 4, for example a Next.js app created with the Tailwind option.

Install

Terminal

pnpm add @zedtech/zedkit-ui @fontsource-variable/inter @fontsource-variable/space-grotesk

Load the styles

Tailwind does not scan node_modules, so the @source line points it at the kit's class names. The path is relative to this file.

src/app/globals.cssReplace the contents

@import "tailwindcss";
@import "@zedtech/zedkit-ui/styles.css";
@source "../../node_modules/@zedtech/zedkit-ui/src/**/*.{ts,tsx}";
@source not "../../node_modules/@zedtech/zedkit-ui/src/**/*.test.*";

Pick a look

Set data-identity="glass" on <html> so the finished app matches the site. Fresh app: replace src/app/layout.tsx. Existing app: merge, and keep ThemeProvider and other providers.

src/app/layout.tsxReplace the contents

import "./globals.css";
import "./fonts";

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en" data-identity="glass">
      <body>{children}</body>
    </html>
  );
}

4
Load the fonts
The Glass look uses Inter and Space Grotesk; these imports self-host them.
src/app/fonts.tsCreate the file
```
import "@fontsource-variable/inter";
import "@fontsource-variable/space-grotesk";
```

Import and render

src/app/page.tsxReplace the contents

import { BrandLogo } from "@zedtech/zedkit-ui";

export default function Page() {
  return (
    <main className="px-page-gutter py-section-sm">
      <BrandLogo title="Harbor Studio" viewBox="0 0 32 24" className="h-logo text-primary">
        <path d="M16 1 25 15H7Z" />
        <path d="M0 19c4 0 4 3 8 3s4-3 8-3 4 3 8 3 4-3 8-3v5H0Z" />
      </BrandLogo>
    </main>
  );
}

Package version 2.0.1.

Props

Prop

Type

Show inherited HTML attributes

Standard attributes from the underlying element. See MDN.

Prop

Type

Accessibility

named image (the brand name) when the mark stands alone; pass title="" to hide it when the name is written next to it, and let the link text label the link.

Render Markdown without raw HTML

Turn CommonMark into React elements with sanitized, inert HTML and script vectors, info-coloured links, and wrapping fences. Install with npm.

Tabs

Accessible tabs (list, triggers, content panels).