shadcn.io is not affiliated with official shadcn/ui
Two-Tone Split Footer Block for React Aria
A split footer for a photo-print service: a tinted brand half with the wordmark, a promise, a small stack of drawn prints and the legal line, and a plain half with three link columns behind a divider.
Installation
Overview
A footer for React with React Aria in two tones that both come from your theme. The brand half is tinted and reaches the viewport's start edge: the wordmark, a two-line promise, a small stack of three drawn prints and, at its foot, the copyright and policy links. The other half is plain and holds three link columns (Shop, Help, Company) behind a divider that runs from the page's top rule to the end of the page with a + where it meets the rule. On a phone the tinted brand block comes first and the columns follow under a rule. It's built from Guides, plain links and your theme's tokens, with no JavaScript of its own.
FAQ
Why is it called dark-light if it follows the theme?
The slug keeps its old name so existing links keep working. The two halves are two tones of the same theme: the brand half is the muted tint, the link half is the page. Nothing forces a dark scope, so the contrast between the halves holds in light and dark themes.
How does the tint reach the edge of the screen?
A layer behind the brand half extends past the page column to the viewport's start edge (to both edges on a phone, where the block is full width). The footer clips it, so it never causes sideways scrolling, and it flips to the right edge in a right-to-left layout.
What are the three prints?
A small drawing made of plain elements, a card with a mat, a sun and a horizon, hidden from screen readers. Replace it with your own product images, or delete the block, and the half keeps its layout.