When to use it

Use Footer when a storefront needs a shared closing shell but the app should still control the exact section order and structure.

It pairs naturally with HeaderSection or the lower-level Header family when the storefront wants the same shell-level control at both the top and bottom of the page.

That usually means:

• support / help navigation columns
• newsletter or editorial signup content
• payment or trust content
• a brand/legal closing row

Composition model

Footer is now entirely composition-first:

• Footer.Main — high-level vertical stack wrapper
• Footer.Columns — responsive columns grid
• Footer.Column — one footer column
• Footer.Heading — column heading
• Footer.LinkList and Footer.Link — navigation primitives
• Footer.Newsletter — newsletter/editorial region
• Footer.Payments — trust/payment row
• Footer.Divider — separator between upper and lower regions
• Footer.Bottom — closing row container
• Footer.Brand — brand/copyright cluster
• Footer.Legal — legal / utility links cluster

The root provides the shell styling (bg-card text-card-foreground) and the standard responsive container width.

Behavior and theming guidance

The footer uses semantic card colors so it can separate cleanly from the page body while remaining themeable.

The default slot primitives intentionally stay lightweight:

• Footer.Columns gives you the responsive grid
• Footer.Link gives you consistent link styling
• Footer.Bottom gives you a stacked-on-mobile, row-on-desktop closing region

Everything else is yours to compose.