Component

MosaicMandate

Choose Shelf, Pyramid or Orbit. The children are rendered in three actual structures and geometries, not just recolored; Revoke mandate removes the imposed arrangement and returns them to waiting.

Possible use

It could let a reviewer decide whether a handoff belongs in a vertical shelf, a ranked pyramid or a ceremonial orbit, or let a presenter give agenda fields an arrangement with theatrical consequences. The geometry changes while the information does not.

Reasonable alternative

A reasonable local alternative is choosing one responsive layout in CSS and keeping the authored order. A mandate should not hold ordinary children hostage to a geometry vote.

01 / Preview

Try it yourself.

Choose a policy before the pieces may occupy a shape.

Mechanism

1: Choose Shelf, Pyramid or Orbit.
2: The same four pieces move into three genuinely different geometries.
3: Revoke the mandate to return the pieces to waiting.

02 / Usage

Put it somewhere.

example.tsxTSX

import { MosaicMandate } from "gra-ui";
import "gra-ui/styles.css";

export function ArrangedFields() {
  return (
    <MosaicMandate>
      <span>Title</span>
      <span>Status</span>
      <span>Owner</span>
    </MosaicMandate>
  );
}

03 / API

Small surface area.

PropTypeDescription

childrenReactNodeThe pieces assigned to one of three materially different arrangements.