Masking

Full-screen blocking overlay. Raw Arco passthrough — use for confirms and inline auth prompts.

Masking is the kit's re-export of @arco-design/mobile-react's Masking — a full-screen blocking overlay that prevents underlying content from receiving taps until dismissed. The kit's Drawer and PopupSwiper use it internally; expose it directly when you need a custom layout (e.g. an inline auth handshake or a confirm dialog) that doesn't fit either surface.

import { useState } from "react"
import { Body1, Flex, Masking, PrimaryButton, Title3 } from "@appboxo/ui-kit"

import { PreviewLayout, Section } from "./_section"

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

  return (
    <PreviewLayout>
      <Section
        title="Masking"
        description="Raw Arco Mobile Masking passthrough — a full-screen blocking overlay used for confirms / inline auth prompts. Pair with body content of your choice."
      >
        <Flex gap={12}>
          <PrimaryButton text="Open mask" onClick={() => setOpen(true)} />
        </Flex>

        <Masking visible={open} maskClass="!bg-[rgba(0,0,0,0.6)]">
          <div
            style={{
              minWidth: 280,
              maxWidth: 320,
              background: "var(--fill-1)",
              borderRadius: 16,
              padding: 20,
            }}
          >
            <Flex gap={12}>
              <Title3 weight="semibold">Confirm purchase</Title3>
              <Body1 color="text-3">
                The mask blocks taps outside the dialog until you close it.
              </Body1>
              <Flex vertical={false} gap={8} justify="end">
                <PrimaryButton text="Close" onClick={() => setOpen(false)} />
              </Flex>
            </Flex>
          </div>
        </Masking>
      </Section>
    </PreviewLayout>
  )
}

When to use vs Drawer / PopupSwiper

Component	Use when
`Drawer`	Sheet content that slides in from an edge with the kit's chrome (drag handle, footer slot, etc.).
`PopupSwiper`	Same as Drawer but with native-feeling swipe-to-dismiss in any of 4 directions.
`Masking`	Anything else that needs to block the page — custom modals, full-screen loaders, transient confirms.

API

Accepts every Arco MaskingProps prop verbatim. See the Arco Mobile React Masking docs for the full API.

import { Masking } from "@appboxo/ui-kit"

Common props: visible, onClose, maskClass, contentClass, direction, mountOnEnter, unmountOnExit.

Installation

pnpm add @appboxo/ui-kit

PopupSwiper Placeholder

On This Page

When to use vs Drawer / PopupSwiper API Installation

Build mini-apps with Boxo

Freedom UI Kit is the design system behind partner mini-apps shipping on the Boxo platform.