easeul

Base UITransitions

Preview card

The Base UI equivalent of a hover card.

Only in Base UI

Base UI documentation1.5.0

Every value the manifest allows on this host, single presets and the pairs that compose. The first is what this component ships with. Both stages are the same component, so anything that changes between them is the attribute.

withoutno attribute
Hover me
with easefuldata-motion="scale-fade"
Hover me
host writes

data-ending-style, data-side

easeful matches

[data-motion~="scale-fade"][data-ending-style]

what runs

transition: opacity, scale 150ms

you write

<PreviewCard.Popup data-motion="scale-fade" />

Where the attribute goes

The parts this demo composes, and the value each one carries. Everything inside an animated part is that part's content, so the tree stops there.

  1. PreviewCard.Root
  2. PreviewCard.Trigger
  3. PreviewCard.Portal
  4. PreviewCard.Positioner
  5. PreviewCard.Popupdata-motion="scale-fade"

Source

apps/docs/components/demos/base-ui/preview-card.tsx
20 lines
"use client"

import { PreviewCard } from "@base-ui/react/preview-card"
import type { DemoProps } from "@/components/demos/props"

export function BaseUiPreviewCard({ motion }: DemoProps) {
  return (
    <PreviewCard.Root>
      <PreviewCard.Trigger className="btn">Hover me</PreviewCard.Trigger>
      <PreviewCard.Portal>
        <PreviewCard.Positioner sideOffset={10} collisionPadding={16}>
          <PreviewCard.Popup className="panel" data-motion={motion}>
            <p className="panel__title">Preview card</p>
            <p className="panel__body">The Base UI equivalent of a hover card.</p>
          </PreviewCard.Popup>
        </PreviewCard.Positioner>
      </PreviewCard.Portal>
    </PreviewCard.Root>
  )
}
The whole file, read from disk at build time. Both copies above render from it, and the motion prop is the only difference between them.