@maddiek/sve-ui

Shared UI components for Social Value Engine websites.

Install

npm install @maddiek/sve-ui

SveFooter

A "Part of the SVE family" sister sites strip — drop it into any SVE family site to show the network of related platforms.

import { SveFooter } from "@maddiek/sve-ui";

export default function App() {
  return (
    <>
      {/* your page content and footer */}
      <SveFooter />
    </>
  );
}

Renders a dark #01343F band with the label "Part of the SVE family" and links to all five sister sites. No logo needed — just drop it in.

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | sites | SveSisterSite[] | All five SVE sites | Override the list of sites shown |

SveSisterSite

interface SveSisterSite {
  name: string;
  href: string;
}

Default sites

• Rose Regeneration — roseregeneration.co.uk
• Impact Card Studio — impactcardstudio.com
• Place Explorer — place.socialvalueengine.com
• My Impact — app.myimpact.social
• Social Value Direct — direct.socialvalueengine.com

Tailwind Preset

Adds SVE brand colour tokens to any Tailwind project.

// tailwind.config.js
import svePreset from "@maddiek/sve-ui/tailwind-preset";

export default {
  presets: [svePreset],
  content: [
    "./src/**/*.{ts,tsx}",
    "./node_modules/@maddiek/sve-ui/dist/**/*.js",
  ],
};

Available colour tokens: sve-primary, sve-teal, sve-olive, sve-gold, sve-bg, sve-gray.