components / 02

marked tabs

selection stays familiar. the active thought gets a human mark.

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

live

playground

selected: notes

small details should still feel made by someone.

orientation

activation

character

active mark

hover mark

active ink

hover ink

<MarkedTabs defaultValue="notes" orientation="horizontal">
  <MarkedTabsList activateOnFocus={false}>
    <MarkedTabsTrigger
      value="notes"
      mark="underline"
      interactionMark="short-underline"
      character="rushed"
      markColor="#ff4f2e"
      interactionColor="#35d9ff"
    >
      notes
    </MarkedTabsTrigger>
  </MarkedTabsList>
  <MarkedTabsPanel value="notes">...</MarkedTabsPanel>
</MarkedTabs>

behavior

states

one purpose per state

inactive

hover

focus visible

active

disabled

active + hover

reference

api

composable parts, native ref forwarding

part	prop	type	default	purpose
Root	`value`	`any`	`—`	controlled active tab
Root	`defaultValue`	`any`	`0`	initial uncontrolled tab
Root	`onValueChange`	`function`	`—`	selection callback
Root	`orientation`	`"horizontal" \| "vertical"`	`"horizontal"`	layout and arrow-key axis
List	`activateOnFocus`	`boolean`	`false`	automatic or manual keyboard activation
List	`loopFocus`	`boolean`	`true`	wrap arrow-key focus
Trigger	`value`	`any`	`required`	connects trigger and panel
Trigger	`disabled`	`boolean`	`false`	removes a tab from interaction
Trigger	`mark`	`CheezType`	`"underline"`	persistent active mark
Trigger	`interactionMark`	`CheezType`	`"short-underline"`	hover and focus mark
Trigger	`markColor`	`string`	`"#ff4f2e"`	active mark color
Trigger	`interactionColor`	`string`	`markColor`	hover and focus color
Trigger	`marked`	`boolean`	`undefined`	controlled mark visibility
Trigger	`character`	`"calm" \| "rushed" \| "chaotic"`	`"rushed"`	drawing personality
Panel	`value`	`any`	`required`	matching trigger value
Panel	`keepMounted`	`boolean`	`false`	retain inactive panel DOM

behavior notes

inactive tabs remain visually quiet
hover and focus use a shorter interaction mark
the selected tab keeps its full active mark
arrow keys follow the chosen orientation
manual activation uses Enter or Space; automatic activation follows focus
disabled tabs are skipped by keyboard navigation