Layout

Use these instead of hand-written flex and grid. Each one is built so content cannot push the layout wider than the screen, which is the usual cause of cards spilling off the side on mobile.

import { Stack, Row, Grid, Spacer } from '@cskn/ui';

<Stack gap={16}>
  <Row gap={12} align="center">
    <Title />
    <Spacer />
    <Actions />
  </Row>

  <Grid cols={4} gap={12}>{stats}</Grid>
  <Grid min={160} gap={16}>{cards}</Grid>
</Stack>

Stack

A vertical flex column with min-width: 0, so long or non-wrapping content shrinks instead of overflowing.

number | string

Space between children.

CSS value

align-items and justify-content.

Row

A horizontal flex row with min-width: 0.

number | string

Space between children.

CSS value

align-items and justify-content.

boolean

Allow wrapping onto several lines.

Spacer takes up the remaining space in a Row or Stack. Give it size for a fixed gap instead.

Grid

number

A fixed number of equal columns that can shrink below their content: repeat(cols, minmax(0, 1fr)).

number

A responsive card grid: columns at least min px wide when there is room, collapsing to one column on narrow screens. Ignored when cols is set.

number | string

Gaps.

Why this matters: a plain display: grid without explicit columns can grow to a child’s max-content width, and 1fr means minmax(auto, 1fr), which will not shrink below its content. Grid pins its tracks to minmax(0, …) in both modes. UIProvider also caps img, svg, video and iframe at max-width: 100%. Add overflow-x: hidden to your app root as well.

Responsive

Breakpoints: sm 640, md 768, lg 1024, xl 1280.

import { useBreakpoint, useMediaQuery, Show, Hide } from '@cskn/ui';

const bp = useBreakpoint();
return bp.lg ? <Sidebar /> : <TabBar />;

<Show above="lg"><Sidebar /></Show>
<Show below="lg"><TabBar /></Show>

const prefersReducedMotion = useMediaQuery('(prefers-reduced-motion: reduce)');

BreakpointState

{ width, sm, md, lg, xl, active, min(bp), max(bp) }. Each boolean is true when the viewport is at least that wide; active is the largest match, or 'base'.

Show mounts its children only above (at least) or below (narrower than) a breakpoint; combine both for a range. Hide is the inverse. Both decide on the client, so a hidden subtree is not mounted at all. breakpoints exports the pixel values.

Overview

Components

Platform

Profile integration

Stack

Row

Grid

Responsive

​Stack

​Row

​Grid

​Responsive

Stack

Row

Grid

Responsive