@adarsh.nishad/recipe-ui

A modern, accessible Web Component library for the Zesto Recipe Finder & Meal Planner application, built with StencilJS.

🎨 Design System

recipe-ui is crafted based on the Warm Editorial design system:

• Primary Color: Terracotta (#a53c05 / #ff7e47)
• Secondary Color: Deep Sage Green (#396759)
• Backgrounds & Surfaces: Tiered clean neutrals (#f8f9fb, #ffffff, #f2f4f6)
• Typography: Serif headlines (Fraunces) & interface typography (Be Vietnam Pro / Inter)
• Shadows & Elevation: Subtle ambient shadows with interactive micro-animations

📦 Components

| Component | Description | Docs | | :--- | :--- | :--- | | recipe-hero | High-impact "Recipe of the Day" hero banner with editorial styling & CTA | Docs | | recipe-card | Core recipe card with image zoom, rating badge, favorite toggle, and social cooked stack | Docs | | recipe-category-card | Curated collection category card (Breakfast, Healthy, Dinner, etc.) with recipe count | Docs | | recipe-button | Versatile button (primary, secondary, outline, ghost, danger, icon) with loading spinner | Docs | | recipe-badge | Dietary tags (vegan, spicy, gluten-free), status badges, and interactive filter chips | Docs | | recipe-input | Text & pill search inputs with prefix/suffix icons, clear button, and validation states | Docs | | recipe-textarea | Multi-line textarea for instructions and ingredients with live character counter | Docs | | recipe-select | Custom dropdown select for cuisines, meal types, servings, and difficulty | Docs | | recipe-meal-slot | Weekly meal planner slot card (Breakfast, Lunch, Dinner, Snack) with empty & filled states | Docs | | recipe-modal | Accessible dialog modal with backdrop blur, animations, and confirmation actions | Docs | | recipe-rating | Star rating with numerical score display and interactive star selection | Docs | | recipe-alert | Status and validation banners (info, success, warning, error) with icons | Docs | | recipe-avatar | User profile avatar with initials fallback and multiple size presets | Docs | | recipe-tabs | Pill, Underline, and Contained navigation tabs for recipe sections & day selectors | Docs |

🚀 Getting Started

Installation

npm install @adarsh.nishad/recipe-ui

Start Dev Server (with Playground Demo)

npm start

Build for Production

npm run build

💻 Usage

1. In HTML / Vanilla JavaScript

<script type="module" src="https://unpkg.com/@adarsh.nishad/recipe-ui"></script>

<!-- Recipe Card with Dietary Badge -->
<recipe-card
  recipe-title="Artisan Margherita Pizza"
  image-src="https://images.unsplash.com/photo-1604382355076-af4b0eb60143"
  cooking-time="35 min"
  rating="4.8"
  category="Pizza, Italian, Vegetarian"
  cooked-count="12"
>
  <div slot="tags">
    <recipe-badge variant="vegetarian" text="Vegetarian" size="sm"></recipe-badge>
  </div>
</recipe-card>

2. In SvelteKit / Svelte 5 (apps/zesto)

In src/routes/+layout.svelte or your entry point:

import { defineCustomElements } from '@adarsh.nishad/recipe-ui/loader';

if (typeof window !== 'undefined') {
  defineCustomElements();
}

Then use the components directly in any .svelte file:

<recipe-hero
  badge-text="Recipe of the Day"
  hero-title="Fresh Salmon &"
  highlight-title="Avocado Bowl"
  description="A healthy, vibrant bowl packed with omega-3s and fresh greens."
  image-src="/images/salmon-bowl.jpg"
  cta-label="Start Cooking"
></recipe-hero>

3. Individual Subpath Imports (Tree-shaking)

Import individual custom elements without loading the entire bundle:

import '@adarsh.nishad/recipe-ui/recipe-button';
import '@adarsh.nishad/recipe-ui/recipe-card';
import '@adarsh.nishad/recipe-ui/recipe-badge';

🛠️ Development

Generate a new component:

npm run generate

Convention: All custom elements must use the recipe- tag prefix (e.g. recipe-button, recipe-card).