Skip to main content
Clever Ops

Fine Print Footer

A disclosure-first footer for regulated products, numbered fine-print notes set in readable React and Tailwind type, a licence line, quiet links, and a mono copyright rail.

Preview & code

Loading Fine Print Footer preview

Installation

pnpm dlx shadcn@latest add @cleverui/footer-fine-print

Requires the @cleverui registry in your components.json, a one-off, two-line setup.

Usage

tsx
import { FooterFinePrint } from '@/components/blocks/footer-fine-print'
Exampletsx
import { FooterFinePrint } from '@/components/blocks/footer-fine-print'

export default function FooterFinePrintDemo() {
  return (
    <div className="mx-auto w-full max-w-6xl">
      <FooterFinePrint
        brand="Northstack Lending"
        notes={[
          'Northstack Lending products are offered by Northstack LLC, NMLS ID 2170331. Equal Housing Lender. Licensing information is available at nmlsconsumeraccess.org. Not all products are available in all states.',
          'Rates, fees, and loan terms are subject to credit approval and underwriting. APR ranges from 5.49% to 18.99% for qualified applicants as of January 2026. Your rate depends on credit profile, loan amount, and term selected.',
          'This site does not constitute an offer to lend. Pre-qualification results are estimates only and do not guarantee approval or final terms. A formal application and full underwriting review are required before any commitment is made.',
          'For California residents: loans made or arranged pursuant to a California Financing Law license. For New York residents: Northstack LLC is licensed by the New York Department of Financial Services.',
        ]}
        licence="Northstack LLC · NMLS ID 2170331 · Equal Housing Lender"
        links={[
          { label: 'Privacy', href: '#' },
          { label: 'Terms', href: '#' },
          { label: 'Licences', href: '#' },
          { label: 'Complaints', href: '#' },
          { label: 'Accessibility', href: '#' },
          { label: 'Disclosures', href: '#' },
        ]}
        copyright="© 2026 Northstack LLC. All rights reserved."
      />
    </div>
  )
}

API reference

FooterFinePrint accepts the following props.

PropTypeDefaultDescription
brandstring
notes*string[]2-5 numbered disclosure paragraphs, real regulatory copy, true ol
licencestringregistration line, e.g. 'Northstack LLC · NMLS ID 2170331 · Equal Housing Lender'
links{ label: string; href: string }[][]max 8 utility links, Privacy, Terms, Licences, Complaints, Accessibility
copyrightstringe.g. '© 2026 Northstack LLC. All rights reserved.', pass year in copy

…plus everything from React.HTMLAttributes<HTMLElement>: className, event handlers, aria attributes and the rest pass straight through.

Frequently asked questions

How do I install the Fine Print Footer component?

Register the @cleverui registry in your components.json ("@cleverui": "https://cleverops.com.au/r/{name}.json"), then run `npx shadcn@latest add @cleverui/footer-fine-print`. The shadcn CLI copies the source into your project, you own the code from that point. You can also copy the source directly from this page.

What dependencies does Fine Print Footer require?

Fine Print Footer uses motion on top of React and Tailwind CSS. You don't need to install it manually, the shadcn CLI resolves and installs npm dependencies automatically when you add the component.

Can I theme Fine Print Footer to match my brand?

Yes. The component is styled entirely with Tailwind utilities over standard design tokens (primary, background, muted, border), so it inherits your existing shadcn/ui theme automatically. Change your CSS variables and the component follows, no source edits needed for palette, radius, or fonts.

Want this built for you?

CleverUI is built by the Clever Ops web team. If you'd rather ship a hand-coded, fast, custom website than assemble one, we build them for Australian businesses every week.

Explore web development services