shadcn.io is not affiliated with official shadcn/ui
Digital Download Storefront Block for Ark UI
A download page for a typeface with a format switch, one row per file with its real size, working Download buttons that save a small file, a downloads-left counter and a licence key behind a Show switch.
Installation
Overview
Hand over digital goods after the sale, with this download page for React with Ark UI. A header names the foundry and the licence. In a hairline frame with a plus mark on each corner, the first band is the product with a drawn specimen tile; the second holds a Segment Group of formats (OTF, WOFF2, ZIP) beside a count of downloads left out of three; under it one row per file shows its name, its format and its size in bytes, with a Download button that names the file. Every download is real: the click builds a small text Blob, saves it through an anchor and revokes the URL, and the size shown is that Blob's own length. Each one spends a download; at zero the buttons answer with the reason and Restore puts them back. The last band keeps the licence key behind a Show Switch with a Copy button that uses the clipboard. Download all is the one Shine Button. For a shop of fonts, software, music or ebooks.
FAQ
What does a download really do?
It builds a Blob from a short text, creates an object URL, clicks a temporary anchor with a download name and revokes the URL a second later. The file is plain text that stands in for the font, and the size on the row is the byte length of that same text. Replace textOf with a fetch of your real file, or point the anchor at a signed URL.
How does the downloads-left counter work?
It starts at two of three left and drops by one for each file or bundle you save. At zero the buttons stay in place but are marked unavailable and answer with Restore to try again, so the layout never changes. The counter lives in the page; enforce the limit on your server.
How do I change the formats and files?
Edit FORMATS, STYLES and ZIPS. The list keeps room for four rows whatever the format, so switching never moves the page.
How is the licence key kept hidden?
It is rendered masked, one dot for each letter and digit, and shown only when the switch is on. A screen reader hears Hidden until then. Copy always copies the real key and reports success or failure in the status line. The key is fictional.