# slide-up

Fades in while sliding up from slightly below. Menus and content anchored above their trigger.

## Use it

```html
data-motion="slide-up"
```

## What it sets

The preset only declares these. Everything else, duration and easing included, comes from the shared tokens, so overriding a token restyles every preset at once rather than one of them.

```css
[data-motion~="slide-up"] {
  --motion-from-opacity: 0;
  --motion-from-y: var(--motion-distance);
}
```

## Composition

Composes with `fade`, `scale-fade`. Combine them with a space.

```html
data-motion="fade slide-up"
```

## Hosts

The same attribute across every host it supports. You never choose the mechanism, the host's own state attributes do.

| Host | Markup |
| --- | --- |
| radix | `<Dialog.Content data-motion="slide-up" />` |
| base-ui | `<Dialog.Popup data-motion="slide-up" />` |
| native-dialog | `<dialog data-motion="slide-up">` |
| native-popover | `<div popover data-motion="slide-up" />` |
| plain | `<div hidden data-motion="slide-up" />` |