@zephora/primitives

Headless, accessible behavior primitives for Zephora UI (Web). The unstyled logic layer the styled components are built on — usable on its own to build your own accessible components.

Install

npm install @zephora/primitives

Requires React ≥ 18.

What's inside

• useControllableState — controlled/uncontrolled state in one hook
• useDisclosure — open/close state for overlays
• Portal — synchronous portal (measures before paint)
• FocusTrap / useRovingFocus — focus management
• useDismiss — outside-press / Escape dismissal for layers
• usePosition — anchored positioning with flip, shift and arrow coords
• usePresence — mount/unmount with exit animations (reduced-motion aware)
• VisuallyHidden — accessible visually-hidden content

Example

import { useDisclosure, Portal, useDismiss } from "@zephora/primitives";

function Popover() {
  const { isOpen, toggle, close } = useDisclosure();
  const ref = React.useRef<HTMLDivElement>(null);
  useDismiss({ enabled: isOpen, refs: [ref], onDismiss: close });

  return (
    <>
      <button onClick={toggle}>Toggle</button>
      {isOpen && (
        <Portal>
          <div ref={ref} role="dialog">…</div>
        </Portal>
      )}
    </>
  );
}

Documentation

zephoraui.com

License

MIT