Skip to content

Notch - React

Installation

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

Basic Usage

import { Notch } from "@fluix-ui/react";
import "@fluix-ui/css";

export function App() {
  return (
    <Notch
      trigger="click"
      position="top-center"
      theme="dark"
      pill={<span>+</span>}
      content={<div>Quick actions</div>}
    />
  );
}

Props

Prop	Type	Default	Description
`trigger`	`NotchTrigger`	`"click"`	Open behavior (`click` / hover trigger from core)
`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`	`ReactNode`	required	Collapsed content
`content`	`ReactNode`	required	Expanded content

Controlled Example

import { useState } from "react";
import { Notch } from "@fluix-ui/react";

export function ControlledNotch() {
  const [open, setOpen] = useState(false);

  return (
    <Notch
      open={open}
      onOpenChange={setOpen}
      pill={<span>Menu</span>}
      content={<button onClick={() => setOpen(false)}>Close</button>}
    />
  );
}

See Also

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