Presence / Transition

Mount/unmount with an enter and exit animation (Motion AnimatePresence + Marble UI presets).

Import

import { Presence } from '@marbleui/ui'

Props

<Presence>

Prop	Type	Default	Description
children *required	`ReactNode`	`—`
show *required	`boolean`	`—`
animation	`'fade' \| 'scaleIn' \| 'slideUp' \| 'slideDown'`	`'scaleIn'`	Which enter/exit preset to use.
className	`string`	`—`

Usage notes

Mounts and unmounts content with an enter and exit animation. Don’t use it for overlays: Dialog and Popover manage their own mounting.

<Presence show={open} animation="slideUp">
  <div className="rounded-xl border p-4">Hello</div>
</Presence>

Fully controlled by show. Content stays mounted until the exit animation finishes.
animation is a key of the variants preset object from @marbleui/motion; it defaults to scaleIn. Presets are fade, scaleIn, slideUp and slideDown.
Children are wrapped in a motion.div that takes className. It does not manage focus, so move focus yourself if the content contains controls.

Example source · show

import { useState } from 'react'
import { Button } from '../button'
import { Presence } from './presence'

const Demo = ({ animation }: { animation: 'fade' | 'scaleIn' | 'slideUp' }) => {
  const [show, setShow] = useState(true)
  return (
    <div className="flex h-40 flex-col items-center gap-4">
      <Button variant="outline" onPress={() => setShow(!show)}>{show ? 'Hide' : 'Show'}</Button>
      <Presence show={show} animation={animation}>
        <div className="rounded-xl border border-border bg-surface px-6 py-4 text-sm text-fg shadow-md">Hello 👋</div>
      </Presence>
    </div>
  )
}

export const styles = { 'Scale in': () => <Demo animation="scaleIn" />, 'Slide up': () => <Demo animation="slideUp" />, Fade: () => <Demo animation="fade" /> }

Source: packages/ui/src/presence/presence.tsx

Catalog