Model Catalog Card

The Model Catalog Card is a rich tile for a single model catalog entry (wllama / webllm / transformers / litert / mediapipe shapes): name, a size badge, an optional description, a metadata chip row (architecture, params, quantization, context), and a capability sub-row (tools / vision / embedding / reranking / reasoning) rendered conditionally from the entry's flags. It complements the Model Selector (a picker) — this is a presentation tile. It fires onClick(id) and supports a selected ring.

Preview

Installation

pnpm dlx shadcn@latest add @localmode/ui/local-first/model-catalog-card

npx shadcn@latest add @localmode/ui/local-first/model-catalog-card

yarn dlx shadcn@latest add @localmode/ui/local-first/model-catalog-card

bunx --bun shadcn@latest add @localmode/ui/local-first/model-catalog-card

Data source & dependencies

Data source: renders the catalog entry you pass — works with any backend. Recommended producer: useModelRecommendations / your registry data from @localmode/react (on-device, optional).

• lucide-react — icons
• clsx + tailwind-merge — via the shared cn() util (installed automatically as a registry dependency)

Files installed

• model-catalog-card.tsx — the ModelCatalogCard component
• lib/utils.ts — the cn() helper (if not already present)

Props

Examples

A selectable tile

<ModelCatalogCard entry={entry} selected={entry.id === picked} onClick={setPicked} />

Customization

Capability badges render only for the flags present on the entry — edit the CAPABILITIES array to add more (e.g. audio). The selected state adds a ring-1 ring-primary. Styled entirely with shadcn/ui CSS-variable utilities so it inherits your theme — because you own the copied file, every class and threshold is yours to change.