BrandCredit

Domain: branding
Package path: packages/ui/src/branding/
Import: @ziteox/ui or @ziteox/ui/branding

Footer attribution: "{Variant} with ❤️ by Ziteox" with logo link.

Preview

Engineered with byZiteox

BrandCredit

Usage

import { BrandCredit } from "@ziteox/ui";

export function Footer() {
  return <BrandCredit variant="engineered" />;
}

Props

Prop	Type	Default	Description
`variant`	`BrandCreditVariant`	`"engineered"`	Attribution verb
`href`	`string`	`"https://ziteox.com"`	Link target
`className`	`string`	—	Appended to root `<p>` classes

Variants

Defined in packages/ui/src/branding/variants.ts:

`variant`	Rendered text
`"engineered"`	Engineered with ❤️ by Ziteox
`"built"`	Built with ❤️ by Ziteox
`"designed"`	Designed with ❤️ by Ziteox
`"developed"`	Developed with ❤️ by Ziteox

<BrandCredit variant="built" />
<BrandCredit variant="designed" />
<BrandCredit variant="developed" />

Adding a variant

Extend BRAND_CREDIT_VARIANTS in variants.ts:

export const BRAND_CREDIT_VARIANTS = {
  engineered: "Engineered",
  built: "Built",
  designed: "Designed",
  developed: "Developed",
  crafted: "Crafted", // new
} as const;

No changes to BrandCredit component API required. TypeScript union updates automatically.

Exported constants

import { BRAND_CREDIT_VARIANTS } from "@ziteox/ui/branding";

Useful for docs, tests, or building variant pickers in apps.

Visual behavior

Element	Behavior
Text	Muted foreground (`--ziteox-brand-credit-muted`); lighter in `.dark` / `[data-theme="dark"]`
Heart	Inline SVG; turns red (`#ef4444`) on hover over entire attribution line
Ziteox link	`#21ab70` brand green; opacity 0.8 on hover
Logo	Inline SVG mark, 14×14px

Hover uses :hover on root .ziteox-brand-credit — no parent group class required.

Server Components

No "use client" directive. Safe to render in React Server Components (Next.js App Router).

No hooks. No browser-only APIs on render.

Dependencies

No peers beyond react for JSX. Does not require motion or next-themes.

Architecture notes

Decision	Rationale
Variant map in separate file	Add verbs without touching component logic
Plain `<a>` not `next/link`	Framework-agnostic
Inline SVG not icon library	Zero extra deps; full control
No `motion`	Static content + CSS hover transition

BrandCredit

On this page