@unlok3rs/powered-by

Drop-in "powered by unlokers" badge. The brand-approved SVG (v.4.20) wrapped in three ways so you never copy-paste it again:

• a framework-agnostic core (returns an SVG / HTML string) — works in plain HTML, Astro, Vue, Svelte, PHP/WordPress, anywhere;
• a React component;
• a <powered-by-unlokers> web component.

Three variants × two themes:

| variant | size (px) | use it for | | --- | --- | --- | | pill (default) | 158 × 36 | the workhorse — drop under any CTA, in a sidebar or a mobile footer | | inline | 134 × 22 | text-only, no background — for footers that already have their own surface | | branded | 260 × 72 | flagship footer badge with disc-face + v.4.20 stamp — for landing pages |

Each comes in dark (for dark surfaces) and light (for cream / light surfaces).

Install

From npm (recommended):

npm install @unlok3rs/powered-by

Straight from GitHub (no registry needed):

npm install github:lok3rs/powered-by

From a CDN (no build step — plain HTML / WordPress):

<script type="module"
  src="https://cdn.jsdelivr.net/npm/@unlok3rs/powered-by/dist/web-component.js"></script>

React is an optional peer dependency. You only need it if you import @unlok3rs/powered-by/react.

Usage

React

import { PoweredByUnlokers } from "@unlok3rs/powered-by/react";

// defaults: variant="pill", theme="dark", links to https://unlokers.ai in a new tab
<PoweredByUnlokers />

<PoweredByUnlokers variant="branded" theme="light" />
<PoweredByUnlokers variant="inline" theme="dark" height={20} />
<PoweredByUnlokers href={null} />            {/* render the badge with no link */}
<PoweredByUnlokers href="https://unlokers.ai?ref=client-site" />

Web component (plain HTML, WordPress, Astro, …)

<script type="module"
  src="https://cdn.jsdelivr.net/npm/@unlok3rs/powered-by/dist/web-component.js"></script>

<powered-by-unlokers variant="pill" theme="dark"></powered-by-unlokers>
<powered-by-unlokers variant="branded" theme="light" href="https://unlokers.ai?ref=acme"></powered-by-unlokers>
<powered-by-unlokers variant="inline" theme="dark" href="none"></powered-by-unlokers>

Attributes: variant, theme, href (use "none" to disable the link), width, height.

If you use a bundler instead of the CDN:

import "@unlok3rs/powered-by/web-component"; // auto-registers <powered-by-unlokers>

Vanilla JS / any framework (string API)

import { createPoweredByUnlokers, getPoweredByUnlokersSvg } from "@unlok3rs/powered-by";

// a ready <a>…<svg/></a> badge
document.querySelector("#footer").innerHTML = createPoweredByUnlokers({
  variant: "pill",
  theme: "dark",
});

// just the raw <svg> string (no link)
const svg = getPoweredByUnlokersSvg({ variant: "branded", theme: "light" });

Astro

---
import { createPoweredByUnlokers } from "@unlok3rs/powered-by";
---
<Fragment set:html={createPoweredByUnlokers({ variant: "branded", theme: "dark" })} />

Static SVG files

The original files are also shipped, for <img> tags or design tools:

@unlok3rs/powered-by/assets/powered-by-pill-dark.svg
@unlok3rs/powered-by/assets/powered-by-inline-light.svg
…etc

API

getPoweredByUnlokersSvg(options?) → string

Returns the raw <svg> markup.

| option | type | default | notes | | --- | --- | --- | --- | | variant | "pill" \| "inline" \| "branded" | "pill" | | | theme | "dark" \| "light" | "dark" | | | width | number \| string | — | pass only one of width/height to keep aspect ratio | | height | number \| string | — | | | title | string | — | adds role="img" + aria-label to the SVG |

createPoweredByUnlokers(options?) → string

Same options as above, plus the anchor wrapper:

| option | type | default | | --- | --- | --- | | href | string \| null | "https://unlokers.ai" (null = no link) | | target | string | "_blank" | | rel | string | "noopener noreferrer" when target="_blank" | | className | string | — | | ariaLabel | string | "powered by unlokers" |

registerPoweredByUnlokers(tagName?)

Defines the custom element (browser-only, idempotent). Default tag: powered-by-unlokers.

<PoweredByUnlokers /> (from @unlok3rs/powered-by/react)

Props: variant, theme, href, width, height, label, plus any standard <a> attributes (className, style, onClick, …).

Sizing

The SVG scales to its container. The wrapper sets line-height: 0, so size it with CSS:

.powered-by-unlokers svg { height: 32px; width: auto; }

…or pass width / height (set just one to preserve the aspect ratio).

Fonts

The wordmark uses Inter Tight and Geist Mono. If the host page loads those fonts the badge is pixel-perfect; otherwise it falls back to system fonts and still reads correctly. To guarantee the exact look, load:

<link href="https://fonts.googleapis.com/css2?family=Inter+Tight:wght@600&family=Geist+Mono:wght@400&display=swap" rel="stylesheet" />

Attribution / analytics

Want to track referral traffic from client sites? Add a query param to the link:

<PoweredByUnlokers href="https://unlokers.ai?ref=acme-cafe" />

Maintainer notes

The badges live in assets/. src/svg.ts is generated from them — never edit it by hand:

npm run generate   # rebuild src/svg.ts from assets/*.svg
npm run build      # generate + bundle (ESM + CJS + types) into dist/
npm run smoke      # run the build smoke tests

Publishing to npm

# one-time: create the free @unlok3rs org at npmjs.com, then
npm login
npm publish        # "build" runs automatically via prepare; access is public

The scope @unlokers must be an npm org/user you own. If you'd rather not create the org, rename "name" in package.json to an unscoped name (e.g. unlokers-powered-by) or @unlok3rs/powered-by, and update the CDN URLs above.

License

MIT for the code. The unlokers name and marks are trademarks — see LICENSE. The badge is meant to be displayed as attribution on sites/apps unlokers built. Don't modify the marks.