Layout primitives

Box, Stack, and Inline helpers with token-aligned spacing props (same Tailwind steps as the dashboard). Prefer Tailwind `className` for radii and colors.

Preview

Interactive examples use the same @flux/ui build as production. Toggle theme in the header for light and dark. Motion tokens and layout patterns live under Motion and Patterns in the sidebar.

Live preview

Token-aligned spacing props map to the same Tailwind steps used on dashboard pages (typically gap-3 / gap-4).

Stack (vertical)gap="sm" inside padded Box

Nested Stack gap="xs"Tighter vertical rhythm for dense UI.

Inline

Installation

Add the package to your app (full Next.js + Tailwind steps on Installation):

npm install @payglocal_ui/flux-ui

Usage

Import

import { Box, Stack, Inline } from "@payglocal_ui/flux-ui";

Example

<Stack gap="lg">
  <Box p="md" className="rounded-xl border border-border">
    <Stack gap="sm">…</Stack>
  </Box>
  <Inline gap="md" justify="between">
    <span>Title</span>
    <Button size="sm" variant="outline">Action</Button>
  </Inline>
</Stack>