- Get Started
- Product
- Resources
- Tools & SDKs
- Framework
- Reference
Menu
- Get Started
- Product
- Resources
- Tools & SDKs
- Framework
- Reference
Focus Modal
A modal component that spans the whole screen
Was this example helpful?
Usage#
API Reference#
FocusModal
This component is based on the Radix UI Dialog primitives.
FocusModal.Header
This component is based on the div
element and supports all of its props
FocusModal.Body
This component is based on the div
element and supports all of its props
Example: Control Open State#
1import { useState } from "react"2 3const MyModal = () => {4 const [open, setOpen] = useState(false)5 6 return (7 <FocusModal 8 open={open} 9 onOpenChange={setOpen}10 >11 <FocusModal.Trigger>Trigger</FocusModal.Trigger>12 <FocusModal.Content>13 <FocusModal.Header>Title</FocusModal.Header>14 <FocusModal.Body>Content</FocusModal.Body>15 </FocusModal.Content>16 </FocusModal>17 )18}