Skip to content

Notch - Svelte

Installation

npm install @fluix-ui/svelte @fluix-ui/css

Basic Usage

<script>
  import { Notch } from "@fluix-ui/svelte";
  import "@fluix-ui/css";
</script>

<Notch trigger="click" position="top-center" theme="dark">
  {#snippet pill()}
    <span>+</span>
  {/snippet}

  {#snippet content()}
    <div>Quick actions</div>
  {/snippet}
</Notch>

Props

Prop	Type	Default	Description
`trigger`	`NotchTrigger`	`"click"`	Open behavior
`position`	`NotchPosition`	`"top-center"`	Screen anchor
`spring`	`SpringConfig`	core default	Physics config
`dotSize`	`number`	`36`	Collapsed pill size in px
`roundness`	`number`	core default	Corner smoothing
`theme`	`NotchTheme`	`"dark"`	Visual theme
`fill`	`string`	theme variable	Background fill color
`open`	`boolean`	uncontrolled	Controlled open state
`onOpenChange`	`(open: boolean) => void`	-	Open/close callback
`pill`	`Snippet`	required	Collapsed content
`content`	`Snippet`	required	Expanded content

See Also

Notch Overview - Cross-framework overview
Theming - Theme variables and custom themes
Architecture - Shared core and adapters