Settings Modal
A controlled application-level settings dialog with General, Profile, Tools, and Storage views. It portals to the document body, owns its internal page navigation, and leaves the trigger and open state to whichever page, sidebar, or account menu installs it.
Installation
Settings Modal is a multi-file application block with several base-component dependencies. Install it through the CLI so the complete settings folder, shared components, hooks, styles, and npm packages are resolved together:
npx boardui@latest add settings-modalTriggering the modal
The block deliberately does not render its own trigger. Keep isOpen in the host that owns the action—such as a sidebar, user menu, or settings button—and close it through onClose. Backdrop presses, Escape, and the close button all call the same handler.
const [settingsOpen, setSettingsOpen] = useState(false);
<SidebarItem onPress={() => setSettingsOpen(true)}> Settings</SidebarItem>
<SettingsModal isOpen={settingsOpen} onClose={() => setSettingsOpen(false)} defaultPage="profile"/>Initial page
Use defaultPage when a contextual action should open directly to General, Profile, Tools, or Storage. The selected page resets to that value each time the dialog opens.
<SettingsModal isOpen={isOpen} onClose={close} defaultPage="storage"/>Plan artwork
The General view includes a component-native abstract treatment by default. Pass your own public image through planArtSrc to feed the animated Current plan artwork without coupling the installed block to BoardUI assets.
<SettingsModal isOpen={isOpen} onClose={close} planArtSrc="/brand/your-plan-art.png"/>;
// Omit planArtSrc to use the built-in token-based abstract artwork.