Footer

Pick a framework. Both use the same recipe, so the styling matches exactly.

Footer props for React
Prop	Type	Default	Description
children	content		Footer content inside the centered column.

Also takes className and children. Anything else passes through to the footer.

footer.demo.tsx

import { Footer, Link } from "../react/index.js";

export default function FooterDemo() {
  return (
    <div className="overflow-hidden rounded-md border border-line">
      <Footer>
        <div className="flex items-center justify-between gap-4">
          <span>© 2026 SnowballSH</span>
          <Link href="https://github.com/SnowballSH" external subtle>
            GitHub
          </Link>
        </div>
      </Footer>
    </div>
  );
}

Footer props for Svelte
Prop	Type	Default	Description
children	content		Footer content inside the centered column.

Also takes class and snippet children. Anything else passes through to the footer.

footer.demo.svelte

<script lang="ts">
  import { Footer, Link } from "../svelte/index.js";
</script>

<div class="overflow-hidden rounded-md border border-line">
  <Footer>
    <div class="flex items-center justify-between gap-4">
      <span>© 2026 SnowballSH</span>
      <Link href="https://github.com/SnowballSH" external subtle>GitHub</Link>
    </div>
  </Footer>
</div>