@onyx/brand

@onyx/brand is a small private package that holds the product identity for the whole monorepo: the product name, description, URLs, and the logo. Every app and package reads its branding from here, so a fork rebrands in one place instead of hunting through the web app, docs site, emails, and favicons.

Exports

The package exposes four entry points:

The brand object

import { brand } from '@onyx/brand';

brand.name; // "Onyx"
brand.description; // "The TypeScript starter kit from jxd.dev"
brand.url; // deployed origin
brand.author; // { name, url }

Because it is plain TypeScript with no React or DOM dependencies, the brand object is imported by the CLI, React Email templates, and server code as well as the web app.

BrandMark

BrandMark renders the logo as an inline SVG built from polygons, sized by the parent through className:

import { BrandMark } from '@onyx/brand/mark';

export function Header() {
  return <BrandMark className="size-6" />;
}

React is a peer dependency, so only React consumers pay for this entry point.

Raw SVG

For places that need a file rather than a component, such as favicons and static assets, import the SVG directly:

import logo from '@onyx/brand/onyx.svg';

Rebranding a fork

Rebranding is a two-step change inside private/brand:

1. Edit the brand object in src/index.ts with your name, description, and URLs.
2. Replace src/assets/onyx.svg and the polygons in src/mark.tsx with your own logo.

Everything downstream (web app shell, docs site, emails, favicons) picks the changes up from here.