Flag
Auto-dismissable floating notification with progress bar and useFlagGroup hook.
Preview
Interactive examples use the same @flux/ui build as production. Toggle theme in the header for light and dark. Motion tokens and layout patterns live under Motion and Patterns in the sidebar.
Live preview
Info notification
This flag auto-dismisses after 8 seconds.
Success notification
This flag auto-dismisses after 8 seconds.
Warning notification
This flag auto-dismisses after 8 seconds.
Error notification
This flag auto-dismisses after 8 seconds.
Installation
Add the package to your app (full Next.js + Tailwind steps on Installation):
npm install @payglocal_ui/flux-uiUsage
Import
import { Flag, useFlagGroup } from "@payglocal_ui/flux-ui";Example
const { addFlag } = useFlagGroup();
addFlag({ title: "Payment successful", appearance: "success" });