Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Footer blocks

Pro

FAQ Links Footer Block for React

An FAQ-links footer for a tax-prep app: five common questions as ruled link rows with a chevron and an All answers link, beside two link groups.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

An FAQ-links footer for React with Base UI. A split behind a divider that runs from the page's top rule to the end of the page. The start half is "Common questions": five questions as ruled rows, each one a link to its answer with a chevron, then an "All 62 answers" link. The end half holds the wordmark and one sentence, two link groups in the nav labelled Footer and, at its foot, the copyright and the policies under a rule. They are links, not an accordion: the answers live on their own pages. It's built from Guides, plain links and your theme's tokens, and it is a static component with no state.

FAQ

How do I change the questions?

Edit the QUESTIONS array at the top of the file: each entry has a label (the question) and an href. Keep them to about one line; a longer question wraps inside its row. The "62" in "All 62 answers" is example data: set it to your own count.

How is a whole row a link?

The row itself is the anchor, with the text at the start and a chevron at the end that mirrors in a right-to-left layout. Hovering or focusing tints the row, and the keyboard focus ring is drawn inside it so the rules around it are never covered.

Which links are in the Footer nav?

Only the two groups on the end half (Product and Help). The questions are a list under their own heading, "Common questions", so a screen reader meets one footer navigation and one clearly named list.

How does it fit on a phone?

The questions come first and fill the width, a rule separates them from the wordmark, the two groups sit side by side and the legal row stacks. Nothing scrolls sideways at 320 pixels.

  • Pro

    Documentation Footer

    Sitemaps and trails

    A documentation footer for a router library's docs: previous and next page cells, an Edit this page link with a pencil, four link groups and a legal band.

  • Pro

    Breadcrumb Footer

    Sitemaps and trails

    A breadcrumb footer for a CI service's docs: a trail band ending on the current page, three link groups in hairline columns and a foot band with the wordmark and policies.

  • Pro

    Page Feedback Footer

    Preferences

    A footer that asks whether the page was helpful: a Yes and No toggle that opens a note form with validation, a status line that thanks the reader, and two link columns.

  • Pro

    Support Hub Footer

    Company and places

    A support-hub footer for a help-desk product: a question and a row of help links, then three support channels as cells, live chat with an online status, email with its reply time and phone with its hours, each one link.

  • Pro

    Blog Footer

    Content and updates

    A blog footer for a data-engineering blog: topic pills with post counts, the two latest posts and an RSS link on one side, two link groups on the other.

  • Pro

    Categorized FAQ

    Topics and filters

    A topic-tabbed FAQ for a bookkeeping app: a compact header, a band of line tabs with a count on each, and one accordion per topic.

All 100 footer blocks