@atoryhub/footer

A reusable Atory footer component for React and Next.js applications. Uses standard links—navigation is handled by the consuming app.

Installation

npm install @atoryhub/footer
# or
yarn add @atoryhub/footer
# or
pnpm add @atoryhub/footer

Peer Dependencies

• react >= 17.0.0
• react-dom >= 17.0.0

Usage

Styles are included automatically—no separate CSS import needed. The footer injects its own styles when rendered.

Basic (default Atory content)

import { Footer } from "@atoryhub/footer";

function App() {
  return <Footer />;
}

Logo links to /, all links use default hrefs. Navigation is handled by your app's router.

With Custom Sections (e.g. auth flows)

Pass custom sections when you need custom behavior (e.g. auth modal instead of navigation):

import { Footer } from "@atoryhub/footer";

const sections = [
  {
    title: "Atory",
    links: [
      {
        name: "List your Company",
        href: "",
        onClick: (e) => {
          e.preventDefault();
          openAuthModal("login");
        },
      },
      // ...other links
    ],
  },
];

<Footer sections={sections} />;

Override Content

<Footer
  logoUrl="/my-logo.png"
  brandName="My App"
  description="Custom description."
  copyright="© 2025 My App"
/>

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | logoUrl | string | Atory logo | Logo image URL | | logoAlt | string | "Atory Logo" | Logo alt text | | brandName | string | "Atory" | Brand name next to logo | | description | string | Atory description | Company description | | email | string | [email protected] | Contact email | | sections | FooterSection[] | default Atory sections | Link sections (pass to override) | | copyright | string | "© 2025 Atory, Inc..." | Copyright text | | socialLinks | SocialLink[] | [] | Social media links | | expandOnScroll | boolean | true | Expand when user scrolls to bottom | | className | string | "" | Root element class | | linkHoverClassName | string | "" | Extra class for link hover (e.g. Tailwind hover:text-primary) | | accentClassName | string | "" | Extra class for accent elements like mail icon |

Types

interface FooterLink {
  name: string;
  href: string;
  onClick?: (e: React.MouseEvent<HTMLAnchorElement>) => void;
}

interface FooterSection {
  title: string;
  links: FooterLink[];
}

Optional: Tailwind Overrides

To use Tailwind utilities with the className, linkHoverClassName, or accentClassName props, add the package to your Tailwind content paths:

content: ["./src/**/*", "./node_modules/@atoryhub/footer/dist/**/*.{js,mjs}"]

Publishing

To use across projects, publish to npm:

cd packages/atory-footer
npm publish --access public

Or use as a local workspace package (see your monorepo setup).