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

Download the React source package, install its dependencies, and import the component with its shared styles.

Download React package Installation guide

'use client';
import '@helios-ui/react/styles.css';
import{NativeScope,NativeSettingsModalExample}from'@helios-ui/react';
export function Example(){return <NativeScope><NativeSettingsModalExample/></NativeScope>}

Triggering 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.

usage

'use client';
import '@helios-ui/react/styles.css';
import {useState} from 'react';
import {NativeScope,NativeSettingsModal,NativeButton} from '@helios-ui/react';
export function Example(){
const[open,setOpen]=useState(false);
return <NativeScope><><NativeButton onClick={()=>setOpen(true)}>Open settings</NativeButton><NativeSettingsModal isOpen={open}onClose={()=>setOpen(false)}/></></NativeScope>;
}

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.

usage

'use client';
import '@helios-ui/react/styles.css';
import {useState} from 'react';
import {NativeScope,NativeSettingsModal,NativeButton} from '@helios-ui/react';
export function Example(){
const[open,setOpen]=useState(false);
return <NativeScope><><NativeButton onClick={()=>setOpen(true)}>Edit profile</NativeButton><NativeSettingsModal isOpen={open}onClose={()=>setOpen(false)}defaultPage="profile"/></></NativeScope>;
}

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 Helios UI assets.

usage

'use client';
import '@helios-ui/react/styles.css';
import {useState} from 'react';
import {NativeScope,NativeSettingsModal,NativeButton} from '@helios-ui/react';
export function Example(){
const[open,setOpen]=useState(false);
return <NativeScope><><NativeButton onClick={()=>setOpen(true)}>Open settings</NativeButton><NativeSettingsModal isOpen={open}onClose={()=>setOpen(false)}planArtSrc="/react/assets/board-native/carousel/sunrise.webp"/></></NativeScope>;
}

Advanced playground, API and recovery states ↗

Settings Modal

Installation

Download the React source package, install its dependencies, and import the component with its shared styles.

Download React package Installation guide

'use client';
import '@helios-ui/react/styles.css';
import{NativeScope,NativeSettingsModalExample}from'@helios-ui/react';
export function Example(){return <NativeScope><NativeSettingsModalExample/></NativeScope>}

Triggering the modal

usage

'use client';
import '@helios-ui/react/styles.css';
import {useState} from 'react';
import {NativeScope,NativeSettingsModal,NativeButton} from '@helios-ui/react';
export function Example(){
const[open,setOpen]=useState(false);
return <NativeScope><><NativeButton onClick={()=>setOpen(true)}>Open settings</NativeButton><NativeSettingsModal isOpen={open}onClose={()=>setOpen(false)}/></></NativeScope>;
}

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.

usage

'use client';
import '@helios-ui/react/styles.css';
import {useState} from 'react';
import {NativeScope,NativeSettingsModal,NativeButton} from '@helios-ui/react';
export function Example(){
const[open,setOpen]=useState(false);
return <NativeScope><><NativeButton onClick={()=>setOpen(true)}>Edit profile</NativeButton><NativeSettingsModal isOpen={open}onClose={()=>setOpen(false)}defaultPage="profile"/></></NativeScope>;
}

Plan artwork

usage

'use client';
import '@helios-ui/react/styles.css';
import {useState} from 'react';
import {NativeScope,NativeSettingsModal,NativeButton} from '@helios-ui/react';
export function Example(){
const[open,setOpen]=useState(false);
return <NativeScope><><NativeButton onClick={()=>setOpen(true)}>Open settings</NativeButton><NativeSettingsModal isOpen={open}onClose={()=>setOpen(false)}planArtSrc="/react/assets/board-native/carousel/sunrise.webp"/></></NativeScope>;
}

Advanced playground, API and recovery states ↗

Settings Modal

Installation

Triggering the modal

Initial page

Plan artwork

Search Helios UI

Settings Modal

Installation

Triggering the modal

Initial page

Plan artwork

Search Helios UI