shadcn.io is not affiliated with official shadcn/ui
Product Care Storefront Block for Ark UI
A care card for a cashmere jumper: five drawn care symbols that each show a plain-words instruction, a bar of the fibres with shares that add to 100, three storage tips and a button that copies the care text.
Installation
Overview
Tell a customer how to keep the thing they bought looking new, with this care card for React with Ark UI. A header says what Linhope, a cashmere knitwear shop, sells. In a hairline frame with a plus mark on each corner, the first band draws five care symbols as line glyphs in hairline cells (a generic set, not the registered one): hand wash, no bleach, dry flat, cool steam and dry clean. Pressing or focusing a symbol puts its instruction in plain words in the line under the grid. The next band is a bar of what the yarn is made of, with shares worked out from typed grams by largest remainder so they always add to 100. The last band lists three storage tips beside the chosen tip. The foot Copy Button copies the whole care text to the clipboard and the status line says Care text copied. It's built from Copy Button, Guides and native buttons, with a CSS entrance only. For a product page, a care insert or an order confirmation.
FAQ
How do I use my own symbols and fibres?
Edit SYMBOLS (a label, a short limit, the instruction and an SVG path in a 32 box) and FIBRES (a name and grams). The percentages, the bar and the care text are all derived from them.
How are the fibre shares worked out?
Each fibre's grams are divided by the total, rounded down, and the points left over go to the largest remainders, so the shares always add to exactly 100 and the bar has no gap.
Are these the standard laundry symbols?
No. Care symbols are a registered set with legal meaning, so these are plain line drawings with a label and a sentence. If you need the registered marks, use the set you are licensed to use, and keep the sentence.
What does Copy care text do?
It writes the symbols, the fibres and the tips as plain text to the clipboard and the status line says so. If the browser refuses (for example on a page not served over HTTPS), the status line says it could not copy.
What stays local, and how do I wire it to real data?
The figures are a sample and nothing is sent. Replace the arrays with your product's data, or build them from your product feed.
Is it accessible?
Each symbol is a button with its name and limit as text and a pressed state, the glyph itself is decorative, the instruction is shown as text and not only in a tooltip, and the status line is a polite live region present from the start. Focus moves the instruction as well as a press, so keyboard users hear it.