Store Footer

Beta

The store footer: logo, tagline and payment methods, link columns and the newsletter sign-up, then the copyright and legal links.

Open in Figma

Preview

Mirrored is the same English content laid out right to left: it separates a mirroring bug from a translation one.

Installation

Add the component
$ npx ritla add store-footer
Also works with shadcn: npx shadcn@latest add @ritla/store-footer
Dependencies it brings
buttonfieldpayment-mark
Or copy by hand
Installing by hand copies the component's source into your project. The source comes with a Ritla UI license, so the CLI is the short way to the same files.

Usage

store-footer.tsx

import { StoreFooter } from "@/components/ui/store-footer";<StoreFooter  logo={<a href="/"><Logo /></a>}  tagline="Chairs and furniture, delivered across Jordan in 3-5 days."  payments={["visa", "mastercard", "apple-pay", "mada", "cliq"]}  groups={[{ title: "Shop", links: [{ label: "New in", href: "/new" }] }]}  newsletter={{ title: "Get 10% off your first order", onSubscribe: subscribe }}  copyright="© 2026 Ritla Store. All rights reserved."  legal={[{ label: "Privacy", href: "/privacy" }]}/>

API reference

StoreFooter

Prop	Type	Default	Description
`logo / tagline`	`ReactNode`	None	The logo linked home, and one or two lines.
`payments`	`PaymentMarkName[]`	None	The accepted payment marks.
`groups`	`{ title, links }[]`	None	The link columns (Shop, Help, Company): three across, also on a phone.
`newsletter`	`{ title, description?, onSubscribe, buttonLabel? }`	None	The email sign-up. Hidden without it.
`copyright / legal`	`ReactNode / { label, href }[]`	None	The bottom row.

Accessibility

Keyboard

Keys are written for left-to-right. In right-to-left the arrow keys swap: the one pointing toward the reading direction moves forward.

Key	Action
`Enter`	In the email field, subscribes.

ARIA

Each column is a nav named by its title; the legal links are another nav.
The email field is type="email", named “Email”, with autocomplete="email".

Arabic and RTL notes

Mirrors

Everything starts from the right: the logo, then the columns, then the newsletter.

Does not mirror

The logo and the payment marks never mirror.

Numerals: The year in the copyright is your own text.
Arabic typography: Column titles are label-14 Medium in gray/muted; links are label-16.
Mixed-direction text: The email types left to right (dir="ltr") even on an Arabic page, aligned to the start.