<Gallery.Root images={[{ src, alt }, …]} />With an empty images array it renders its own empty state, which
emptyLabel and emptyDescription let you word.
API
Gallery.Root
| Prop | Type | Default | |
|---|---|---|---|
images | readonly GalleryImage[] | required | |
emptyDescription | ReactNode | — | |
emptyLabel | ReactNode | "No photos yet" | |
exit | Exit | — | Inside a <Presence>: plays this child's way out before it unmounts. |
Plus every <div> prop. Source: gallery/components/gallery-root.tsx.
Gallery.Lightbox
| Prop | Type | Default | |
|---|---|---|---|
images | readonly GalleryImage[] | required | |
startIndex | number | 0 | |
actionsRef | RefObject<DialogRootActions | null> | — | A ref to imperative actions. |
children | PayloadChildRenderFunction<unknown> | ReactNode | — | The content of the dialog.
This can be a regular React node or a render function that receives the payload of the active trigger. |
defaultOpen | boolean | — | Whether the dialog is initially open. To render a controlled dialog, use the open prop instead. |
defaultTriggerId | string | null | — | ID of the trigger that the dialog is associated with.
This is useful in conjunction with the defaultOpen prop to create an initially open dialog. |
disablePointerDismissal | boolean | — | Whether to prevent the dialog from closing on outside presses. For non-modal dialogs, this also prevents the dialog from closing when focus moves outside of it. |
handle | DialogHandle<unknown> | — | A handle to associate the dialog with a trigger. If specified, allows external triggers to control the dialog's open state. Can be created with the Dialog.createHandle() method. |
modal | "trap-focus" | boolean | — | Determines if the dialog enters a modal state when open. When modal is true or 'trap-focus', render <Dialog.Close> inside <Dialog.Popup> so
touch screen readers can escape the popup. |
onOpenChange | ((open: boolean, eventDetails: DialogRootChangeEventDetails) => void) | — | Event handler called when the dialog is opened or closed. |
onOpenChangeComplete | ((open: boolean) => void) | — | Event handler called after any animations complete when the dialog is opened or closed. |
open | boolean | — | Whether the dialog is currently open. |
triggerId | string | null | — | ID of the trigger that the dialog is associated with.
This is useful in conjunction with the open prop to create a controlled dialog.
There's no need to specify this prop when the dialog is uncontrolled (that is, when the open prop is not set). |
Plus the DOM props of the element it renders. Source: gallery/components/gallery-lightbox.tsx.