Marketplace

Code

<Marketplace  categories={[{ id: "comms", label: "Messaging" }]}  listings={[{ id: "mail", name: "Send email", summary: "Send a templated email.", category: "comms", featured: true, permissions: [{ id: "mail.send", label: "Send email as you", risk: "high" }] }]}  onInstall={async (l) => { await api.install(l.id); }}  onPublish={async (draft) => { await api.submit(draft); }}/>

Storefront · beta

Live examples and controls: Marketplace in the lab.

InstallCopy Anchor Link

npx shadcn@latest add https://docs.nasaqui.com/r/marketplace.json

The full store around CatalogStore. Browsing is the catalog (search, category chips, sort, cards) with a featured strip above it. Opening an item shows a page instead of a sheet: install header, Overview / Changelog / Reviews tabs and a side column with details, permissions, links and tags. A Publish button opens a validated submit form, and a Templates view shows a gallery. It holds no data and calls no backend.

When to useCopy Anchor Link

• A store for extensions, plugins or apps where each item needs a real detail page and a publish flow.

When not to useCopy Anchor Link

• A simple grid with a side sheet: use CatalogStore alone.
• Selling physical goods with a cart: use the product components.

ImportCopy Anchor Link

import { Marketplace } from "@fadymondy/nasaq/web";
// inside this monorepo: "@nasaq/web"

Quick startCopy Anchor Link

<Marketplace
  categories={[{ id: "comms", label: "Messaging" }]}
  listings={[{ id: "mail", name: "Send email", summary: "Send a templated email.", category: "comms", featured: true, permissions: [{ id: "mail.send", label: "Send email as you", risk: "high" }] }]}
  onInstall={async (l) => { await api.install(l.id); }}
  onPublish={async (draft) => { await api.submit(draft); }}
/>

AnatomyCopy Anchor Link

Marketplace                 data-slot="marketplace"
├─ switcher                 Extensions / Templates, Publish
├─ featured strip           up to three featured listings
├─ CatalogStore             search, chips, sort, cards; onSelect opens the detail
├─ MarketplaceDetail        install header, Tabs, sidebar (details, PermissionList, links, tags)
├─ TemplateGallery          category chips, preview cards, Use template
└─ Dialog > PublishForm     name, summary, category, version, repository, price, tags, permissions

APICopy Anchor Link

MarketplaceDetail, PublishForm, TemplateGallery and PermissionList are exported for use on their own. Permission risk is low, medium or high; the list shows the riskiest first.

ExamplesCopy Anchor Link

Detail page on its ownCopy Anchor Link

<MarketplaceDetail listing={listing} onInstall={install} onBack={() => router.back()} />

AccessibilityCopy Anchor Link

• Cards and featured tiles are articles whose title is a button covering the card. Install is a separate control.
• Permission risk is written out (Low, Medium, High) next to an icon. The form marks invalid fields with aria-invalid and a message; errors from the server use role="alert".
• The dialog traps focus and closes on Escape.

RTL & i18nCopy Anchor Link

• English and Arabic built in. Versions, repository URLs, sizes and licences stay left-to-right in <bdi dir="ltr">.
• The back arrow and external-link icon mirror.

Styling & tokensCopy Anchor Link

• bg-card, bg-secondary, border-border, rounded-card; hover --nq-hover. No raw hex.
• Target [data-slot=marketplace], [data-slot=marketplace-detail], [data-slot=publish-form], [data-slot=template-gallery].

Do / Don'tCopy Anchor Link

• Do list every permission an extension needs; the detail page is the user's consent screen.
• Do mark at most three listings featured.
• Don't put secrets in links or screenshots.

RelatedCopy Anchor Link

• CatalogStore · WorkflowMarketplace · InstallButton · Rating

LabCopy Anchor Link

https://docs.nasaqui.com/?path=/docs/components-storefront-marketplace--docs