Dietary Filters

Wrapped diet chip filter where selected options fill with emerald and inactives stay bordered.

Dietary preferences

Requires shadcn/ui initialized. Run npx shadcn@latest init if you haven't.

Import & use

import { Food9 } from "@/components/beste/piece/food9";

<Food9
  heading="Dietary preferences"
  filters={[
    "Vegetarian",
    "Vegan",
    "Gluten-free",
    "Lactose-free",
    "Keto",
    "Halal",
    "Kosher",
    "Nut-free"
  ]}
  active={[
    "Vegetarian",
    "Gluten-free"
  ]}
/>