SGUI / Development
Box
Native semantic wrapper with spacing and readable container width.
Loading examples…
Loading examples…
Examples
Loading examples…
Contains
No fixed SGUI child components.
Component documentation
SGUI / Development
Native semantic wrapper with spacing and readable container width.
Loading examples…
Loading examples…
Loading examples…
No fixed SGUI child components.
Contained content
Native semantic wrapper with spacing and readable container width.
Contained content
'use client';
import { useState } from 'react';
import { ThemeScope } from '@structured-growth/sg-ui/theme';
import { Box, Stack, Typography, Button } from '@structured-growth/sg-ui/experimental';
export default function BoxPlaygroundExample() {
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">
<Box as={"div"} padding={Number("0") as 0 | 1 | 2 | 3 | 4} container={false}><Typography>{"Contained content"}</Typography><Button>Continue learning</Button></Box>
</ThemeScope>
</>
);
}
The same props in independent density scopes.
Contained content
Contained content
'use client';
import { useState } from 'react';
import { ThemeScope } from '@structured-growth/sg-ui/theme';
import { Box, Stack, Typography, Button } from '@structured-growth/sg-ui/experimental';
export default function BoxPlaygroundDensitiesExample() {
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"><Box as={"div"} padding={Number("0") as 0 | 1 | 2 | 3 | 4} container={false}><Typography>{"Contained content"}</Typography><Button>Continue learning</Button></Box></ThemeScope>
<ThemeScope density="comfortable"><Box as={"div"} padding={Number("0") as 0 | 1 | 2 | 3 | 4} container={false}><Typography>{"Contained content"}</Typography><Button>Continue learning</Button></Box></ThemeScope>
</Stack>
</>
);
}