Notch - Vanilla JS

Other frameworks

Also available for React, Vue, Svelte, and Angular.

Installation

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

Basic Usage

import { createNotch } from "@fluix-ui/vanilla";
import "@fluix-ui/css";

const host = document.getElementById("notch-host");

if (host) {
  const notch = createNotch(host, {
    trigger: "click",
    position: "top-center",
    theme: "dark",
    pill: "+",
    content: "Quick actions",
  });

  // optional imperative controls
  notch.open();
  notch.close();
  notch.toggle();
}

Notch Options

Option	Type	Description
trigger	NotchTrigger	Open behavior
position	NotchPosition	Screen anchor
spring	SpringConfig	Physics config
dotSize	number	Collapsed pill size
roundness	number	Corner smoothing
theme	NotchTheme	Visual theme
fill	string	Background fill color
open	boolean	Controlled open state
onOpenChange	(open: boolean) => void	Open/close callback
pill	HTMLElement | string	Collapsed content
content	HTMLElement | string	Expanded content

Notch Instance API

• open()
• close()
• toggle()
• update(partialOptions)
• destroy()

See Also

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