S shadcn · 17

Product list

추천 준비물

Shows Coupang Partners products without standing out. No filled black buttons, only outlined buttons and underlined links.

RuleThe affiliate disclosure sits right above the product block, links are marked as sponsored, and items without a real link stay plain text.

Also known as: ProductList
···
usage (Astro)
---
// src/pages/[post].astro
import { ProductList } from '../components/registry';
---
<ProductList items={products} disclosure={AFFILIATE_DISCLOSURE} />
site.json
// sites/<사이트>/site.json — 적지 않으면 사이트 이름으로 자동으로 고른다
{
  "variants": { "ProductList": "rows" }
}
props (TypeScript)
export interface ProductListProps {
  items: Product[];
  /** 대가성 문구 — 상품 블록(data-product-block) 바로 앞 형제 요소에 있어야 한다(seo:audit) */
  disclosure: string;
  variant?: VariantOf<'ProductList'>;
}

rows puts each product in a rounded outlined box with the name and reason, and an outlined “See on Coupang” button on the right of each row. table is a three-column table with “Item” and “Why you need it” headings plus an untitled link column, and the links are underlined text. checklist stacks an empty checkbox, name, reason and an underlined link vertically with lines between items. In all three the affiliate notice appears first in a box.

Use rows for few products and visible buttons, table for comparison, and checklist to read like a prep list. On phones checklist is the longest.

Filled buttons are avoided so it does not look like an ad, and products without a link appear only as a prep-list line.

Use it when — Variants 3

  1. rowsRows When there are two or three items — a quiet button on each row.Used by 3: babyplay, babysick, feeding
  2. tableTable When the reason matters — item | why you need it | link.Used by 5: babysleep, milestone, newborn, vaccination, 허브
  3. checklistChecklist Packing-list posts such as birth prep — empty checkboxes and text links.Used by 3: babyfood, birthprep, toddlerfood
Open as page ↗

Suggest an entry

Tell us about a missing component or variant, or something a pack should fix. We read every suggestion.