Section footer components

Powerful and customizable React section footer components built for modern applications and websites. These section footers are built using React Aria and styled with Tailwind CSS.

Installation

You can add this section footer component using our CLI or manually:

npx untitledui@latest add section-footer

Below are examples and variations of this section footer component:

API reference

Import the parts and assemble them:

import { SectionFooter } from "@/components/application/section-footers/section-footer";
 
<SectionFooter.Root>
    <SectionFooter.Actions />
</SectionFooter.Root>

FAQs

Please refer to our frequently asked questions page for more.

There is one component with two layouts, switched with the boolean isCard prop on SectionFooter.Root. The default (no isCard) is the page-level footer, which only adds top padding under its divider. With isCard, the footer picks up the horizontal and vertical padding needed to sit flush inside a card.

Wrap them in SectionFooter.Actions. It renders a flex container with flex-1 and justify-end, so it absorbs the remaining space and right-aligns its children with a consistent gap. Anything you place before it — a button group, a "link-gray" button, a label — stays left-aligned.

Two: SectionFooter.Root, the container that draws the top divider and spacing, and SectionFooter.Actions, the right-aligned action area. Everything else is your own markup placed as children of SectionFooter.Root.

SectionFooter.Root accepts every standard div prop (including ref, id, and event handlers) plus the boolean isCard. SectionFooter.Actions accepts the same standard div props. Both merge whatever you pass in className with their own classes, so you can extend the styling without overriding the layout.

The divider is a border-t border-secondary on SectionFooter.Root, and the spacing depends on the layout. The default footer uses gap-5 pt-4 md:pt-5, so it only adds top padding and steps up once at the md breakpoint. The card footer (isCard) uses gap-4 px-4 py-3 md:py-4 lg:px-6, stepping its vertical padding up at md and its horizontal padding up at lg. Pass your own Tailwind classes through className to override either — for example className="border-none" to drop the divider.

Radar chartsSection headers