A feedback pill that grows into its own form.
FreeWeb and MobileMotion
Preview
npx shadcn add @fetaui/morph-popoverPlayground
Label and icon
Failed send
Disabled
Icons animation
Motion
Installation
Terminal· bash
npx shadcn add @fetaui/morph-popover
Label and icon
label names the pill and the form. placeholder asks the question.
Motion
Accessibility
- Opens as a labelled dialog and moves focus to the field.
- Sent is announced as a status.
Motion
- Size, radius and shadow morph as one shape on a spring.
- With reduced motion, pill and form swap with no morph.
Responsive behavior
- The form fills the width on small screens.
Performance
- The form mounts only while open. The closed state is one button.
- The morph is a shared layout animation between two elements on a spring, and it is skipped when still.
Note for AI
Give your coding assistant the Markdown reference instead of screenshots.
- Import from @/components/fetaui/morph-popover.
- Always pass onSend. Without it the form still reaches the sent state and nothing is sent.
- Return a promise from onSend: the button loads until it settles, and a rejection reopens the form with the text.
- The sent message is fixed text. There is no focus trap or outside click close, so use Dialog for anything modal.
- Composes Button and Icon Button. The ⌘↵ hint is fixed, and Ctrl Enter also sends.
Related
PopoverComponentAnchored context that stays close to its trigger: a pill, a Soft two part panel and a nub pointing back.DialogComponentA window over the page for one focused task, with the page behind made inert. On Mobile it is a bottom sheet.Feedback PromptComponentA yes or no question. Yes opens a note, No adds reason chips, and sending says thanks.TextareaComponentMulti line text with a mono character count.ButtonComponentOne family for every action, with a label, optional icons and a shortcut key.