Skip to content
Fluix

Notch - Overview

The Notch component is available since Fluix 0.0.6 and provides an interactive floating island/pill pattern with spring-based motion.

Install

Section titled “Install”
Terminal window
npm install @fluix-ui/react @fluix-ui/css

Use your adapter package (@fluix-ui/vue, @fluix-ui/svelte, @fluix-ui/angular, or @fluix-ui/vanilla) the same way as Toast.

React

Section titled “React”
import { Notch } from "@fluix-ui/react";
import "@fluix-ui/css";


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

Other Adapters

Section titled “Other Adapters”
  • Vue: import { Notch } from "@fluix-ui/vue"
  • Svelte: import { Notch } from "@fluix-ui/svelte"
  • Angular: use FluixNotchComponent with <fluix-notch />
  • Vanilla JS: use createNotch(container, options) from @fluix-ui/vanilla

Framework Guides

Section titled “Framework Guides”

Shared Options

Section titled “Shared Options”

Notch supports shared options across adapters such as trigger, position, spring, dotSize, roundness, theme, fill, open, and onOpenChange.

Section titled “Related”