Component documentation
SGUI / Development
Semantic or decorative separators in horizontal and vertical layouts.
Loading examples…
Loading examples…
Loading examples…
No fixed SGUI child components.
No direct parents in the documented component catalog.
Overview
Lessons
Semantic or decorative separators in horizontal and vertical layouts.
Overview
Lessons
'use client';
import { useState } from 'react';
import { ThemeScope } from '@structured-growth/sg-ui/theme';
import { Divider, Stack, Typography, Button } from '@structured-growth/sg-ui/experimental';
export default function DividerPlaygroundExample() {
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 (
<>
<ThemeScope density="comfortable">
<Stack direction="row" align="stretch" gap={3}><Typography>Overview</Typography><Divider orientation={"horizontal"} decorative={false} /><Typography>Lessons</Typography></Stack>
</ThemeScope>
</>
);
}
The same props in independent density scopes.
Overview
Lessons
Overview
Lessons
'use client';
import { useState } from 'react';
import { ThemeScope } from '@structured-growth/sg-ui/theme';
import { Divider, Stack, Typography, Button } from '@structured-growth/sg-ui/experimental';
export default function DividerPlaygroundDensitiesExample() {
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"><Stack direction="row" align="stretch" gap={3}><Typography>Overview</Typography><Divider orientation={"horizontal"} decorative={false} /><Typography>Lessons</Typography></Stack></ThemeScope>
<ThemeScope density="comfortable"><Stack direction="row" align="stretch" gap={3}><Typography>Overview</Typography><Divider orientation={"horizontal"} decorative={false} /><Typography>Lessons</Typography></Stack></ThemeScope>
</Stack>
</>
);
}