Badge

Wording

Proudly built with NebulaKit Built with NebulaKit Powered by NebulaKit

You started from the template and you are glad you did. Say so.

Ground

Dark Light

The HTML and web-component badges follow the reader’s own colour scheme whatever you pick here. This sets the image, and the side each of those starts from.

That is the real image, served from /badge.svg — link it wherever you like; it needs nothing from this site to render. The mark on its own lives at /badge-mark.svg.

Copy one

Every one of these points at https://nebulakit.starspace.group. Nothing loads a font, a stylesheet or a tracker from us — the mark is drawn inline, so the only request any of these makes is the one you can see.

Markdown

For a README on GitHub. It embeds the image above, so it stays fixed to the ground you picked — a README has no media queries to follow.

[![Proudly built with NebulaKit](https://nebulakit.starspace.group/badge.svg?variant=proudly&theme=dark)](https://nebulakit.starspace.group)

HTML

Real text rather than an image, so it scales with the page and reads to a screen reader. Follows the reader’s colour scheme on its own.

<!-- Proudly built with NebulaKit -->
<style>
.nebulakit-badge{display:inline-flex;align-items:center;gap:.5rem;padding:.4rem .75rem;
  border:1px solid #2e3150;border-radius:999px;background:#14162b;
  font:500 12px/1 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:#c3c8dd;text-decoration:none}
.nebulakit-badge svg{width:16px;height:16px;flex:none}
.nebulakit-badge b{font-weight:600;color:#ffffff}
.nebulakit-badge span{letter-spacing:.08em;text-transform:uppercase;font-size:10.5px}
@media (prefers-color-scheme:light){
  .nebulakit-badge{border-color:#dee2e6;background:#ffffff;color:#5a6169}
  .nebulakit-badge b{color:#1a1a1a}
}
</style>
<a class="nebulakit-badge" href="https://nebulakit.starspace.group" target="_blank" rel="noopener">
  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" aria-hidden="true"><rect width="24" height="24" rx="6" fill="#12142a"/><g fill="none" stroke-width="1.4"><ellipse cx="12" cy="12" rx="9" ry="3.2" stroke="#7c3aed" transform="rotate(-20 12 12)"/><ellipse cx="12" cy="12" rx="7.6" ry="2.7" stroke="#06b6d4" stroke-width="1.1" opacity="0.8" transform="rotate(22 12 12)"/></g><circle cx="12" cy="12" r="3.1" fill="#a855f7"/><circle cx="12" cy="12" r="1.7" fill="#e9d5ff"/></svg>
  <span>Proudly built with</span>
  <b>NebulaKit</b>
</a>

Web component

Two lines, no CSS to paste. The badge renders in a shadow root, so your styles cannot reach it and its styles cannot leak out.

<!-- One line. Follows the reader's colour scheme on its own. -->
<script src="https://nebulakit.starspace.group/badge.js" async></script>
<nebulakit-badge variant="proudly"></nebulakit-badge>

React

A component and the CSS it needs.

export function NebulaKitBadge() {
  return (
    <a
      className="nebulakit-badge"
      href="https://nebulakit.starspace.group"
      target="_blank"
      rel="noopener noreferrer"
    >
      <svg
        width="16"
        height="16"
        viewBox="0 0 24 24"
        aria-hidden="true"
        dangerouslySetInnerHTML={{ __html: "<rect width=\"24\" height=\"24\" rx=\"6\" fill=\"#12142a\"/><g fill=\"none\" stroke-width=\"1.4\"><ellipse cx=\"12\" cy=\"12\" rx=\"9\" ry=\"3.2\" stroke=\"#7c3aed\" transform=\"rotate(-20 12 12)\"/><ellipse cx=\"12\" cy=\"12\" rx=\"7.6\" ry=\"2.7\" stroke=\"#06b6d4\" stroke-width=\"1.1\" opacity=\"0.8\" transform=\"rotate(22 12 12)\"/></g><circle cx=\"12\" cy=\"12\" r=\"3.1\" fill=\"#a855f7\"/><circle cx=\"12\" cy=\"12\" r=\"1.7\" fill=\"#e9d5ff\"/>" }}
      />
      <span>Proudly built with</span>
      <b>NebulaKit</b>
    </a>
  );
}

/* Pair with this CSS (a module, Tailwind layer, or a plain stylesheet):
.nebulakit-badge{display:inline-flex;align-items:center;gap:.5rem;padding:.4rem .75rem;
  border:1px solid #2e3150;border-radius:999px;background:#14162b;
  font:500 12px/1 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:#c3c8dd;text-decoration:none}
.nebulakit-badge svg{width:16px;height:16px;flex:none}
.nebulakit-badge b{font-weight:600;color:#ffffff}
.nebulakit-badge span{letter-spacing:.08em;text-transform:uppercase;font-size:10.5px}
@media (prefers-color-scheme:light){
  .nebulakit-badge{border-color:#dee2e6;background:#ffffff;color:#5a6169}
  .nebulakit-badge b{color:#1a1a1a}
}
*/

Svelte

Drop it in anywhere. An app generated from the template already has this one in its footer.

<a class="nebulakit-badge" href="https://nebulakit.starspace.group" target="_blank" rel="noopener">
  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" aria-hidden="true"><rect width="24" height="24" rx="6" fill="#12142a"/><g fill="none" stroke-width="1.4"><ellipse cx="12" cy="12" rx="9" ry="3.2" stroke="#7c3aed" transform="rotate(-20 12 12)"/><ellipse cx="12" cy="12" rx="7.6" ry="2.7" stroke="#06b6d4" stroke-width="1.1" opacity="0.8" transform="rotate(22 12 12)"/></g><circle cx="12" cy="12" r="3.1" fill="#a855f7"/><circle cx="12" cy="12" r="1.7" fill="#e9d5ff"/></svg>
  <span>Proudly built with</span>
  <b>NebulaKit</b>
</a>

<style>
.nebulakit-badge{display:inline-flex;align-items:center;gap:.5rem;padding:.4rem .75rem;
  border:1px solid #2e3150;border-radius:999px;background:#14162b;
  font:500 12px/1 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:#c3c8dd;text-decoration:none}
.nebulakit-badge svg{width:16px;height:16px;flex:none}
.nebulakit-badge b{font-weight:600;color:#ffffff}
.nebulakit-badge span{letter-spacing:.08em;text-transform:uppercase;font-size:10.5px}
@media (prefers-color-scheme:light){
  .nebulakit-badge{border-color:#dee2e6;background:#ffffff;color:#5a6169}
  .nebulakit-badge b{color:#1a1a1a}
}
</style>

Vue

Single-file component, scoped styles.

<template>
  <a class="nebulakit-badge" href="https://nebulakit.starspace.group" target="_blank" rel="noopener">
    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" aria-hidden="true"><rect width="24" height="24" rx="6" fill="#12142a"/><g fill="none" stroke-width="1.4"><ellipse cx="12" cy="12" rx="9" ry="3.2" stroke="#7c3aed" transform="rotate(-20 12 12)"/><ellipse cx="12" cy="12" rx="7.6" ry="2.7" stroke="#06b6d4" stroke-width="1.1" opacity="0.8" transform="rotate(22 12 12)"/></g><circle cx="12" cy="12" r="3.1" fill="#a855f7"/><circle cx="12" cy="12" r="1.7" fill="#e9d5ff"/></svg>
    <span>Proudly built with</span>
    <b>NebulaKit</b>
  </a>
</template>

<style scoped>
.nebulakit-badge{display:inline-flex;align-items:center;gap:.5rem;padding:.4rem .75rem;
  border:1px solid #2e3150;border-radius:999px;background:#14162b;
  font:500 12px/1 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:#c3c8dd;text-decoration:none}
.nebulakit-badge svg{width:16px;height:16px;flex:none}
.nebulakit-badge b{font-weight:600;color:#ffffff}
.nebulakit-badge span{letter-spacing:.08em;text-transform:uppercase;font-size:10.5px}
@media (prefers-color-scheme:light){
  .nebulakit-badge{border-color:#dee2e6;background:#ffffff;color:#5a6169}
  .nebulakit-badge b{color:#1a1a1a}
}
</style>

Using it

The badge is yours to use on anything built with NebulaKit, at no cost and with nothing to sign. Link it back to https://nebulakit.starspace.group and leave the wording as it comes — those are the only two asks.

It is never required. NebulaKit is MIT-licensed, apps generated from the template ship the badge switched on as a courtesy, and showBuiltWithBadge: false in src/lib/site.config.ts removes it with no hard feelings.

Build your badge