Skip to content

Recommendation Card

The agent’s pick with how sure it is, why, and the alternatives you can promote.

Recommended

Grind setting 18

82% confident

Your last three brews ran fast and tasted sour. One step finer should slow the pour to about three minutes.

import { RecommendationCard } from '@brand-studio/ui';

export default function RecommendationCardDemo() {
  return (
    <div style={{ width: '100%', maxWidth: 460 }}>
      <RecommendationCard options={[
        { id: 'grind-18', title: 'Grind setting 18', confidence: 0.82, reason: 'Your last three brews ran fast and tasted sour. One step finer should slow the pour to about three minutes.' },
        { id: 'grind-17', title: 'Grind setting 17', confidence: 0.54, reason: 'Two steps finer. Safer if the beans are older than they look.' },
        { id: 'temperature', title: 'Keep 19, brew at 96°C', confidence: 0.31, reason: 'Hotter water extracts more without changing the grind.' },
      ]} />
    </div>
  );
}

Installation

pnpm add @brand-studio/ui

npm install @brand-studio/ui

yarn add @brand-studio/ui

bun add @brand-studio/ui

Install the peer dependencies
```
npm install react react-dom
```
Import the stylesheet once
```
import '@brand-studio/ui/styles.css';
```

Wrap your app in a brand theme

import { BrandTheme, RecommendationCard } from '@brand-studio/ui';
import brand from './brand.json';

<BrandTheme palette={brand.tokens} mode="system">
  {/* your app */}
</BrandTheme>

Usage

import { RecommendationCard } from '@brand-studio/ui';

<RecommendationCard
  options={[
    { id: 'grind-18', title: 'Grind setting 18', confidence: 0.82, reason: 'One step finer should slow the pour.' },
    { id: 'grind-17', title: 'Grind setting 17', confidence: 0.54 },
  ]}
  onConfirm={option => apply(option.id)}
/>

The first option is the agent's pick. confidence runs from 0 to 1 and shows as a bar and a percentage. See alternatives opens the rest; Use instead moves one to the top. Confirming locks the choice in.

Accessibility

Confidence is written as a percentage, not only drawn as a bar.
The alternatives button reports whether the list is open. Each Use instead names its option, and focus moves to the new pick.
The outcome is announced when you confirm.

API Reference

Prop	Type	Default
`options`	`Recommendation[]`	–
`heading?`	`string`	`'Recommended'`
`confirmLabel?`	`string`	`'Use this'`
`onConfirm?`	`((option: Recommendation) => void)`	–
`className?`	`string`	`''`