macOS

Notch

Frosted-material section header with leading / trailing slots. macOS-native by default — wrap in position:sticky for stick-on-scroll behavior.

Examples

Header bar

Library

3,204 books · 47 authors

Live

Body content sits below the notch.

<Notch title="Library" subtitle="3,204 books · 47 authors">
  {#snippet leading()}<Lamp state="running" />{/snippet}
  {#snippet trailing()}<Badge variant="accent">Live</Badge>{/snippet}
</Notch>

Props

Prop	Type	Default	Description
`title`	`string`	`—`	Bold title text.
`subtitle`	`string`	`—`	Smaller subtitle below the title.
`leading`	`Snippet`	`—`	Left-side slot — typically an icon or Lamp.
`trailing`	`Snippet`	`—`	Right-side slot — actions, badges, etc.

Install

CLI

npx @a3tai/mittsu add notch