Overlay presets

Use a preset on any Base UI part that mounts and unmounts: popups, backdrops, sheets, toasts and collapsible panels. Base UI marks the start and end of each transition with data-starting-style and data-ending-style, and the preset animates between them. Each preset is a CSS transition, not a keyframe animation, so reopening an overlay mid-close continues from where it is. For motion Base UI doesn't mount, use a block instead: Sliding Indicator for selection indicators and Collapse for disclosure outside Base UI.

#Installation

With the package, the presets ship inside its stylesheet, so there's nothing to add:

@import '@youj/react/styles.css';

With source copied in, they're their own item, youj-presets, and there's usually nothing to add either. Every UI item that animates with a preset depends on it, and the CLI writes the utilities straight into your app's stylesheet. To use the presets on overlays of your own before you've added one of those items, add the item directly:

#Usage

Put the preset on the part that appears, and spread useYoujScope() on its portal:

This example uses Base UI's primitives directly, so install @base-ui/react in your app (pnpm add @base-ui/react), as pnpm won't resolve it through Youj.

import { Popover } from '@base-ui/react/popover'
import { useYoujScope } from '@youj/core'

export function SharePopover() {
  const scope = useYoujScope()
  return (
    <Popover.Root>
      <Popover.Trigger>Share</Popover.Trigger>
      <Popover.Portal {...scope}>
        <Popover.Positioner sideOffset={6}>
          <Popover.Popup className="yj-pop rounded-lg border bg-overlay p-4 shadow-md">…</Popover.Popup>
        </Popover.Positioner>
      </Popover.Portal>
    </Popover.Root>
  )
}

Every @youj/react overlay already does both. The preview above is those components, one preset each. Open them at ¼ speed to see each one move.

#Why every portal needs the scope

YoujProvider sets the Speed and reduced-motion settings as CSS custom properties on its wrapper element. A portal renders into <body>, outside that wrapper, so without the scope an overlay ignores Speed and a provider's reducedMotion="always". useYoujScope() returns the same properties for the portal element. Call it inside the component that renders the portal, so it reads the nearest provider.

#Examples

const side = { top: 'yj-sheet-top inset-x-0 top-0', right: 'yj-sheet-right inset-y-0 right-0', bottom: 'yj-sheet-bottom inset-x-0 bottom-0', left: 'yj-sheet-left inset-y-0 left-0' }

<ChevronDownIcon className="transition-transform yj-duration-base ease-standard data-panel-open:rotate-180" />

#Reference