layout
Container, Grid, Stack, Panel, Divider, Skeleton
Layoutlayout.css
Installation
$
npx skeehn add layoutPreview
1
2
3
Stack item
Stack item
Stack item
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| Container: size | 'sm' | 'md' | 'lg' | 'xl' | 'full' | 'lg' | Container max-width |
| Grid: cols | 1 | 2 | 3 | 4 | 6 | 12 | — | Number of columns |
| Stack: direction | 'row' | 'column' | 'column' | Stack direction |
| Stack: gap | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'md' | Gap between items |
Usage
layout.tsx
1import { Container, Grid, GridCell, Stack, Divider, Skeleton } from '@skeehn/react';23export function PageLayout() {4 return (5 <Container size="lg">6 <Grid cols={3}>7 <GridCell>Column 1</GridCell>8 <GridCell>Column 2</GridCell>9 <GridCell>Column 3</GridCell>10 </Grid>11 <Divider />12 <Stack direction="row" gap="md">13 <Skeleton shape="circle" style={{ width: 40, height: 40 }} />14 <Skeleton style={{ height: 16, width: '60%' }} />15 </Stack>16 </Container>17 );18}