Layout

Grid

Equal columns that collapse on small screens, or as many as fit.

import { Grid } from "@flinbu/seed";

As many columns as fit

minChild keeps cards at least 16rem wide and wraps the rest.

ButtonUp to date

InputUp to date

SelectUp to date

DialogUp to date

TabsUp to date

ToastUp to date

import { Button, Card, Grid, Tabs } from "@flinbu/seed";

<Grid minChild="xs" gap="sm" className="w-full max-w-2xl">
  {["Button", "Input", "Select", "Dialog", "Tabs", "Toast"].map((n) => (
    <Card key={n} className="p-base"><span className="text-primary label-label-2-medium">{n}</span><span className="text-tertiary body-body-4-regular">Up to date</span></Card>
  ))}
</Grid>

Use it for

Card grids, swatches, settings.

Props

Prop	Type	Default	Description
`columns`	`1234612`	`2`	Collapses to fewer on small screens.
`minChild`	`'xs''sm''md''lg'`	–	16, 18, 20 or 24rem minimum; overrides columns.
`gap`	`'none''xxxs' … '4xl'`	–	Default base.

Accessibility

Pure layout. Reading order follows the source.