@ayudh/dev-badge

A floating brand badge sized, positioned, and styled to exactly match Next.js's own dev-tools indicator — the same circle, ring, shadow, and corner offset, so your own mark reads as part of the same visual family instead of an ad-hoc floating logo.

import { DevBadge } from "@ayudh/dev-badge";

<DevBadge
  src="/your-logo.png"
  label="Your Company"
  href="https://yoursite.com"
/>;

Drop it in your root layout. No configuration required — every prop besides src has a default traced to Next's own source.

Why this exists

Next.js's dev-mode indicator (the small circular mark in the corner of every next dev page) has a specific, deliberate geometry. If you want your own brand mark to sit in that same visual language — in production, where Next's own indicator doesn't render — you either eyeball it, or you read the source. This package did the latter.

The research

Geometry read from Next.js 16.3.1's own compiled source, via the source maps shipped in node_modules/next/dist/compiled/next-devtools — not measured from a screenshot, not guessed:

• devtools-indicator.tsx: INDICATOR_PADDING = 20 — applied as [vertical]: 20px; [horizontal]: 20px on a position: fixed wrapper for the default 'bottom-left' corner. Next.js exposes four corners via devIndicators.position in next.config.ts; this package mirrors the same four values.
• indicator-metrics.ts: BASE_LOGO_SIZE = 36 — the circle's diameter. Styling: border-radius: 9999px, background: rgba(0,0,0,0.8), a 1px inner ring at hsla(0,0%,100%,.14), and a 0 16px 32px -8px rgba(0,0,0,.24) drop shadow.
• next-logo.tsx: the mark inside is the badge size minus a 4px inset (--size - 4) — a 32px mark inside a 36px circle at the default size.

An earlier attempt at this (before the source read) measured a live render and mistook the indicator's inner button — a different, 32px element at a 22px offset — for the badge itself. The two are easy to conflate visually and produce numbers close enough to look right without being right. Reading the source instead of the render is why this package's defaults are verifiably exact rather than approximately close.

Props

| Prop | Type | Default | Notes | | --- | --- | --- | --- | | src | string | — | Required. Your logo/mark image. | | label | string | "Home" | Accessible label and alt text. | | href | string | — | Wraps the badge in a link when provided. | | position | 'bottom-left' \| 'bottom-right' \| 'top-left' \| 'top-right' | 'bottom-left' | Matches Next's own devIndicators.position options. | | size | number | 36 | Outer diameter. Change only with a specific reason to diverge. | | padding | number | 20 | Distance from the viewport edge. | | zIndex | number | 60 | Next's own indicator uses a very high z-index; this default is lower so it doesn't fight app UI, and will sit under Next's indicator if both occupy the same corner in development. | | imageComponent | ComponentType | plain <img> | Pass next/image (or any component with a compatible src/alt/width/height/style signature) to use it instead. Plain <img> is the default specifically so this package has no install-time framework requirement beyond React. |

Design notes

• No next/image dependency. The badge is a static image at a fixed, small size — next/image's optimization pipeline (remote-pattern allowlisting, the image loader) is unnecessary overhead for a 36px mark, and would make this package require Next.js-specific host-app configuration just to render. The imageComponent prop opts in for projects that want it anyway.
• Peer dependency: react >=18 only. Nothing else. This is a Next.js convention the component mimics, not a Next.js API dependency — it will render correctly in any React app, though matching Next's own indicator geometry is naturally most meaningful inside a Next.js project.
• Server-Component compatible. No hooks, no client-only browser APIs — safe to render directly from a Next.js App Router root layout with no "use client" boundary required.

License

MIT © Ayudh Inc