VVibeFlui

Surfaces

VibeFlui exports portal surfaces and a confirmation dialog:

  • FluiKitModal
  • FluiKitDrawer
  • FluiKitConfirmDialog

These components are used by FluiKit, FluiKitAction, and FluiKitFeedback, and they are also available as public exports.

FluiKitModal

TS
type FluiKitModalProps = {
  open: boolean;
  title?: string;
  titleIcon?: string;
  children: ReactNode;
  className?: string;
  hideHeader?: boolean;
  onClose?: () => void;
};

The modal returns null when open is false or when document is unavailable. When open in the browser, it portals to document.body.

TSX
<FluiKitModal open={open} title="Edit user" onClose={() => setOpen(false)}>
  <FluiKitForm schema={schema} mode="edit" row={row} />
</FluiKitModal>

FluiKitDrawer

TS
type FluiKitDrawerProps = {
  open: boolean;
  title?: string;
  children: ReactNode;
  className?: string;
  side?: "right" | "left";
  onClose?: () => void;
};

side defaults to right. The drawer returns null when closed or when document is unavailable.

FluiKitConfirmDialog

TS
type FluiKitConfirmDialogProps = {
  open: boolean;
  title?: string;
  description?: string;
  icon?: string;
  confirmLabel?: string;
  cancelLabel?: string;
  tone?: "default" | "danger";
  className?: string;
  confirmClassName?: string;
  cancelClassName?: string;
  onConfirm?: () => void;
  onCancel?: () => void;
};

tone defaults to default.

danger changes the default icon and confirm button tone.