<!-- source-hash: 5c7bea0689601e74e88dd84bfa270626 -->
A React client component that renders a single onboarding/slash-command row card for the Mingo AI chat empty-state list. Supports optional icons, slash-command labels, descriptions, and inline action buttons, rendering as either an interactive `<button>` or a static `<div>` depending on props.

## Key Components

### Interfaces

- **`MingoOnboardingCardAction`** — Defines a single action button with `id`, `label`, and `onClick` handler
- **`MingoOnboardingCardProps`** — Full prop surface for the card: `icon`, `title`, `slashCommand`, `description`, `actions`, `onClick`, `className`

### Component

- **`MingoOnboardingCard`** — Main export. Conditionally renders as a `<button>` (when `onClick` is set and `actions` is empty) or a `<div>` (when `actions` are present or no `onClick` is provided). Action buttons use `e.stopPropagation()` to prevent card-level click conflicts.

## Rendering Behavior

| Condition | Root element |
|---|---|
| `actions` provided (non-empty) | `<div>` (non-interactive) |
| `onClick` set, no `actions` | `<button>` with hover/focus styles |
| Neither | `<div>` |

## Usage Example

```typescript
import {
  MingoOnboardingCard,
  MingoOnboardingCardAction,
} from './mingo-onboarding-card'

// Static card with description
<MingoOnboardingCard
  icon={<SearchIcon />}
  title="Search tickets"
  slashCommand="/search"
  description="Find tickets by keyword or ID"
  onClick={() => console.log('card clicked')}
/>

// Card with inline action buttons (renders as non-interactive div)
const actions: MingoOnboardingCardAction[] = [
  { id: 'recent', label: 'Recent', onClick: (e) => handleRecent(e) },
  { id: 'search', label: 'Search', onClick: (e) => handleSearch(e) },
]

<MingoOnboardingCard
  icon={<TicketIcon />}
  title="Roadmap"
  slashCommand="/roadmap"
  actions={actions}
/>
```

> Cards are designed to be stacked in a `rounded-md` container. The `border-b` divider on each card and `last:border-b-0` keep the visual frame clean without a trailing border.

**Source:** [`mingo-onboarding-card.tsx`](https://github.com/flamingo-stack/openframe-oss-lib/blob/main/mingo-onboarding-card.tsx)