āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā ā š shadcn/directory/sadmann7/diceui/utilities/presence ā āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā
āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā
ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā
npx shadcn@latest add "https://diceui.com/r/presence"
<ComponentSource src="./registry/default/components/presence.tsx" />
import { Presence } from "@/components/presence"
export default function App() {
const [open, setOpen] = React.useState(false)
return (
<Presence present={open}>
<div
data-state={open ? "open" : "closed"}
className="data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:animate-out data-[state=open]:animate-in"
>
This content will animate in and out
</div>
</Presence>
)
}
Access presence state through a render function:
import { Presence } from "@/components/presence"
export default function App() {
const [isOpen, setIsOpen] = React.useState(false)
return (
<Presence present={isOpen}>
{({ present }) => (
<div className={present ? "animate-in fade-in-0" : "animate-out fade-out-0"}>
This content will animate based on presence state
</div>
)}
</Presence>
)
}
Use forceMount to keep elements mounted regardless of presence state. Useful for accessibility requirements and focus management:
import { Presence } from "@/components/presence"
export default function App() {
const [isOpen, setIsOpen] = React.useState(false)
return (
<Presence present={isOpen} forceMount>
<div
className={cn(
"transition-opacity duration-200",
isOpen ? "opacity-100" : "opacity-0"
)}
>
This content will always be mounted but will fade in/out
</div>
</Presence>
)
}
A component that manages the presence state of elements with support for animations. It handles mounting, unmounting, and animation states automatically.
<AutoTypeTable path="./types/docs/utilities.ts" name="PresenceProps" />
ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā
āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā