# Model Recommendation Card

Model Recommendation Card [#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 [#preview]

```tsx
'use client';

import { useState } from 'react';

import {
  ModelRecommendationCard,
  type ModelRecommendation,
} from '@/components/model-recommendation-card';

const REC: ModelRecommendation = {
  modelId: 'Xenova/bge-small-en-v1.5',
  name: 'BGE Small EN v1.5',
  provider: 'transformers',
  size: '34 MB',
  score: 88,
  recommendedDevice: 'webgpu',
  speedTier: 'fast',
  qualityTier: 'high',
  description: 'Strong general-purpose embedding model, tiny download.',
  reasons: ['Fits device memory', 'WebGPU accelerated', 'High MTEB score'],
};

/**
 * Demo for ModelRecommendationCard. Shows the radial score dial, tier/device
 * badges, reason chips, and a working compare toggle.
 */
export default function ModelRecommendationCardDemo() {
  const [comparing, setComparing] = useState(false);
  return (
    <ModelRecommendationCard
      recommendation={REC}
      comparing={comparing}
      onToggleCompare={() => setComparing((c) => !c)}
    />
  );
}
```

Installation [#installation]

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

Data source & dependencies [#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 [#files-installed]

* `model-recommendation-card.tsx` — the `ModelRecommendationCard` component
* `lib/utils.ts` — the `cn()` helper (if not already present)

Props [#props]

**ModelRecommendationCard**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `recommendation` | `object` | — | **Required.** The recommendation to render. |
| `comparing` | `boolean` | — | Whether this card is selected for comparison. |
| `onToggleCompare` | `function` | — | When provided, shows a compare toggle that calls back with the model id. |

**ModelRecommendation**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `modelId` | `string` | — | **Required.** Stable model id. |
| `name` | `string` | — | **Required.** Display name. |
| `provider` | `string` | — | Provider (e.g. "transformers", "wllama"). |
| `size` | `string` | — | Human-readable size. |
| `score` | `number` | — | **Required.** Score in the 0–100 range. |
| `recommendedDevice` | `"cpu" \| "wasm" \| "webgpu"` | — | Recommended runtime device. |
| `speedTier` | `"slow" \| "medium" \| "fast"` | — | Speed tier. |
| `qualityTier` | `"high" \| "low" \| "medium"` | — | Quality tier. |
| `description` | `string` | — | One-line description. |
| `reasons` | `array` | — | Reasons the model was recommended. |

Examples [#examples]

Bound to recommendations [#bound-to-recommendations]

```tsx
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 [#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.