components / 13
marked popover
a pinned working note. it stays close to its subject while giving the user enough room to actually do something.
shadcn
npx shadcn@latest add berkantay/cheez/marked-popoverlive
closedplayground
size
side
align
character
frame
pin
frame ink
pin ink
mode
<MarkedPopover
size="medium"
character="rushed"
frameMark="corner-box"
pinMark="asterisk"
>
<MarkedPopoverTrigger>add note</MarkedPopoverTrigger>
<MarkedPopoverContent side="bottom" align="center">
<MarkedPopoverTitle>leave a note</MarkedPopoverTitle>
<MarkedPopoverDescription>
write context without leaving the page.
</MarkedPopoverDescription>
</MarkedPopoverContent>
</MarkedPopover>behavior
every card is interactivestates
composition
interactive controls in contextmark inspector
this matters more
select the sentence, then tune the gesture beside it.
reference
compound parts, focused responsibilityapi
| part | prop | type | default | purpose |
|---|---|---|---|---|
| Root | open | boolean | — | controlled open state |
| Root | defaultOpen | boolean | false | uncontrolled initial state |
| Root | onOpenChange | function | — | state callback with reason |
| Root | modal | boolean | "trap-focus" | false | outside interaction and focus model |
| Root | size | "small" | "medium" | "large" | "medium" | working surface scale |
| Root | frameMark | CheezType | "corner-box" | drawn note boundary |
| Root | frameColor | string | "#8f74ff" | frame ink |
| Root | pinMark | CheezType | "asterisk" | corner pin glyph |
| Root | pinColor | string | "#b7ff3c" | pin ink |
| Root | arrowMark | CheezType | "pointer" | anchor pointer |
| Root | arrowColor | string | frame color | pointer ink |
| Root | titleMark | CheezType | "underline" | title emphasis |
| Root | titleColor | string | "#35d9ff" | title ink |
| Root | character | "calm" | "rushed" | "chaotic" | "rushed" | drawing personality |
| Trigger | openOnHover | boolean | false | also open from hover |
| Trigger | delay | number | 300 | hover opening delay |
| Trigger | closeDelay | number | 0 | hover closing delay |
| Trigger | mark | CheezType | "rounded-box" | local trigger mark |
| Content | side | "top" | "right" | "bottom" | "left" | "bottom" | preferred placement |
| Content | align | "start" | "center" | "end" | "center" | cross-axis alignment |
| Content | sideOffset | number | 16 | distance from trigger |
| Content | initialFocus | boolean | ref | function | true | opening focus target |
| Content | finalFocus | boolean | ref | function | true | closing focus target |
| Content | backdrop | boolean | false | plain modal backdrop |
| Content | showPin | boolean | true | corner pin glyph |
| Content | showArrow | boolean | true | anchor pointer |
| Content | showClose | boolean | true | corner close glyph |
behavior notes
- clicking the trigger toggles the working surface
- focus moves inside and returns to the trigger after closing
- Escape and outside press dismiss non-modal popovers
- placement shifts or flips before leaving the viewport
- hover-open content remains reachable by the pointer
- use a dialog when the task must interrupt the whole page