Panel Row

1
2
3'use client';

import { useRef, type ReactNode } from 'react';

Installation#

pnpm dlx shadcn@latest add https://ui.zeroxsolutions.com/r/panel-row.json

Usage#

import { PanelRow, PanelRowAction } from '@/components/layout/panel-row';

<PanelRow>
  <PanelFieldGroup cols={2}>
    <Field>
      <FieldLabel htmlFor="x">X</FieldLabel>
      <Input id="x" defaultValue="100" />
    </Field>
    <Field>
      <FieldLabel htmlFor="y">Y</FieldLabel>
      <Input id="y" defaultValue="200" />
    </Field>
  </PanelFieldGroup>
  <PanelRowAction>
    <Button variant="ghost" size="icon" aria-label="Lock aspect ratio">
      <LockIcon aria-hidden />
    </Button>
  </PanelRowAction>
</PanelRow>

Compose a Panel Field Group for the fields; leave PanelRowAction empty rather than omitting it, so the row still reserves its action column and every row in the panel keeps the same right edge.

Composition#

PanelRow
|-- PanelFieldGroup
|   `-- Field
|       |-- FieldLabel
|       `-- Input
`-- PanelRowAction
    `-- Button

API reference#

PanelRow#

Renders a div and takes every prop a div takes. One row of a property section: the fields (usually a PanelFieldGroup) and a trailing PanelRowAction. The action column is part of the row's template, at least one default icon button (size="icon") wide whether an action is composed or not, so every row in a panel shares the same right edge. It sets data-slot="panel-row".

PanelRowAction#

Renders a div and takes every prop a div takes. The trailing action of a PanelRow, such as an aspect-lock toggle or a reset button, centred in its column. It sets data-slot="panel-row-action".