shadcn.io is not affiliated with official shadcn/ui
Product Specs Storefront Block for React
A spec sheet for a wool overcoat: three key features, specs in Materials, Dimensions and Details tabs, a search that marks matches with a count per tab, and a button that downloads a text file.
Installation
Overview
Give people the exact details of a product and let them take them away, with this spec sheet for React with Base UI. A header says what Whortle & Co, a merino coat maker, sells and holds a Find a spec Input. In a hairline frame with a plus mark on each corner, the first band names three key features. Under it, three Tabs (Materials, Dimensions, Details) hold six rows each as a description list. Typing in the field marks the matching rows in every group, dims the rest without moving anything, and puts the number of matches on each tab; the status line says how many were found. The foot Shine Button really downloads a text file built from the specs, and the status line names it and its size. It's built from Tabs, Input, Field, Shine Button and Guides, with a CSS entrance only. For a product page, a technical data sheet or a catalogue entry.
FAQ
How do I fill it with my own specs?
Edit GROUPS: each group has an id, a label and a list of { label, value } rows. Keep the same number of rows in each so the tabs stay the same height. The feature cards are FEATURES.
What does the search look at?
The label and the value of every row in every group, ignoring case. A match is underlined and its row is tinted; a row that does not match is dimmed and keeps its place. The number on a tab is the number of matches in that group while you search.
Is the download real?
Yes. The text is built from the same data, turned into a Blob and saved by a link the page clicks, so a text file named harrow-overcoat-specs.txt lands in your downloads. Nothing is uploaded; the status line says the file name and its size.
What stays local, and how do I wire it to real data?
The specs are a sample as of a fixed date and nothing is sent. Replace GROUPS with your product data. For a PDF or a CSV, change sheetOf and the file name and type in saveText.