Brand Mark

Small accent tile for a product logo, with a neutral default glyph. Blocks and dashboards use it beside the brand name.

fernway

Installation

npx shadcn@latest add https://ui-collections.vercel.app/r/glass/brand-mark.json

Also installs the theme, cn(). Packages: clsx, tailwind-merge.

Usage

brand-mark-demo.tsx

import { BrandMark } from "@/registry/kit/ui/brand-mark";

function LeafGlyph() {
  return (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round" aria-hidden>
      <path d="M5 19c0-8 5-13 14-14-1 9-6 14-14 14ZM5 19l7-7" />
    </svg>
  );
}

export default function BrandMarkDemo() {
  return (
    <div className="flex flex-wrap items-center gap-8">
      <div className="flex items-end gap-3">
        <BrandMark size="sm" />
        <BrandMark />
        <BrandMark size="lg" />
      </div>
      <span className="flex items-center gap-2.5 font-display text-xl tracking-tight">
        <BrandMark>
          <LeafGlyph />
        </BrandMark>
        fernway
      </span>
    </div>
  );
}

API

size

= "md"

"sm" | "md" | "lg"

Tile size.

children

= <BrandGlyph />

ReactNode

Your glyph, usually an inline SVG in currentColor.

Source

components/ui/brand-mark.tsx

import type { ReactNode } from "react";

import { cn } from "@/registry/kit/lib/utils";

const sizes = { sm: "size-6 [&_svg]:size-3.5", md: "size-7 [&_svg]:size-4", lg: "size-9 [&_svg]:size-5" };

/** The default glyph: a neutral rising line. Usable on its own inside any accent tile. */
export function BrandGlyph() {
  return (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round" aria-hidden>
      <path d="M4 16.5 9 11l4 3.5 7-8" />
    </svg>
  );
}

/**
 * A small accent tile for a product logo. Pass your own glyph as children;
 * without one it shows the neutral rising-line mark.
 */
export function BrandMark({
  size = "md",
  className,
  children,
}: {
  size?: keyof typeof sizes;
  className?: string;
  children?: ReactNode;
}) {
  return (
    <span
      aria-hidden
      className={cn(
        "grid shrink-0 place-items-center rounded-[min(var(--r-field),32%)] bg-accent text-accent-fg shadow-[0_6px_16px_-8px_var(--color-accent)]",
        sizes[size],
        className,
      )}
    >
      {children ?? <BrandGlyph />}
    </span>
  );
}

Usage

brand-mark-demo.tsx

import { BrandMark } from "@/registry/kit/ui/brand-mark";

function LeafGlyph() {
  return (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round" aria-hidden>
      <path d="M5 19c0-8 5-13 14-14-1 9-6 14-14 14ZM5 19l7-7" />
    </svg>
  );
}

export default function BrandMarkDemo() {
  return (
    <div className="flex flex-wrap items-center gap-8">
      <div className="flex items-end gap-3">
        <BrandMark size="sm" />
        <BrandMark />
        <BrandMark size="lg" />
      </div>
      <span className="flex items-center gap-2.5 font-display text-xl tracking-tight">
        <BrandMark>
          <LeafGlyph />
        </BrandMark>
        fernway
      </span>
    </div>
  );
}

Source

components/ui/brand-mark.tsx

import type { ReactNode } from "react";

import { cn } from "@/registry/kit/lib/utils";

const sizes = { sm: "size-6 [&_svg]:size-3.5", md: "size-7 [&_svg]:size-4", lg: "size-9 [&_svg]:size-5" };

/** The default glyph: a neutral rising line. Usable on its own inside any accent tile. */
export function BrandGlyph() {
  return (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round" aria-hidden>
      <path d="M4 16.5 9 11l4 3.5 7-8" />
    </svg>
  );
}

/**
 * A small accent tile for a product logo. Pass your own glyph as children;
 * without one it shows the neutral rising-line mark.
 */
export function BrandMark({
  size = "md",
  className,
  children,
}: {
  size?: keyof typeof sizes;
  className?: string;
  children?: ReactNode;
}) {
  return (
    <span
      aria-hidden
      className={cn(
        "grid shrink-0 place-items-center rounded-[min(var(--r-field),32%)] bg-accent text-accent-fg shadow-[0_6px_16px_-8px_var(--color-accent)]",
        sizes[size],
        className,
      )}
    >
      {children ?? <BrandGlyph />}
    </span>
  );
}