components / 11

marked dialog

a deliberate interruption. the room goes quiet, then the boundary and meaning are drawn into place.

shadcnnpx shadcn@latest add berkantay/cheez/marked-dialog

live

playground

closed

size

character

panel

title

panel ink

title ink

dismissal

<MarkedDialog
  size="medium"
  character="rushed"
  frameMark="rounded-box"
  titleMark="underline"
>
  <MarkedDialogTrigger>open note</MarkedDialogTrigger>
  <MarkedDialogContent>
    <MarkedDialogHeader>
      <MarkedDialogTitle>before you publish</MarkedDialogTitle>
      <MarkedDialogDescription>
        this becomes visible to everyone.
      </MarkedDialogDescription>
    </MarkedDialogHeader>
    <MarkedDialogFooter>
      <MarkedDialogClose>got it</MarkedDialogClose>
    </MarkedDialogFooter>
  </MarkedDialogContent>
</MarkedDialog>

behavior

states

every card opens a real dialog

default

compact

wide

danger

no corner close

non-modal

composition

name a new mark

dialog + field + actions

new collection

dialogs should contain a decision, not an entire product.

reference

api

compound parts, one shared drawing voice

part	prop	type	default	purpose
Root	`open`	`boolean`	`—`	controlled open state
Root	`defaultOpen`	`boolean`	`false`	uncontrolled initial state
Root	`onOpenChange`	`function`	`—`	open state callback with reason
Root	`modal`	`boolean \| "trap-focus"`	`true`	focus and outside interaction model
Root	`disablePointerDismissal`	`boolean`	`false`	ignore outside presses
Root	`size`	`"small" \| "medium" \| "large"`	`"medium"`	panel width and spacing
Root	`frameMark`	`CheezType`	`"rounded-box"`	drawn panel boundary
Root	`frameColor`	`string`	`"#8f74ff"`	boundary ink
Root	`titleMark`	`CheezType`	`"underline"`	title emphasis
Root	`titleColor`	`string`	`"#b7ff3c"`	title ink
Root	`closeColor`	`string`	`"#ff5fa2"`	close glyph ink
Root	`character`	`"calm" \| "rushed" \| "chaotic"`	`"rushed"`	drawing personality
Content	`initialFocus`	`boolean \| ref \| function`	`true`	opening focus target
Content	`finalFocus`	`boolean \| ref \| function`	`true`	closing focus target
Content	`showClose`	`boolean`	`true`	corner close glyph
Content	`keepMounted`	`boolean`	`false`	preserve portal contents
Trigger	`mark`	`CheezType`	`"rounded-box"`	trigger interaction mark
Trigger	`marked`	`boolean`	`—`	force mark visibility
Title	`mark`	`CheezType`	`root value`	local title override
Close	`mark`	`CheezType`	`"cross"`	icon glyph override

behavior notes

focus moves inside on open and returns to the trigger on close
Escape closes unless the open change is prevented
modal mode traps focus and locks document scrolling
outside press behavior remains configurable
the corner close control is always available to touch screen readers
reduced-motion users receive the finished drawing without transition movement