Stack, Cluster & Grid

npm package: import it from 'flootlets'

bun add flootlets

Or copy it in with the shadcn CLI: import it from '@/components/ui/…'

npx shadcn@latest add https://dyeoh.github.io/flootlets/r/layout.json

Both need Tailwind CSS v4; see Installation for the setup.

• Stack: children in a column. gap (default 4), align.
• Cluster: a row that wraps, for buttons and badges. gap (default 2), justify, align.
• Grid: as many columns as fit, each at least minItemWidth (default 14rem). It adapts to its container, not to fixed screen sizes, so the same grid works in a sidebar or full width.

gap is a step on Tailwind’s spacing scale (0–16), not pixels: gap={4} is the same as gap-4 (1rem). A gap-* class in class overrides it.

Kuih Lapis

RM 10.00New

Tudung Bawal

RM 17.50

Baju Kurung

RM 25.00

Kerepek Pisang

RM 32.50

import { For, Show } from 'solid-js';
const items = ['Kuih Lapis', 'Tudung Bawal', 'Baju Kurung', 'Kerepek Pisang'];

export default function LayoutGrid() {
  return (
    <Grid minItemWidth="9rem" gap={3} class="w-full">
      <For each={items}>
        {(name, i) => (
          <Stack gap={1} class="rounded-lg border p-4">
            <strong>{name}</strong>
            <Cluster gap={2}>
              <Price
                amount={{ amount: 1000 + i() * 750, currency: 'MYR' }}
                locale="en-MY"
                size="sm"
              />
              <Show when={i() === 0}>
                <Badge>New</Badge>
              </Show>
            </Cluster>
          </Stack>
        )}
      </For>
    </Grid>
  );
}