Get Started- Complete documentation overview

Attribution badge component linking to ShipSafe.st, typically used in footers.

Location: src/components/ui/BuiltWithShipSafe.tsx

Overview

The BuiltWithShipSafe component is an attribution badge that displays "Built with ShipSafe" text along with the ShipSafe logo. It links to the ShipSafe.st website and is commonly used in footer sections. This component helps give credit to the boilerplate while providing a link back to the main ShipSafe website.

šŸ’” Affiliate Link Opportunity: This component is perfect for adding your ShipSafe affiliate link! Simply replace the default URL with your affiliate link to earn commissions when users click through. This provides a win-win: you get credit for using the boilerplate, and you can monetize the attribution badge.

Quick Customization

This component is simple but customizable:

  • Link URL - Default https://www.shipsafe.st/?ref=YOUR_APP (replace YOUR_APP with your product slug or affiliate id)
  • Styling - Touch-friendly badge (min-h-11, inline-flex) with hover effects
  • Logo - Uses /_shipsafe-logo-w.png (white-outline shield for dark UI). Do not use an SVG export (WebKit/iOS breaks foreignObject) or black-outline logo.png (invisible on dark footers).
  • Layout - Text + Logo + Brand name layout

šŸ’” Pro Tip: Replace the default URL with your ShipSafe affiliate link to monetize this attribution badge while giving credit to the boilerplate.

Usage

import BuiltWithShipSafe from "@/components/ui/BuiltWithShipSafe";

<BuiltWithShipSafe />

Props

This component accepts no props. It's a simple presentational component.

Examples

Basic Usage

import BuiltWithShipSafe from "@/components/ui/BuiltWithShipSafe";

// In footer
<BuiltWithShipSafe />

Common Use Cases

// Footer attribution
<footer>
  <div className="flex items-center justify-between">
    <p>Ā© 2025 My App</p>
    <BuiltWithShipSafe />
  </div>
</footer>

// With custom spacing
<div className="mt-8">
  <BuiltWithShipSafe />
</div>

Component Structure

const BuiltWithShipSafe = () => {
  return (
    <Link href="https://www.shipsafe.st/?ref=YOUR_APP" target="_blank" rel="noopener noreferrer">
      {/* "Built with" text */}
      {/* ShipSafe logo icon (/_shipsafe-logo-w.png only) */}
      {/* "ShipSafe" brand name */}
    </Link>
  );
};

Elements:

  • Text: "Built with" (subtle gray text)
  • Logo: White-outline ShipSafe shield PNG (/_shipsafe-logo-w.png) ā€” required for visibility on dark badges
  • Brand name: "ShipSafe" (bold text)
  • Link: Opens https://www.shipsafe.st/?ref=YOUR_APP in a new tab (replace YOUR_APP)

Styling Notes

  • Badge style: Rounded border with subtle dark background
  • Hover effects: Border and text color change on hover
  • Size: Touch-friendly (min-h-11)
  • Layout: Horizontal flex layout with gaps
  • Responsive: Adapts to container size

Customization

To customize the component, edit BuiltWithShipSafe.tsx directly:

// Replace YOUR_APP with your product slug or affiliate id
<Link href="https://www.shipsafe.st/?ref=YOUR_APP">

Do not point Image at an SVG logo export ā€” WebKit/iOS will not render the foreignObject dump. Use /_shipsafe-logo-w.png only.

Best Practices

  1. Footer placement - Typically placed in footer sections
  2. Keep it for affiliate income - Add your affiliate link to monetize the badge
  3. Consistent placement - Use in consistent location across pages
  4. Respect attribution - Keep attribution while earning commissions
  5. Styling - Badge design ensures it's visible but not intrusive

šŸ’” Why Keep It:

  • Earn affiliate commissions when users click through
  • Give credit to the boilerplate (good practice)
  • Minimal visual impact, maximum value
  • Easy to customize with your affiliate link

Tips

  • Footer: Usually placed in footer bottom right or center
  • Affiliate Link: Add your affiliate link to earn commissions - don't remove it!
  • Customization: Easy to modify if you want different text/logo
  • Accessibility: Opens in new tab with proper rel attributes
  • Monetization: This badge can generate passive income through affiliate commissions

Learn More