Loading…

Morph Surface

beta

A dock that grows in place into a panel — a feedback form or a quick prompt — and shrinks back when done.

Overlays
1 file
No extra npm packages
Accessibility notes

Playground

Installation

One command and the file is in your project, or copy it in by hand.

$pnpm dlx @dowel-ui/cli add morph-surface

No npm packages are needed beyond what Dowel already requires.

Usage

Imported from your own path — the file is yours, so this is an import like any other.

app/page.tsxTSX

import { MorphSurface } from "@/components/ui/morph-surface";

Examples

Every example the tests run, live and operable, side by side.

Default
Gallery

API

Generated from the component's own types, so a prop cannot appear here without existing.

<MorphSurface>

Prop	Type	Default
`label` (required) The trigger's text in the dock, e.g. "Ask AI" or "Feedback".	`ReactNode`	—
`defaultOpen`	`boolean`	`false`
`icon` Decoration beside the label (an orb, a logo). Hidden from assistive technology.	`ReactNode`	—
`onOpenChange`	`(open: boolean) => void`	—
`open`	`boolean`	—
`panelHeight` The expanded panel's height. Numbers are pixels.	`Size`	`"12.5rem"`
`panelLabel` The panel's accessible name, also shown by `MorphSurfaceForm`. Defaults to `label`.	`string`	—
`panelWidth` The expanded panel's width. Numbers are pixels.	`Size`	`"22.5rem"`
`successDuration` How long the success label stays, in milliseconds.	`number`	`1500`
`successLabel` Shown in the dock, and announced, after the panel closes successfully.	`string`	`"Sent"`

Plus every attribute of <div>.

<MorphSurfaceForm>

Prop	Type	Default
`fieldName` The textarea's form field name.	`string`	`"message"`
`onSubmit` Called with the trimmed message. Return `false` to keep the panel open (a failed request, say); otherwise it closes and shows the success label.	`(value: string, event: FormEvent<HTMLFormElement>) => boolean \| void`	—
`placeholder`	`string`	`"Ask me anything…"`
`submitLabel` The submit button's accessible name. The visible text is the shortcut.	`string`	`"Send"`

Plus every attribute of <form> except onSubmit.

Accessibility

Behaves as a non-modal popover. The trigger is a disclosure button (aria-expanded, aria-controls) and the panel a named role="dialog". Opening moves focus into the panel (the message box in MorphSurfaceForm); Escape collapses it and returns focus to the trigger; pressing or tabbing outside collapses it without moving focus. A collapsed panel is inert and invisible; an expanded surface's dock is inert. MorphSurfaceForm's message box is labelled by the panel label, submits with ⌘/Ctrl + Enter (aria-keyshortcuts) or a named submit button, and a successful send is announced through a polite status region. The resize and fades stop under reduced motion.

Quality

Measured from the source and its tests at build time.

All scores

10/10

checks passed

Tested — passes
axe assertion — passes
Keyboard tested — passes
Storybook examples — passes
Accessibility documented — passes
Semantic tokens only — passes
Motion from tokens — passes
className merged — passes
Visible focus — passes
No fixed widths — passes

Prop

Type

Default

label

The trigger's text in the dock, e.g. "Ask AI" or "Feedback".

ReactNode

—

defaultOpen

boolean

false

icon

Decoration beside the label (an orb, a logo). Hidden from assistive technology.

ReactNode

—

onOpenChange

(open: boolean) => void

—

open

boolean

—

panelHeight

The expanded panel's height. Numbers are pixels.

Size

"12.5rem"

panelLabel

The panel's accessible name, also shown by MorphSurfaceForm. Defaults to label.

string

—

panelWidth

The expanded panel's width. Numbers are pixels.

Size

"22.5rem"

successDuration

How long the success label stays, in milliseconds.

number

1500

successLabel

Shown in the dock, and announced, after the panel closes successfully.

string

"Sent"

Prop

Type

Default

fieldName

The textarea's form field name.

string

"message"

onSubmit

Called with the trimmed message. Return false to keep the panel open (a failed request, say); otherwise it closes and shows the success label.

(value: string, event: FormEvent<HTMLFormElement>) => boolean | void

—

placeholder

string

"Ask me anything…"

submitLabel

The submit button's accessible name. The visible text is the shortcut.

string

"Send"