SGUI / Development
Provider
Production interaction scope with owned density and direction.
Loading examples…
Loading examples…
Examples
Loading examples…
Contains
Used In
No direct parents in the documented component catalog.
Component documentation
SGUI / Development
Production interaction scope with owned density and direction.
Loading examples…
Loading examples…
Loading examples…
No direct parents in the documented component catalog.
Density sets spacing; interaction mode sets target and navigation icon sizing. Auto follows available pointer capabilities.
'use client';
import { Provider } from '@structured-growth/sg-ui/theme';
import { Stack, Button, Menu, TextField } from '@structured-growth/sg-ui/experimental';
export default function ProviderSizingExample() {
return (
<>
<Provider density="comfortable" interactionMode="auto" dir="ltr"><Stack gap={3}><TextField label="Workspace name" defaultValue="Design workspace"/><Menu label="Workspace actions" trigger={<Button>{"A scoped action"}</Button>} items={[{id:'settings',label:'Workspace settings'},{id:'members',label:'Manage members'}]}/></Stack></Provider>
</>
);
}
The same props in independent density scopes.
Provider sets interaction locale and visual scope.
Provider sets interaction locale and visual scope.
'use client';
import { useState } from 'react';
import { ThemeScope } from '@structured-growth/sg-ui/theme';
import { Provider } from '@structured-growth/sg-ui/theme';
import { Stack, Typography, Button } from '@structured-growth/sg-ui/experimental';
export default function ProviderPlaygroundDensitiesExample() {
const [action, setAction] = useState("No action yet");
const [open, setOpen] = useState(false);
const [page, setPage] = useState(0);
const [pageSize, setPageSize] = useState(25);
const [selected, setSelected] = useState("overview");
return (
<>
<Stack gap={3}>
<ThemeScope density="compact"><Provider dir={"ltr"}><Stack direction="row" gap={3}><Button>{"A scoped action"}</Button><Typography>Provider sets interaction locale and visual scope.</Typography></Stack></Provider></ThemeScope>
<ThemeScope density="comfortable"><Provider dir={"ltr"}><Stack direction="row" gap={3}><Button>{"A scoped action"}</Button><Typography>Provider sets interaction locale and visual scope.</Typography></Stack></Provider></ThemeScope>
</Stack>
</>
);
}
Provider supplies visual scope and interaction locale with a host-selected direction.
A scoped action
'use client';
import { Provider } from '@structured-growth/sg-ui/theme';
import { Button, Typography, Stack } from '@structured-growth/sg-ui/experimental';
export default function ProviderExample() {
return (
<>
<Provider dir={"ltr"}><Stack gap={3}><Typography>{"A scoped action"}</Typography><Button>Scoped action</Button></Stack></Provider>
</>
);
}
A shared theme sets 13px control text, 10px horizontal padding, 8px corners, a 48px target floor and 24px navigation icons, including the menu portal.
'use client';
import { ThemeScope } from '@structured-growth/sg-ui/theme';
import { Button, Menu, Navigation, NavigationItem, Stack, TextField } from '@structured-growth/sg-ui/experimental';
import { DashboardIcon } from '@structured-growth/sg-ui/icons';
export default function ThemeSizedTouchTargetsExample() {
return (
<>
<ThemeScope density="compact" interactionMode="touch" style={{"--sgui-touch-target-size":"3rem","--sgui-touch-navigation-icon-size":"1.5rem","--sgui-compact-control-text-size":"0.8125rem","--sgui-compact-control-padding":"0.625rem","--sgui-control-radius":"0.5rem","--sgui-field-radius":"0.5rem"}}>
<Stack gap={3}>
<Navigation label="Workspace navigation"><NavigationItem href="#workspace"><DashboardIcon size="var(--sgui-side-navigation-icon-size)"/>Workspace</NavigationItem></Navigation>
<TextField label="Workspace name" defaultValue="Design workspace"/>
<Menu label="Workspace actions" trigger={<Button>Open workspace actions</Button>} items={[{id:'settings',label:'Workspace settings'},{id:'members',label:'Manage members'}]}/>
</Stack>
</ThemeScope>
</>
);
}