# Workflow marketplace > A store of workflow steps and ready-made presets with search, categories, a kind switch, a detail sheet and install, built on the shared catalog store. Source: https://docs.nasaqui.com/components/workflow-marketplace ## Install ```bash npx shadcn@latest add https://docs.nasaqui.com/r/workflow-marketplace.json ``` Browse and install the building blocks of automations. A listing is either a single **step** (a trigger or action you can add to any workflow) or a **preset** (a ready-made workflow of several steps). Steps show what they take, give and ask for; presets show the diagram they install. It is a thin layer over [`CatalogStore`](https://docs.nasaqui.com/components/catalog-store), so the card and detail layout matches any other Nasaq store. ## When to use - Letting people add steps to the palette of [`WorkflowCanvas`](https://docs.nasaqui.com/components/workflow-canvas) or start from a template. ## When not to use - Selling apps or plugins: use [`CatalogStore`](https://docs.nasaqui.com/components/catalog-store) directly. ## Import ```tsx import { WorkflowMarketplace } from "@fadymondy/nasaq/web"; // inside this monorepo: "@nasaq/web" ``` ## Quick start ```tsx import { WorkflowMarketplace } from "@fadymondy/nasaq/web"; import { Mail } from "lucide-react"; { await api.install(l.id); }} />; ``` ## Anatomy ``` WorkflowMarketplace (a CatalogStore) ├─ toolbar search, kind ToggleGroup (All, Steps, Presets), sort ├─ categories chips with counts, Installed ├─ cards badge: Preset, Trigger or Action └─ detail sheet step: takes, gives, settings; preset: the WorkflowNetwork diagram ``` ## API | Prop | Type | Default | Description | | --- | --- | --- | --- | | `listings` | `WorkflowListing[]` | required | `CatalogItem` fields plus `kind: "step" \| "preset"`, `step?: { role?, fields?, inputs?, outputs? }`, `preset?: { steps, links? }`. | | `categories` | `CatalogCategory[]` | required | `{ id, label, icon? }`. | | `onInstall?` | `(listing) => Promise` | none | Return `{ error }` to show why it failed. | | `onUninstall?` | `(listing) => Promise<...>` | none | Adds Uninstall to installed items. | | `onOpen?` | `(listing) => void` | none | "Open" once installed. | | `labels?` | `Partial & { store?: Partial }` | en/ar | Override strings. | ## Accessibility Inherits the catalog store's: named chip and toggle groups, a live result count, a focus-trapped sheet, `role="alert"` install errors. The preset diagram is real text in cards. ## RTL & i18n English and Arabic built in for the marketplace and the store. Field kinds and other code stay left-to-right; the preset diagram follows the reading direction. ## Styling & tokens Same tokens as the catalog store and workflow network. No raw hex. ## Do / Don't - **Do** give presets a short `steps` list (under ten) so the sheet diagram stays readable. - **Don't** put secrets in `step.fields`; it lists names and kinds only. ## Related - [CatalogStore](https://docs.nasaqui.com/components/catalog-store) · [WorkflowCanvas](https://docs.nasaqui.com/components/workflow-canvas) · [WorkflowNetwork](https://docs.nasaqui.com/components/workflow-network) ## Lab https://docs.nasaqui.com/?path=/docs/components-workflow-workflow-marketplace--docs ## Code ### React ```tsx import { WorkflowMarketplace } from "@fadymondy/nasaq/web"; import { Mail } from "lucide-react"; { await api.install(l.id); }} />; ``` ### shadcn ```tsx import { WorkflowMarketplace } from "@/components/ui/workflow-marketplace"; import { Mail } from "lucide-react"; { await api.install(l.id); }} />; ``` ### Vue ```vue ``` ### Blade ```blade @php $categories = [ ['id' => 'comms', 'label' => 'Messaging'], ['id' => 'flow', 'label' => 'Flow'], ]; $listings = [ [ 'id' => 'send-email', 'kind' => 'step', 'name' => 'Send email', 'summary' => 'Send a templated email.', 'category' => 'comms', 'icon' => 'mail', 'installs' => 1800, 'step' => ['role' => 'action', 'inputs' => ['Contact'], 'outputs' => ['Message id'], 'fields' => [['name' => 'to', 'label' => 'To', 'kind' => 'text', 'required' => true], ['name' => 'subject', 'label' => 'Subject', 'kind' => 'text']]], ], [ 'id' => 'new-order', 'kind' => 'step', 'name' => 'New order', 'summary' => 'Starts when an order is placed.', 'category' => 'flow', 'icon' => 'zap', 'installs' => 900, 'step' => ['role' => 'trigger', 'outputs' => ['Order']], ], [ 'id' => 'welcome', 'kind' => 'preset', 'name' => 'Welcome series', 'summary' => 'Greet every new customer.', 'category' => 'comms', 'installs' => 2400, 'preset' => ['steps' => [['id' => 'a', 'title' => 'Customer signs up'], ['id' => 'b', 'title' => 'Send email', 'kind' => 'system'], ['id' => 'c', 'title' => 'Done', 'kind' => 'output']]], ], ]; @endphp ``` ### HTML + Alpine ```html

3 results

  • Preset

    Greet every new customer.

    2.4K installs

  • Action

    Send a templated email.

    1.8K installs

  • Trigger

    Starts when an order is placed.

    900 installs
```