Character sheetPro

A consistent character from every angle on a turnaround with eye and chin guides, a row of expressions, and views pinned as references for the next generations.

Markdown

On this page

ProA turnaround and expressions, pinned

Installation

$ pnpm dlx shadcn@latest add @chatcn-pro/character-sheet

Usage

tsx

import { CharacterSheet } from "@/components/ui/chatcn/pro/character-sheet"

<CharacterSheet
  name="Wren"
  meta="Seed 48213 · 9 views"
  views={views}
  pinned={references}
  onPinnedChange={setReferences}
  consistency={0.94}
/>

Views with kind: "angle" line up on the turnaround over shared eye and chin guides, so a view that drifted (taller, a different jaw, longer hair) stands out at a glance; expressions sit in their own row. Pin views to send them as references with the next prompt, up to maxPinned. Views can be generating or error on their own, and onRegenerate retries one alone. The demo draws its character in SVG; pass your renders as content.

Examples

Every state

ProDrawing, drifted, pin limit, empty

Props

Prop	Type	Notes
`name`, `meta`	`string`, `ReactNode`	Header
`views`	`{ id, label, kind, content, status?, error? }[]`	Angles and expressions
`pinned`, `defaultPinned`, `onPinnedChange`	`string[]`	Controlled or not
`maxPinned`	`number`	Default 4
`consistency`	`number`	0 to 1, shown as an identity meter
`onRegenerate`	`(id) => void`	Retry one view
`guides`	`{ eye, chin } \| false`	Fractions of the tile height
`disabled`	`boolean`

Keyboard

Key	Action
`Tab`	Move through pin and retry buttons
`Enter`, `Space`	Pin or unpin the focused view, retry a failed one

Accessibility

Pins are toggle buttons named after the view, with aria-pressed; the reference count is a polite live region.
At the limit, unpinned views cannot be pinned and say why in their title.
The identity match is a meter with its value.

Motion

Pin buttons fade in on hover in 150 ms and press to the icon scale. Drawing views use the one allowed shimmer on their label.