Component documentation
SGUI / Development
Independent navigation and main content regions for application compositions.
Loading examples…
Loading examples…
Loading examples…
No fixed SGUI child components.
No direct parents in the documented component catalog.
Course workspace
Building a thoughtful learning experience
Independent navigation and main content regions for application compositions.
Course workspace
Building a thoughtful learning experience
'use client';
import { useState } from 'react';
import { ThemeScope } from '@structured-growth/sg-ui/theme';
import { AppShell, SideNavigation, type SideNavigationModel } from '@structured-growth/sg-ui/components';
import { Stack, Typography } from '@structured-growth/sg-ui/primitives';
import { TextField, Surface } from '@structured-growth/sg-ui/experimental';
export default function AppShellExample() {
const [value,setValue] = useState("overview");
const model:SideNavigationModel = {"user":{"initials":"AL","name":"Building a thoughtful learning experience","organization":"Structured Growth"},"rootMenu":{"id":"demo","sections":[{"id":"workspace","title":"Workspace","items":[{"id":"overview","label":"Overview","active":value==='overview'},{"id":"course","label":"Course tools","childBehavior":"expand","defaultExpanded":true,"children":[{"id":"practice","label":"Practice"},{"id":"reflection","label":"Reflection"}]}]}]}};
return (
<>
<ThemeScope density="comfortable">
<AppShell navigation={<SideNavigation model={model} onItemSelect={setValue} aria-label="Example workspace navigation" />} mainLabel="Example workspace" style={{height:420}}><Stack gap={3}><Typography variant="h5">{"Course workspace"}</Typography><Typography>{"Building a thoughtful learning experience"}</Typography></Stack></AppShell>
</ThemeScope>
</>
);
}
Independent navigation and main content regions for application compositions.
Course workspace
Building a thoughtful learning experience
'use client';
import { useState } from 'react';
import { ThemeScope } from '@structured-growth/sg-ui/theme';
import { AppShell, SideNavigation, type SideNavigationModel } from '@structured-growth/sg-ui/components';
import { Stack, Typography } from '@structured-growth/sg-ui/primitives';
import { TextField, Surface } from '@structured-growth/sg-ui/experimental';
export default function AppShellExample() {
const [value,setValue] = useState("overview");
const model:SideNavigationModel = {"user":{"initials":"AL","name":"Building a thoughtful learning experience","organization":"Structured Growth"},"rootMenu":{"id":"demo","sections":[{"id":"workspace","title":"Workspace","items":[{"id":"overview","label":"Overview","active":value==='overview'},{"id":"course","label":"Course tools","childBehavior":"expand","defaultExpanded":true,"children":[{"id":"practice","label":"Practice"},{"id":"reflection","label":"Reflection"}]}]}]}};
return (
<>
<ThemeScope density="comfortable">
<AppShell navigation={<SideNavigation model={model} onItemSelect={setValue} aria-label="Example workspace navigation" />} rightNavigation={<SideNavigation model={{"user":{"initials":"PG","name":"Page tools","organization":"Workspace"},"rootMenu":{"id":"page-tools","sections":[{"id":"outline","title":"On this page","items":[{"id":"goals","label":"Learning goals"},{"id":"activities","label":"Activities"}]}]}}} aria-label="Example page navigation" />} mainLabel="Example workspace" style={{height:420}}><Stack gap={3}><Typography variant="h5">{"Course workspace"}</Typography><Typography>{"Building a thoughtful learning experience"}</Typography></Stack></AppShell>
</ThemeScope>
</>
);
}
Independent navigation and main content regions for application compositions.
Course workspace
Building a thoughtful learning experience
'use client';
import { useState } from 'react';
import { ThemeScope } from '@structured-growth/sg-ui/theme';
import { AppShell, SideNavigation, type SideNavigationModel } from '@structured-growth/sg-ui/components';
import { Stack, Typography } from '@structured-growth/sg-ui/primitives';
import { TextField, Surface } from '@structured-growth/sg-ui/experimental';
export default function AppShellExample() {
const [value,setValue] = useState("overview");
const model:SideNavigationModel = {"user":{"initials":"AL","name":"Building a thoughtful learning experience","organization":"Structured Growth"},"rootMenu":{"id":"demo","sections":[{"id":"workspace","title":"Workspace","items":[{"id":"overview","label":"Overview","active":value==='overview'},{"id":"course","label":"Course tools","childBehavior":"expand","defaultExpanded":true,"children":[{"id":"practice","label":"Practice"},{"id":"reflection","label":"Reflection"}]}]}]}};
return (
<>
<ThemeScope density="comfortable" style={{maxWidth:760}}>
<AppShell navigation={<SideNavigation model={model} onItemSelect={setValue} aria-label="Example workspace navigation" />} mainLabel="Example workspace" style={{height:420}}><Stack gap={3}><Typography variant="h5">{"Course workspace"}</Typography><Typography>{"Building a thoughtful learning experience"}</Typography></Stack></AppShell>
</ThemeScope>
</>
);
}
Independent navigation and main content regions for application compositions.
Organization workspace
A narrow workspace with the same navigation and main region.
'use client';
import { useState } from 'react';
import { ThemeScope } from '@structured-growth/sg-ui/theme';
import { AppShell, SideNavigation, type SideNavigationModel } from '@structured-growth/sg-ui/components';
import { Stack, Typography } from '@structured-growth/sg-ui/primitives';
import { TextField, Surface } from '@structured-growth/sg-ui/experimental';
export default function AppShellExample() {
const [value,setValue] = useState("overview");
const model:SideNavigationModel = {"user":{"initials":"AL","name":"A narrow workspace with the same navigation and main region.","organization":"Structured Growth"},"rootMenu":{"id":"demo","sections":[{"id":"workspace","title":"Workspace","items":[{"id":"overview","label":"Overview","active":value==='overview'},{"id":"course","label":"Course tools","childBehavior":"expand","defaultExpanded":true,"children":[{"id":"practice","label":"Practice"},{"id":"reflection","label":"Reflection"}]}]}]}};
return (
<>
<ThemeScope density="compact" style={{maxWidth:360}}>
<AppShell navigation={<SideNavigation model={model} onItemSelect={setValue} aria-label="Example workspace navigation" />} mainLabel="Example workspace" style={{height:420}}><Stack gap={3}><Typography variant="h5">{"Organization workspace"}</Typography><Typography>{"A narrow workspace with the same navigation and main region."}</Typography></Stack></AppShell>
</ThemeScope>
</>
);
}
Scroll the course list and lesson content separately. AppShell fills the viewport by default; this embedded example gives it a fixed height through its native style prop.
Lesson 1. Review the learning goals, practice the activity, and reflect on what you learned before continuing.
Lesson 2. Review the learning goals, practice the activity, and reflect on what you learned before continuing.
Lesson 3. Review the learning goals, practice the activity, and reflect on what you learned before continuing.
Lesson 4. Review the learning goals, practice the activity, and reflect on what you learned before continuing.
Lesson 5. Review the learning goals, practice the activity, and reflect on what you learned before continuing.
Lesson 6. Review the learning goals, practice the activity, and reflect on what you learned before continuing.
Lesson 7. Review the learning goals, practice the activity, and reflect on what you learned before continuing.
Lesson 8. Review the learning goals, practice the activity, and reflect on what you learned before continuing.
Lesson 9. Review the learning goals, practice the activity, and reflect on what you learned before continuing.
Lesson 10. Review the learning goals, practice the activity, and reflect on what you learned before continuing.
Lesson 11. Review the learning goals, practice the activity, and reflect on what you learned before continuing.
Lesson 12. Review the learning goals, practice the activity, and reflect on what you learned before continuing.
Lesson 13. Review the learning goals, practice the activity, and reflect on what you learned before continuing.
Lesson 14. Review the learning goals, practice the activity, and reflect on what you learned before continuing.
Lesson 15. Review the learning goals, practice the activity, and reflect on what you learned before continuing.
Lesson 16. Review the learning goals, practice the activity, and reflect on what you learned before continuing.
Lesson 17. Review the learning goals, practice the activity, and reflect on what you learned before continuing.
Lesson 18. Review the learning goals, practice the activity, and reflect on what you learned before continuing.
Lesson 19. Review the learning goals, practice the activity, and reflect on what you learned before continuing.
Lesson 20. Review the learning goals, practice the activity, and reflect on what you learned before continuing.
Lesson 21. Review the learning goals, practice the activity, and reflect on what you learned before continuing.
Lesson 22. Review the learning goals, practice the activity, and reflect on what you learned before continuing.
Lesson 23. Review the learning goals, practice the activity, and reflect on what you learned before continuing.
Lesson 24. Review the learning goals, practice the activity, and reflect on what you learned before continuing.
'use client';
import { useState } from 'react';
import { AppShell, SideNavigation, type SideNavigationModel } from '@structured-growth/sg-ui/components';
import { Stack, Typography } from '@structured-growth/sg-ui/primitives';
export default function IndependentAppShellExample() {
const [selected,setSelected] = useState("course-1");
const courses = [{"id":"course-1","label":"Course 1"},{"id":"course-2","label":"Course 2"},{"id":"course-3","label":"Course 3"},{"id":"course-4","label":"Course 4"},{"id":"course-5","label":"Course 5"},{"id":"course-6","label":"Course 6"},{"id":"course-7","label":"Course 7"},{"id":"course-8","label":"Course 8"},{"id":"course-9","label":"Course 9"},{"id":"course-10","label":"Course 10"},{"id":"course-11","label":"Course 11"},{"id":"course-12","label":"Course 12"},{"id":"course-13","label":"Course 13"},{"id":"course-14","label":"Course 14"},{"id":"course-15","label":"Course 15"},{"id":"course-16","label":"Course 16"},{"id":"course-17","label":"Course 17"},{"id":"course-18","label":"Course 18"},{"id":"course-19","label":"Course 19"},{"id":"course-20","label":"Course 20"},{"id":"course-21","label":"Course 21"},{"id":"course-22","label":"Course 22"},{"id":"course-23","label":"Course 23"},{"id":"course-24","label":"Course 24"},{"id":"course-25","label":"Course 25"},{"id":"course-26","label":"Course 26"},{"id":"course-27","label":"Course 27"},{"id":"course-28","label":"Course 28"},{"id":"course-29","label":"Course 29"},{"id":"course-30","label":"Course 30"}];
const model:SideNavigationModel = {user:{"initials":"AL","name":"Alex Learner","organization":"Structured Growth"},rootMenu:{id:'scrolling',sections:[{id:'courses',title:'Courses',items:courses.map(course=>({...course,active:course.id===selected}))}]}};
return (
<>
<AppShell style={{height:420}} mainLabel="Independently scrolling lessons" navigation={<SideNavigation model={model} onItemSelect={setSelected} aria-label="Independently scrolling courses" />}>
<Stack gap={4}>
<Typography as="h3" variant="h5">Course lessons</Typography>
{Array.from({length:24},(_,index)=><Typography key={index}>Lesson {index+1}. Review the learning goals, practice the activity, and reflect on what you learned before continuing.</Typography>)}
</Stack>
</AppShell>
</>
);
}
Scroll the course list and lesson content separately. AppShell fills the viewport by default; this embedded example gives it a fixed height through its native style prop.
Lesson 1. Review the learning goals, practice the activity, and reflect on what you learned before continuing.
Lesson 2. Review the learning goals, practice the activity, and reflect on what you learned before continuing.
Lesson 3. Review the learning goals, practice the activity, and reflect on what you learned before continuing.
Lesson 4. Review the learning goals, practice the activity, and reflect on what you learned before continuing.
Lesson 5. Review the learning goals, practice the activity, and reflect on what you learned before continuing.
Lesson 6. Review the learning goals, practice the activity, and reflect on what you learned before continuing.
Lesson 7. Review the learning goals, practice the activity, and reflect on what you learned before continuing.
Lesson 8. Review the learning goals, practice the activity, and reflect on what you learned before continuing.
Lesson 9. Review the learning goals, practice the activity, and reflect on what you learned before continuing.
Lesson 10. Review the learning goals, practice the activity, and reflect on what you learned before continuing.
Lesson 11. Review the learning goals, practice the activity, and reflect on what you learned before continuing.
Lesson 12. Review the learning goals, practice the activity, and reflect on what you learned before continuing.
Lesson 13. Review the learning goals, practice the activity, and reflect on what you learned before continuing.
Lesson 14. Review the learning goals, practice the activity, and reflect on what you learned before continuing.
Lesson 15. Review the learning goals, practice the activity, and reflect on what you learned before continuing.
Lesson 16. Review the learning goals, practice the activity, and reflect on what you learned before continuing.
Lesson 17. Review the learning goals, practice the activity, and reflect on what you learned before continuing.
Lesson 18. Review the learning goals, practice the activity, and reflect on what you learned before continuing.
Lesson 19. Review the learning goals, practice the activity, and reflect on what you learned before continuing.
Lesson 20. Review the learning goals, practice the activity, and reflect on what you learned before continuing.
Lesson 21. Review the learning goals, practice the activity, and reflect on what you learned before continuing.
Lesson 22. Review the learning goals, practice the activity, and reflect on what you learned before continuing.
Lesson 23. Review the learning goals, practice the activity, and reflect on what you learned before continuing.
Lesson 24. Review the learning goals, practice the activity, and reflect on what you learned before continuing.
'use client';
import { useState } from 'react';
import { AppShell, SideNavigation, type SideNavigationModel } from '@structured-growth/sg-ui/components';
import { Stack, Typography } from '@structured-growth/sg-ui/primitives';
export default function IndependentAppShellExample() {
const [selected,setSelected] = useState("course-1");
const courses = [{"id":"course-1","label":"Course 1"},{"id":"course-2","label":"Course 2"},{"id":"course-3","label":"Course 3"},{"id":"course-4","label":"Course 4"},{"id":"course-5","label":"Course 5"},{"id":"course-6","label":"Course 6"},{"id":"course-7","label":"Course 7"},{"id":"course-8","label":"Course 8"},{"id":"course-9","label":"Course 9"},{"id":"course-10","label":"Course 10"},{"id":"course-11","label":"Course 11"},{"id":"course-12","label":"Course 12"},{"id":"course-13","label":"Course 13"},{"id":"course-14","label":"Course 14"},{"id":"course-15","label":"Course 15"},{"id":"course-16","label":"Course 16"},{"id":"course-17","label":"Course 17"},{"id":"course-18","label":"Course 18"},{"id":"course-19","label":"Course 19"},{"id":"course-20","label":"Course 20"},{"id":"course-21","label":"Course 21"},{"id":"course-22","label":"Course 22"},{"id":"course-23","label":"Course 23"},{"id":"course-24","label":"Course 24"},{"id":"course-25","label":"Course 25"},{"id":"course-26","label":"Course 26"},{"id":"course-27","label":"Course 27"},{"id":"course-28","label":"Course 28"},{"id":"course-29","label":"Course 29"},{"id":"course-30","label":"Course 30"}];
const model:SideNavigationModel = {user:{"initials":"AL","name":"Alex Learner","organization":"Structured Growth"},rootMenu:{id:'scrolling',sections:[{id:'courses',title:'Courses',items:courses.map(course=>({...course,active:course.id===selected}))}]}};
return (
<>
<AppShell rightNavigation={<SideNavigation model={{"user":{"initials":"PG","name":"Page outline","organization":"Structured Growth"},"rootMenu":{"id":"outline","sections":[{"id":"lessons","title":"Lessons","items":[{"id":"lesson-1","label":"Lesson 1"},{"id":"lesson-2","label":"Lesson 2"},{"id":"lesson-3","label":"Lesson 3"},{"id":"lesson-4","label":"Lesson 4"},{"id":"lesson-5","label":"Lesson 5"},{"id":"lesson-6","label":"Lesson 6"},{"id":"lesson-7","label":"Lesson 7"},{"id":"lesson-8","label":"Lesson 8"},{"id":"lesson-9","label":"Lesson 9"},{"id":"lesson-10","label":"Lesson 10"},{"id":"lesson-11","label":"Lesson 11"},{"id":"lesson-12","label":"Lesson 12"},{"id":"lesson-13","label":"Lesson 13"},{"id":"lesson-14","label":"Lesson 14"},{"id":"lesson-15","label":"Lesson 15"},{"id":"lesson-16","label":"Lesson 16"},{"id":"lesson-17","label":"Lesson 17"},{"id":"lesson-18","label":"Lesson 18"},{"id":"lesson-19","label":"Lesson 19"},{"id":"lesson-20","label":"Lesson 20"},{"id":"lesson-21","label":"Lesson 21"},{"id":"lesson-22","label":"Lesson 22"},{"id":"lesson-23","label":"Lesson 23"},{"id":"lesson-24","label":"Lesson 24"},{"id":"lesson-25","label":"Lesson 25"},{"id":"lesson-26","label":"Lesson 26"},{"id":"lesson-27","label":"Lesson 27"},{"id":"lesson-28","label":"Lesson 28"},{"id":"lesson-29","label":"Lesson 29"},{"id":"lesson-30","label":"Lesson 30"}]}]}}} aria-label="Independently scrolling outline" />} style={{height:420}} mainLabel="Independently scrolling lessons" navigation={<SideNavigation model={model} onItemSelect={setSelected} aria-label="Independently scrolling courses" />}>
<Stack gap={4}>
<Typography as="h3" variant="h5">Course lessons</Typography>
{Array.from({length:24},(_,index)=><Typography key={index}>Lesson {index+1}. Review the learning goals, practice the activity, and reflect on what you learned before continuing.</Typography>)}
</Stack>
</AppShell>
</>
);
}
Each icon opens a separate menu. The host routing adapter changes the active page; the icon rail does not own page routes.
'use client';
import { useState } from 'react';
import { AppShell, IconPanelNavigation, type IconPanelNavigationItem } from '@structured-growth/sg-ui/components';
import { BookIcon, GroupIcon } from '@structured-growth/sg-ui/icons';
import { Navigation, NavigationItem, List, ListItem } from '@structured-growth/sg-ui/experimental';
import { Typography } from '@structured-growth/sg-ui/primitives';
import { SGNavigationProvider } from '@structured-growth/sg-ui/adapters';
export default function IconMenuWorkspaceExample() {
const [activeId,setActiveId] = useState<string|null>("courses");
const [pathname,setPathname] = useState("/courses/overview");
const courses = [{"href":"/courses/overview","label":"Course overview"},{"href":"/courses/lessons","label":"Lessons"},{"href":"/courses/progress","label":"Progress"}];
const people = [{"href":"/people/learners","label":"Learners"},{"href":"/people/instructors","label":"Instructors"}];
const title = [...courses,...people].find(route=>route.href===pathname)?.label??'Course overview';
const items:IconPanelNavigationItem[] = [
{id:'courses',label:'Courses',icon:<BookIcon/>,content:<Navigation label="Course pages"><List>{courses.map(route=><ListItem key={route.href}><NavigationItem href={route.href} current={pathname===route.href}>{route.label}</NavigationItem></ListItem>)}</List></Navigation>},
{id:'people',label:'People',icon:<GroupIcon/>,content:<Navigation label="People pages"><List>{people.map(route=><ListItem key={route.href}><NavigationItem href={route.href} current={pathname===route.href}>{route.label}</NavigationItem></ListItem>)}</List></Navigation>},
];
return (
<>
<SGNavigationProvider value={{pathname,navigate:setPathname}}><AppShell style={{height:360}} mainLabel="Icon menu workspace" navigation={<IconPanelNavigation items={items} activeId={activeId} onActiveIdChange={setActiveId} aria-label="Workspace sections"/>}><Typography as="h3" variant="h5">{title}</Typography></AppShell></SGNavigationProvider>
</>
);
}
Use the icon rail to open a tool alongside the page. Course routes and workspace tools are separate navigation sections.
'use client';
import { useState } from 'react';
import { ThemeScope } from '@structured-growth/sg-ui/theme';
import { AppShell, IconPanelNavigation, SideNavigation, type IconPanelNavigationItem } from '@structured-growth/sg-ui/components';
import { CalendarTodayIcon, DescriptionIcon, TaskAltIcon } from '@structured-growth/sg-ui/icons';
import { Stack, Typography } from '@structured-growth/sg-ui/primitives';
import { TextArea, Checkbox } from '@structured-growth/sg-ui/experimental';
export default function WorkspaceToolsExample() {
const [activeId,setActiveId] = useState<string|null>("notes");
const [draft,setDraft] = useState("Review the course outline.");
const [complete,setComplete] = useState(false);
const items:IconPanelNavigationItem[] = [
{id:'calendar',label:'Calendar',icon:<CalendarTodayIcon/>,content:<Stack gap={3}>{Array.from({length:18},(_,index)=><Typography key={index}>Day {index+1}: Review and practice</Typography>)}</Stack>},
{id:'notes',label:'Notes',icon:<DescriptionIcon/>,content:<TextArea label="Workspace notes" value={draft} onValueChange={setDraft}/>},
{id:'tasks',label:'Tasks',icon:<TaskAltIcon/>,content:<Checkbox label="Review the outline" checked={complete} onCheckedChange={setComplete}/>},
];
return (
<>
<ThemeScope density="comfortable"><AppShell style={{height:420}} mainLabel="Course workspace" navigation={<IconPanelNavigation items={items} activeId={activeId} onActiveIdChange={setActiveId} side={"start"} resizable={false} minPanelWidth={240} maxPanelWidth={960} panelWidth={"20rem"} aria-label="Workspace tools"/>}><Stack gap={3}><Typography as="h3" variant="h5">Course workspace</Typography><Typography>Use the icon rail to open a tool alongside the page. Course routes and workspace tools are separate navigation sections.</Typography></Stack></AppShell></ThemeScope>
</>
);
}
Use the icon rail to open a tool alongside the page. Course routes and workspace tools are separate navigation sections.
'use client';
import { useState } from 'react';
import { ThemeScope } from '@structured-growth/sg-ui/theme';
import { AppShell, IconPanelNavigation, SideNavigation, type IconPanelNavigationItem } from '@structured-growth/sg-ui/components';
import { CalendarTodayIcon, DescriptionIcon, TaskAltIcon } from '@structured-growth/sg-ui/icons';
import { Stack, Typography } from '@structured-growth/sg-ui/primitives';
import { TextArea, Checkbox } from '@structured-growth/sg-ui/experimental';
export default function WorkspaceToolsExample() {
const [activeId,setActiveId] = useState<string|null>("calendar");
const [draft,setDraft] = useState("Review the course outline.");
const [complete,setComplete] = useState(false);
const items:IconPanelNavigationItem[] = [
{id:'calendar',label:'Calendar',icon:<CalendarTodayIcon/>,content:<Stack gap={3}>{Array.from({length:18},(_,index)=><Typography key={index}>Day {index+1}: Review and practice</Typography>)}</Stack>},
{id:'notes',label:'Notes',icon:<DescriptionIcon/>,content:<TextArea label="Workspace notes" value={draft} onValueChange={setDraft}/>},
{id:'tasks',label:'Tasks',icon:<TaskAltIcon/>,content:<Checkbox label="Review the outline" checked={complete} onCheckedChange={setComplete}/>},
];
return (
<>
<ThemeScope density="comfortable"><AppShell style={{height:420}} mainLabel="Course workspace" navigation={<SideNavigation aria-label="Course routes" model={{user:{initials:'AL',name:'Alex Learner',organization:'Structured Growth'},rootMenu:{id:'workspace',sections:[{id:'courses',items:[{id:'overview',label:'Overview'},{id:'lessons',label:'Lessons'}]}]}}}/>} rightNavigation={<IconPanelNavigation items={items} activeId={activeId} onActiveIdChange={setActiveId} side={"end"} resizable={false} minPanelWidth={240} maxPanelWidth={960} panelWidth={"20rem"} aria-label="Workspace tools"/>}><Stack gap={3}><Typography as="h3" variant="h5">Course workspace</Typography><Typography>Use the icon rail to open a tool alongside the page. Course routes and workspace tools are separate navigation sections.</Typography></Stack></AppShell></ThemeScope>
</>
);
}