Founding price: $35, then $79.99 after 23:59 UTC on 4 November, then $79.99
Get ProOne dialog API that renders a centred dialog on wide screens and a bottom sheet on phones, chosen by a breakpoint, so a form is written once.
This item has no props to tune. Use the lens above to change theme, density, direction and more.
Use it for any modal task you show on both phones and desktops: edit profile, invite people, pick a plan. The adapt prop (mobile="sheet") is the one decision.
Do not use it when the desktop form is large enough to need a page, or when a sheet on a phone would hide what the form refers to. Use mobile="dialog" to keep the dialog everywhere.
It also uses the shadcn dialog component, which the CLI installs for you.
| Part | Prop | Type | Default | Description |
|---|---|---|---|---|
ResponsiveDialog | mobile | "sheet" | "dialog" | "sheet" | What a narrow screen gets. |
ResponsiveDialog | breakpoint | number | 768 | Width in px below which the sheet is used. |
ResponsiveDialog | snapPoints / snap / onSnapChange | - | - | Passed to the bottom sheet. |
ResponsiveDialog | open / onOpenChange | - | - | Controlled state, as on a dialog. |
- | Trigger, Content, Header, Title, Description, Footer, Close | - | - | Each renders the dialog or the sheet part to match. |
The component ships with a Testing Library test (responsive-dialog.test.tsx). The test stubs matchMedia to check that a wide screen renders the dialog and a narrow one the sheet with the same title.