ShowGuesser

A show page whose fields come from the resource's registered Zod schema.

Installation

pnpm dlx shadcn@latest add @chelone/show-guesser

<ShowGuesser> is a <Show> with a <RecordField> for each field of the resource's Zod schema, so the rows exist before the record loads. A resource without a schema shows <GuesserEmpty> and fetches no record.

Loading preview…

src/App.tsx

<Resource name="posts" show={ShowGuesser} />

Outside production it logs the hand-written show page it stands in for. Copy that code and replace the guesser when the page needs more. enableLog turns the log off. The guessers guide covers the schema-to-field mapping, the log and Vue.

See also <ListGuesser> and <EditGuesser>.

Props

Prop	Type	Default	Description
actions	ReactNode	—	Header actions (an edit button); nothing by default.
className	string	—
component	ElementType<any, keyof IntrinsicElements>	—
enableLog	boolean	—	Log the equivalent hand-written show page once per resource. Defaults to on outside production.
id	Identifier	—	Override the record id (defaults to the `:id` route param).
resource	string	—	Override the ambient resource (defaults to the `<Resource>` context).
title	ReactNode	—	Header title. A string/element renders as an `<h2>`; `false` omits it.