Model Recommendation Card

The Model Recommendation Card renders a single scored recommendation: a radial score dial (0–100), the model name, a monospace model id, a badge row (provider, size, speed/quality tiers, recommended device with a stable tier→color mapping), a description, and reason chips. When onToggleCompare is supplied it exposes a compare toggle. Bind to useModelRecommendations.

Preview

Installation

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

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

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

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

Data source & dependencies

Data source: renders the scored recommendation you pass and emits the compare toggle — works with any backend. Recommended producer: useModelRecommendations 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-recommendation-card.tsx — the ModelRecommendationCard component
• lib/utils.ts — the cn() helper (if not already present)

Props

Examples

Bound to recommendations

const { recommendations } = useModelRecommendations({ task: 'embedding' });
{recommendations.map((r) => (
  <ModelRecommendationCard
    key={r.entry.modelId}
    recommendation={{ modelId: r.entry.modelId, name: r.entry.name, score: r.score, reasons: r.reasons }}
  />
))}

Customization

The score dial color steps green/amber/rose by score; tier badge colors come from the TIER_COLOR map. Pass onToggleCompare to reveal the compare control. 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.