shadcn.io is not affiliated with official shadcn/ui
Buyer and Seller Tabs Footer Block for Vue
A marketplace footer with Buy and Sell tabs that swap the link groups and the closing action, for a handmade-goods market.
Installation
Overview
A marketplace footer for Vue with Ark UI, for Kilnby, a handmade-goods market. Buy and Sell tabs swap three link groups and the closing action: buyers get an outline Button ("Browse listings"), sellers get the Shine Button ("Start selling"). Both panels stay in the page, and an unseen copy of each holds the height of the taller one so the footer does not jump. The rails and the rules between the brand, the links and the legal band come from Guides. It's built from Tabs, Button, Shine Button and Guides.
FAQ
How do the Buy and Sell tabs work?
Two tabs, Buy and Sell. The arrow keys move between them. Choosing one shows that audience's three link groups and its action, and hides the other. Both panels stay in the HTML, so both audiences' links are in the markup.
lazyMount and unmountOnExit are off, so a closed panel stays mounted.
An extra copy of both panels sits in the same grid cell, unseen and removed from keyboard and screen-reader reach, so the footer keeps the height of the taller panel.
How do I change the links and the actions?
Edit AUDIENCES at the top of the file. Each audience has an id, a label, a tone (outline or shine), an action (the button's text) and three groups of links. LEGAL is the policy row. Every link is a plain anchor with href="#": point it at its page, or swap the anchor for your router's link. Keep the two audiences the same shape if you want the footer to stay the same height.
Which button is the primary one?
Only one action is on screen. Buy shows an outline Button, "Browse listings". Sell shows the Shine Button, "Start selling". The other stays in the markup, hidden with its panel. Each button wraps an anchor.
How do screen readers move through it?
The block is a footer. The tabs are a tab list labelled Buy or sell. The open panel is a nav labelled Footer, each group a small h2 over a list. The closed panel is hidden, and the height-holding copy is inert, so only one Footer nav is announced. The policy links are a list named Legal. Every link and tab shows the theme's focus ring.