Build an app in 15 minutes

npx create-buttery plant-shop --template dashboard

Made plant-shop from the dashboard template.

  cd plant-shop
  npm run dev

Then check its layout with npx buttery check, and add pages with npx buttery add page <kind>.

npx buttery add page table --name Plants

Added src/pages/PlantsPage.tsx: a list of records in a table, with its header and actions, from DataTable.
It's at /plants in src/App.tsx, with an item in the sidebar.
Check it with npx buttery check /plants.

interface Plant {
  readonly id: string;
  readonly name: string;
  readonly light: "Bright" | "Shade";
  readonly stock: number;
  readonly price: number;
}

const PLANTS: readonly Plant[] = [
  {
    id: "P-101",
    name: "Fiddle-leaf fig",
    light: "Bright",
    stock: 4,
    price: 48,
  },
  { id: "P-102", name: "Snake plant", light: "Shade", stock: 12, price: 22 },
  { id: "P-103", name: "Golden pothos", light: "Shade", stock: 0, price: 16 },
  {
    id: "P-104",
    name: "Bird of paradise",
    light: "Bright",
    stock: 2,
    price: 64,
  },
];

const COLUMNS: readonly DataTableColumn<Plant>[] = [
  {
    id: "id",
    header: "Plant",
    cell: (plant) => <DataTable.Id value={plant.id} />,
  },
  {
    id: "name",
    header: "Name",
    minWidth: "md",
    grow: 2,
    sortable: true,
    cell: (plant) => plant.name,
  },
  {
    id: "stock",
    header: "Stock",
    skeleton: "badge",
    cell: (plant) => (
      <StatusBadge tone={plant.stock > 0 ? "success" : "warning"}>
        {plant.stock > 0 ? `${String(plant.stock)} left` : "Sold out"}
      </StatusBadge>
    ),
  },
  { id: "light", header: "Light", cell: (plant) => plant.light },
  {
    id: "price",
    header: "Price",
    minWidth: "md",
    align: "end",
    sortable: true,
    cell: (plant) => <DataTable.Amount value={plant.price} currency="USD" />,
  },
];

function sorted(
  plants: readonly Plant[],
  sort: DataTableSort | null,
): readonly Plant[] {
  if (sort === null) return plants;
  const sign = sort.direction === "ascending" ? 1 : -1;
  return [...plants].sort((a, b) =>
    sort.column === "price"
      ? (a.price - b.price) * sign
      : a.name.localeCompare(b.name) * sign,
  );
}

npx buttery check / /plants

Checked / and /plants at 390 and 1280, light and dark, comfortable, in chromium.

buttery found no layout problems.

actions={
  <Inline gap={2}>
    <Button>Water all</Button>
    <Button>Print labels</Button>
    <Button variant="primary">Add a plant</Button>
  </Inline>
}

Checked /plants at 390 and 1280, light and dark, comfortable, in chromium.

✗ /plants
  overflow      [data-bt-part="section-head"]: content overflows its width by 2.5px
                Fix: Give it room, let it shrink (min-width: 0 comes with Stack, Inline and Grid), wrap the text, or truncate it with <Text truncate>.
                In 390x844 light comfortable chromium and 390x844 dark comfortable chromium.

buttery found 1 layout problem.

/** The shop's plants in a table, sorted by name or price, each with a menu to restock or retire it. */
export function PlantsPage(): ReactElement {
  const [sort, setSort] = useState<DataTableSort | null>(null);
  const [selected, setSelected] = useState<ReadonlySet<string>>(new Set());
  const [note, setNote] = useState("Nothing changed yet");
  return (
    <AppPage
      header={
        <PageHeader
          title="Plants"
          description="Everything the shop grows and sells."
          actions={
            <>
              <PageHeader.Action
                label="Water all"
                icon={Droplets}
                onSelect={() => {
                  setNote("Watered every plant");
                }}
              />
              <PageHeader.Action
                label="Print labels"
                icon={Printer}
                onSelect={() => {
                  setNote("Sent the labels to the printer");
                }}
              />
            </>
          }
        />
      }
    >
      <AppPage.Section
        title="In the greenhouse"
        description={`${String(selected.size)} selected · ${note}`}
        actions={
          <Button
            variant="primary"
            onClick={() => {
              setNote("Started a new plant");
            }}
          >
            Add a plant
          </Button>
        }
      >
        <DataTable
          label="Plants"
          columns={COLUMNS}
          rows={sorted(PLANTS, sort)}
          rowKey={(plant) => plant.id}
          rowLabel={(plant) => plant.name}
          selectable
          selected={selected}
          onSelectedChange={setSelected}
          sort={sort}
          onSortChange={setSort}
          rowActions={(plant) => (
            <>
              <Menu.Item
                onSelect={() => {
                  setNote(`Ordered more ${plant.name}`);
                }}
              >
                Restock
              </Menu.Item>
              <Menu.Item
                tone="danger"
                onSelect={() => {
                  setNote(`Retired ${plant.name}`);
                }}
              >
                Retire
              </Menu.Item>
            </>
          )}
        />
      </AppPage.Section>
    </AppPage>
  );
}

Checked / and /plants at 390 and 1280, light and dark, comfortable, in chromium.

buttery found no layout problems.

  { path: "/plants", interactions: [] },

npm run typecheck
npm run lint
npm run test:e2e

  ✓  38 [chromium] › e2e/layout.spec.ts:178:3 › the dashboard's /plants is buttery (1.9s)
  ✓  41 [webkit] › e2e/layout.spec.ts:178:3 › the dashboard's /plants is buttery (2.0s)
  54 passed (35.8s)