SettingsModal
Use SettingsModal when settings open over the current screen instead of on their own route. It renders SettingsLayout inside a Mantine Modal with a fixed height, so switching sections does not resize the dialog. It accepts every SettingsLayout prop except title, which becomes the modal title (Settings by default). size sets the width (70rem by default); below fullScreenQuery ((max-width: 48em) by default) the modal goes full screen and the layout switches to its narrow form with a section picker. Sections with fill: true get the full height without the layout scroll area, which suits panels that scroll themselves, such as McpSettingsPanel or MemoryPanel.
Getting Started
$pnpm add @sinups/ai-kit @mantine/core @mantine/hooks @tabler/icons-reactExamples
Modal
API reference
Prop
Type
Required
opened
boolean
Yes
Whether the modal is open
onClose
() => void
Yes
Called when the modal is dismissed
title
React.ReactNode
No
Modal title, `Settings` by default
size
ModalProps['size']
No
Modal width when not full screen, `70rem` by default
fullScreenQuery
string
No
Media query that switches the modal to full screen, `(max-width: 48em)` by default
sections
SettingsNavItem[]
Yes
Sections listed in the navigation, in display order
activeId
string
Yes
Id of the section whose content is rendered in `children`
onActiveIdChange
(id: string) => void
Yes
Called with the id of the section the user picked
children
React.ReactNode
No
Content of the active section, usually one or more `SettingsSection`
withSearch
boolean
No
Adds a search field that filters the navigation by label and description, `false` by default
navWidth
number
No
Navigation column width in px when wide, `240` by default
fillContent
boolean
No
Renders the content without its own scroll area and padding, stretched to the full height, for panels that scroll themselves such as master-detail lists; `SettingsNavItem.fill` overrides it per section
breakpoint
number
No
Component width in px from which navigation and content sit side by side, `720` by default
labels
Partial<SettingsLayoutLabels>
No
Overrides of the default English labels
className
string
No
Class name added to the root element
style
React.CSSProperties
No
Inline styles added to the root element