shadcn.io is not affiliated with official shadcn/ui
Documentation Footer Block for Radix UI
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.
Installation
Overview
A documentation footer for React with Radix UI. It repeats the docs layout at the foot of a page: first the page before and the page after, as two cells with overshoot lines and + marks, then a ruled row with an Edit this page link and a pencil, then the wordmark beside four link groups (Getting started, Guides, API reference, Examples) in the nav labelled Footer, and a legal band. It's built from Guides, plain links and your theme's tokens, and it is a static component with no state.
FAQ
How does a previous or next cell work?
The page's title is the link, and its box is stretched over the whole cell with an ::after pseudo-element, so a click or tap anywhere in the cell follows it while a screen reader meets one link per cell, named by the page title. The keyboard focus ring is drawn on that box, inside the cell. Previous sits at the start of the row and Next at the end, and their arrows mirror in a right-to-left layout.
How do I set the neighbouring pages?
Edit the PREVIOUS and NEXT constants at the top of the file: each has a title, a one-line detail and an href. On the first page of a guide there is no previous page: delete the Previous cell and give the Next cell md:col-start-2, so it keeps its place at the end.
Where does Edit this page go?
Point its href at the page's source in your repository (the URL that opens the file in an editor). It sits in its own ruled row so it reads as an action on this page, apart from the site-wide links under it.
Why aren't the page cells a second nav?
A footer keeps one navigation landmark, labelled Footer, for the site's links. The two cells are a short list named "Neighbouring pages" under a heading that only screen readers see ("Keep reading"), so they are announced as part of the footer without adding a landmark.