shadcn.io is not affiliated with official shadcn/ui
Delivery Estimator Footer Block for Radix UI
A footer for a home-goods shop with a postcode delivery estimate, four link columns, and a row of generic payment marks.
Installation
Overview
A delivery-estimator footer for React with Radix UI, for a shop that ships physical goods. Sillby’s wordmark and one sentence sit above a ruled band: a postcode Field and a Check Shine Button. Submitting a code of 3 to 10 characters, made of letters, digits, spaces and hyphens, sets the status line to “2 to 4 working days.” An empty field sets “Enter a postcode.” Anything else sets “Check the postcode and try again.” The status line is in the page from the start, so the answer replaces the idle sentence instead of pushing the columns down. Nothing is looked up or sent. Under the band, a nav labelled Footer holds four groups (Shop, Help, Company, Legal) of four links, two per row on a phone and four from md. The legal row carries the copyright and four drawn payment marks (Card, Wallet, Bank transfer, Pay later), each a small greyscale glyph plus its name. The rails and the top rule come from the Guides spine, and each band draws its own top rule with + marks. It’s built from Field, Input, ShineButton and Guides.
FAQ
What does Check actually decide?
estimateOf trims the field and tests it against POSTCODE. A match always returns the same sentence, “2 to 4 working days.”, whatever the code was. An empty field returns “Enter a postcode.” Anything that fails the pattern returns “Check the postcode and try again.” There is no depot lookup. Replace estimateOf with a call to your shipping API and keep the three outcomes, so the status line still has one of those jobs.
How does the answer get announced?
The line under the field is a role="status" paragraph, present while the form is idle with “For delivery in the home islands.” Submitting replaces that text, which is the change a screen reader announces. The input points at the line with aria-describedby, and aria-invalid is set only for the two errors. Typing does not re-check; Check does.
Why aren’t the payment marks brand logos?
The row is four generic drawings, Card, Wallet, Bank transfer and Pay later, with the name in text. The glyph is aria-hidden. Swap the SVG in Mark if you have rights to a scheme’s mark, and keep the visible name. They are not links.
How do I change the columns?
Edit GROUPS. Each group is a title and four links. Four groups fill the grid: two columns below md, four from md. The policy links live in the Legal group. The foot of the page is the copyright and the payment marks, not a second copy of those policies.