shadcn.io is not affiliated with official shadcn/ui
Product Ingredients Storefront Block for Svelte
An ingredient list for a face serum with an I avoid filter: choose Fragrance, Tree nuts, Soy or Gluten and the matching ingredients are tinted, a verdict names them, and each row opens to its sourcing.
Installation
Overview
Let a shopper check a product against their allergies and preferences in seconds, with this ingredient list for Svelte with Ark UI. A header says what Peony & Pith, a small skincare maker, sells. In a hairline frame with a plus mark on each corner, the first band asks what you avoid with four toggle chips (Fragrance, Tree nuts, Soy, Gluten) and a status line that writes the verdict from the typed allergen tags: Contains 1 of your 2 avoids: sweet almond oil. Clear of: gluten. Under it ten ingredients are listed by share with a purpose word and their tags; an ingredient that carries one of your avoids is tinted and its tag turns solid, so colour is never the signal. One row is open at a time and shows where the ingredient comes from, and the open row keeps the list's height. It's built from native checkbox chips, a disclosure list and Guides, with a CSS entrance only. For a cosmetics, food or supplement product page.
FAQ
How do I use my own ingredients?
Edit INGREDIENTS: each has a name, a purpose, a share in tenths of a percent, a sourcing sentence and a list of tags that are ids from AVOIDS. Add an avoid by adding it to AVOIDS and tagging the ingredients.
How is the verdict worked out?
For the avoids you chose, it lists the ingredients whose tags include one of them, counts the avoids that were found, and names the ones nothing carries. Choosing none shows a prompt, and choosing avoids that are all absent says none is in it.
Can I trust the tags?
Only as far as your data. The tags here are a sample, and the sourcing text is made up. Always take allergen data from your supplier and keep the 'may contain' line on the product. The block derives the answer from your tags; it can not know what you left out.
What stays local, and how do I wire it to real data?
The ingredients and shares are a sample as of a fixed date and nothing is sent or saved. Replace the arrays with your formula, and persist the chosen avoids in your account if you want them kept.