@utkarshdz/recipe-ui-kit

A small, reusable StencilJS web component library built for the Recipe Finder & Meal Planner app. Components are framework-agnostic standard web components, consumed here from a SvelteKit application.

Components

| Tag | Purpose | | ----------------------- | -------------------------------------------------------------------- | | rui-recipe-card | Displays a recipe thumbnail, title, meta badges, and favorite toggle | | rui-star-rating | Interactive/readonly star rating input | | rui-meal-slot | A single day cell in the weekly meal planner | | rui-search-bar | Search input with optional filter chips | | rui-confirm-dialog | Modal confirmation dialog (e.g. for delete actions) |

See each component's own readme.md under src/components/<name>/ for full props/events/slots API, auto-generated by Stencil's docs-readme output target.

Development

npm install
npm start      # dev server with live reload, serves src/index.html
npm run build   # production build to dist/ and loader/
npm test        # unit tests

Consuming this package

This package ships a dist-custom-elements build, so components can be imported individually as standalone custom elements — the recommended approach when consuming from another framework such as Svelte:

import '@utkarshdz/recipe-ui-kit/dist/components/rui-recipe-card.js';

Once imported, the custom element is registered and can be used directly in markup:

<rui-recipe-card recipe-title="Spaghetti Carbonara" image="..." category="Pasta" area="Italian">
  <a href="/recipes/123">View recipe</a>
</rui-recipe-card>

Properties are passed down as normal DOM properties/attributes, and components emit standard CustomEvents that consumers listen to (favoriteToggle, ratingChange, removeMeal, search, filterChange, confirm, cancel).

Theming

Components read a small set of CSS custom properties (with sensible defaults), settable from a consuming app's global stylesheet:

:root {
  --rui-color-primary: #ea580c;
  --rui-color-surface: #ffffff;
  --rui-color-text: #1f2937;
  --rui-color-muted: #6b7280;
  --rui-color-border: #e5e7eb;
  --rui-radius: 12px;
}