{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "usp-list",
  "type": "registry:block",
  "title": "USP list",
  "description": "Three or four short selling points or benefits, each with an icon and a line of text.",
  "categories": [
    "section"
  ],
  "registryDependencies": [
    "https://facadeui.dev/r/container.json",
    "https://facadeui.dev/r/feature-icon.json",
    "https://facadeui.dev/r/heading.json",
    "https://facadeui.dev/r/section.json",
    "https://facadeui.dev/r/section-header.json",
    "https://facadeui.dev/r/types.json",
    "https://facadeui.dev/r/utils.json"
  ],
  "files": [
    {
      "path": "src/sections/usp-list.tsx",
      "type": "registry:component",
      "target": "components/sections/usp-list.tsx",
      "content": "/**\n * UspList — three or four short value propositions, each an icon and a line.\n *\n * The narrowest of the feature sections on purpose: a USP strip earns its place\n * by being scannable, so the copy is deliberately constrained to a title and a\n * sentence. Reach for `FeatureGrid` when items need more room than that.\n *\n * a11y: a real `<ul>`. Icons are decorative and hidden — the title beside each\n * one carries the meaning — which `FeatureIcon` enforces rather than trusting\n * each caller to remember.\n *\n * Dependencies: react, @/lib/types, @/lib/utils,\n * @/components/ui/container, @/components/ui/feature-icon, @/components/ui/heading,\n * @/components/ui/section, @/components/ui/section-header.\n */\n\nimport type { ElementType } from \"react\"\n\nimport type {\n  HeadingLevel,\n  IconComponent,\n  ListSlotProps,\n  SectionBaseProps,\n} from \"@/lib/types\"\nimport { cn, slugId } from \"@/lib/utils\"\nimport { Container } from \"@/components/ui/container\"\nimport { FeatureIcon } from \"@/components/ui/feature-icon\"\nimport { Heading } from \"@/components/ui/heading\"\nimport { Section } from \"@/components/ui/section\"\nimport { SectionHeader } from \"@/components/ui/section-header\"\n\nexport interface UspItem {\n  title: string\n  description: string\n  icon?: IconComponent\n}\n\nexport interface UspListProps extends SectionBaseProps, ListSlotProps {\n  items: UspItem[]\n  title?: string\n  eyebrow?: string\n  description?: string\n  /** Heading level of each item's title. Defaults to one below the section's. */\n  itemHeadingLevel?: HeadingLevel\n  /** `stacked` puts the icon above the copy; `inline` puts it beside. */\n  layout?: \"inline\" | \"stacked\"\n  iconVariant?: \"soft\" | \"solid\" | \"outline\" | \"plain\"\n  align?: \"start\" | \"center\"\n}\n\nexport function UspList({\n  items,\n  title,\n  eyebrow,\n  description,\n  itemHeadingLevel,\n  layout = \"inline\",\n  iconVariant = \"soft\",\n  align = \"start\",\n  listAs,\n  itemAs,\n  headingLevel = 2,\n  as,\n  spacing = \"md\",\n  className,\n  id,\n}: UspListProps) {\n  const List = (listAs ?? \"ul\") as ElementType\n  const Item = (itemAs ?? \"li\") as ElementType\n  const titleId = title ? (id ? `${id}-title` : slugId(title)) : undefined\n  const itemLevel = itemHeadingLevel ?? (Math.min(headingLevel + 1, 6) as HeadingLevel)\n\n  return (\n    <Section\n      as={as ?? (title ? \"section\" : \"div\")}\n      spacing={spacing}\n      labelledBy={titleId}\n      id={id}\n      className={className}\n    >\n      <Container className=\"flex flex-col gap-14\">\n        {title ? (\n          <SectionHeader\n            align={align}\n            eyebrow={eyebrow}\n            title={title}\n            description={description}\n            headingLevel={headingLevel}\n            titleId={titleId}\n          />\n        ) : null}\n\n        <List\n          className={cn(\n            \"grid gap-10 sm:gap-8\",\n            items.length === 4 ? \"sm:grid-cols-2 lg:grid-cols-4\" : \"sm:grid-cols-3\",\n          )}\n        >\n          {items.map((item) => (\n            <Item\n              key={item.title}\n              className={cn(\n                \"flex gap-4\",\n                layout === \"stacked\" ? \"flex-col\" : \"flex-row\",\n                align === \"center\" && \"items-center text-center\",\n                align === \"center\" && layout === \"inline\" && \"flex-col\",\n              )}\n            >\n              {item.icon ? <FeatureIcon icon={item.icon} variant={iconVariant} /> : null}\n              <div className=\"flex flex-col gap-1.5\">\n                <Heading level={itemLevel} className=\"text-foreground font-semibold\">\n                  {item.title}\n                </Heading>\n                <p className=\"text-muted-foreground text-pretty text-sm\">\n                  {item.description}\n                </p>\n              </div>\n            </Item>\n          ))}\n        </List>\n      </Container>\n    </Section>\n  )\n}\n"
    }
  ],
  "docs": "Import styles/facade-tokens.css in your global stylesheet, after @import \"tailwindcss\". Set headingLevel to fit the page outline (sections default to h2). Pass next/link and next/image through the link and image props. Docs: https://facadeui.dev/components/usp-list"
}