Pill to card
overlaysProAn avatar pill that unfolds from its slot into a profile card with a FLIP morph; Escape or a click outside folds it back.
Opening soon
Pro cannot be bought yet. The page opens when payment is ready.
Preview
The preview could not load.
Live demo. The theme switches the demo itself.
Code
pill-to-card.tsxPro
The code is locked
Pill to card is part of Manniche UI Pro. A key unlocks the source of all 60 effects.
Opening soon€49 · Introductory price until 31 December 2026. €79 after that.
- One-off payment
- One developer
- Your key arrives by email straight away
- No VAT (§ 19 UStG)
Have a key? Get the code with the CLI or MCP.
The key lives in MANNICHE_PRO_KEY, never in your code or a URL. How to set it up
CLI
npx shadcn@latest add @manniche-pro/pill-to-cardMCP
claude mcp add --transport http manniche-ui https://mikkelmanniche.dk/api/mcp --header "Authorization: Bearer $MANNICHE_PRO_KEY"Props
PillToCardProps
| Prop | Type | Default | What it does |
|---|---|---|---|
name required | string | – | The person's name, shown in the pill and as the card's title. |
role | string | – | A line under the name in the card, e.g. a job title. |
avatar | ReactNode | – | The avatar. Defaults to the initials of name. |
children | ReactNode | – | The card's body. Each direct child fades in a little after the one before it. |
open | boolean | – | Controlled open state. |
defaultOpen | boolean | false | Open state on the first render, when uncontrolled. |
onOpenChange | (open: boolean) => void | – | Called when the card asks to open or close. |
closeLabel | string | 'Close profile' | Accessible name of the close button. |
Also takes every prop from Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'role'>.
A11y
No accessibility notes written yet.
The notes come with the source when Pro opens.