@tollerud/footer

React footer with the Tollerud monogram, link to tollerud.no, optional attribution (e.g. client name), and composable Tailwind-friendly classes. Matches copy used on dispatch.tollerud.dev adds an extra “for …” segment.

Install

npm install @tollerud/footer

Peer dependency: react ^18 or ^19.

Tailwind

So Tailwind can see classes inside this package, add it to content in tailwind.config:

content: [
  './app/**/*.{js,ts,jsx,tsx,mdx}',
  './node_modules/@tollerud/footer/dist/**/*.{js,mjs,cjs}',
],

(Adjust paths to match your app; including src is fine if you use that layout.)

Usage

import { Footer } from '@tollerud/footer'

export default function Layout({ children }: { children: React.ReactNode }) {
  return (
    <>
      {children}
      <Footer />
    </>
  )
}

With your useLanguage / i18n

Pass strings from your app; the package does not depend on @/contexts:

'use client'

import { Footer } from '@tollerud/footer'
import { useLanguage } from '@/contexts/LanguageContext'

export function SiteFooter() {
  const { t } = useLanguage()
  return (
    <Footer
      labels={{
        tollerudProject: t.footer.tollerudProject,
        allRightsReserved: t.footer.allRightsReserved,
      }}
    />
  )
}

Default English copy matches the public sites: “A Tollerud Project” and “All rights reserved.” Omit keys you do not need to override.

Attribution (Dispatch-style)

<Footer
  labels={{
    attribution: 'for Advania Norge AS.',
  }}
/>

Renders: A Tollerud Project (linked) for Advania Norge AS. All rights reserved.

Custom surface (any background)

Default footer applies bg-gray-50 / dark:bg-gray-900 and a top border. For overlays (e.g. 50% black on top of imagery or video), use unstyled and pass your own surface classes or inline styles so you are not fighting those defaults:

<Footer
  unstyled
  className="border-t border-white/10 bg-black/50 backdrop-blur-sm"
  classNameText="text-sm text-white/90"
  classNameLogo="h-5 w-5 text-[#ffff00]"
  classNameLink="decoration-[#ffff00] text-white/95"
/>

Same idea with inline style:

<Footer
  unstyled
  className="border-t border-white/10 backdrop-blur-sm"
  style={{ backgroundColor: 'rgba(0, 0, 0, 0.5)' }}
  classNameText="text-sm text-white/90"
  classNameLogo="h-5 w-5 text-[#ffff00]"
/>

Props: className / style on <footer>, classNameInner on the inner max-width row, classNameLogo, classNameText, classNameLink. Tailwind’s build must still scan this package (see above).

Develop and publish

npm install
npm run build
npm pack   # optional: inspect tarball

1. Create an npm account and log in: npm login.

2. For a scoped name (@tollerud/footer), either publish as public the first time:

   npm publish --access public

   or create the @tollerud org on npm and add your user.

3. Update repository, author, and name in package.json if your scope or repo differs.

After publish, bump version with npm version patch|minor|major and npm publish --access public again for updates.