<Puck.Fields>

Render the fields for the currently selected item in <Puck.Preview> when composing a custom Puck UI.

Interactive Demo

import { Puck } from "@measured/puck";
 
export function Editor() {
  return (
    <Puck>
      <Puck.Fields />
    </Puck>
  );
}

Props

Param	Example	Type	Status
`wrapFields`	`wrapFields: false`	boolean	-

Optional props

`wrapFields`

Whether or not the top-level fields should be padded and separated by a a border. Defaults to true.

import { Puck } from "@measured/puck";
 
export function Editor() {
  return (
    <Puck>
      <Puck.Fields wrapFields={false} />
    </Puck>
  );
}

<Puck.Components><Puck.Outline>