components / 16

marked alert

a persistent message deserves more than a tinted rectangle. the hand marks what changed and why it matters.

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

live

playground

announcing

changes published

the latest version is now available to everyone.

tone

variant

size

character

boundary

dismiss control

<MarkedAlert
  tone="success"
  variant="outline"
  size="medium"
  character="rushed"
  frameMark="rounded-box"
  dismissible
  open={open}
  onOpenChange={setOpen}
>
  <MarkedAlertTitle>changes published</MarkedAlertTitle>
  <MarkedAlertDescription>
    the latest version is now available to everyone.
  </MarkedAlertDescription>
</MarkedAlert>

signals

every tone has a glyph

meaning before color

a small note

this changes how the next export behaves.

changes published

the latest version is now available to everyone.

storage nearly full

remove an old export before creating another one.

payment needs attention

update the card to keep the workspace active.

comments moved

feedback now lives beside the selected component.

drawing the preview

Cheez is rendering every mark with your settings.

surface

three levels of presence

outline, marker wash, quiet

outline

a clear boundary

the alert owns its space without becoming a generic card.

filled

needs your attention

the hand fills urgent messages like a marker across paper.

quiet

a quiet observation

the status drawing can carry the message without a container.

composition

actions and banners

native controls, explicit priority

billing is paused

update the payment method to keep publishing new versions.

preview environment

changes here do not affect the live workspace.

migration complete

all 148 components moved without losing their history.

custom dismissal

the close part can live with your own action arrangement.

drawn close control

reference

api

root, title, description, actions, close

part	prop	type	default	purpose
Root	`tone`	`MarkedAlertType`	`"default"`	status glyph and ink
Root	`variant`	`"outline" \| "filled" \| "quiet"`	`"outline"`	boundary treatment
Root	`layout`	`"card" \| "banner"`	`"card"`	inline or full-width rhythm
Root	`size`	`"small" \| "medium" \| "large"`	`"medium"`	spacing and type scale
Root	`priority`	`"polite" \| "urgent" \| "off"`	`tone-aware`	live-region announcement behavior
Root	`open`	`boolean`	`—`	controlled visibility
Root	`defaultOpen`	`boolean`	`true`	initial uncontrolled visibility
Root	`onOpenChange`	`(open) => void`	`—`	dismissal callback
Root	`dismissible`	`boolean`	`false`	include the drawn close control
Root	`character`	`CheezCharacter`	`"rushed"`	drawing personality
Root	`frameMark`	`CheezType`	`"rounded-box"`	outline boundary
Root	`fillMark`	`CheezType`	`"brush-highlight"`	filled marker wash
Root	`frameColor`	`string`	`tone ink`	boundary or fill ink
Root	`statusMark`	`CheezType`	`tone glyph`	leading status override
Root	`statusColor`	`string`	`tone ink`	leading glyph ink
Root	`titleMark`	`CheezType`	`"underline"`	title emphasis
Root	`titleColor`	`string`	`tone ink`	title emphasis ink
Root	`closeColor`	`string`	`"#ff5fa2"`	dismiss glyph ink
Root	`thickness`	`number`	`1`	all pen weight
Title	`mark`	`CheezType`	`root value`	local title-mark override
Title	`color`	`string`	`root value`	local title-ink override
Description	`HTML props`	`p props`	`—`	supporting content
Actions	`HTML props`	`div props`	`—`	action composition slot
Close	`HTML props`	`button props`	`—`	dismissal control

behavior notes

error alerts announce urgently by default; every other tone is polite
priority off removes live-region behavior for content already present on page load
status meaning is carried by both a glyph and text, never color alone
filled alerts use an animated Cheez marker wash rather than a CSS fill
controlled visibility lets product state decide whether dismissal sticks
preventing default in a custom close handler keeps the alert open