# SharedElement

> A plain host that carries a stable view-transition identity across separate page loads, so a same-origin, cross-document navigation morphs it from its old position, size, and appearance into its new one instead of replacing it outright.

```ts
import { SharedElement } from "@sdxc/ui";
```

Renders a plain `<div>` host whose `view-transition-name` comes from its
own `id`, so a same-origin, cross-document navigation matching that `id`
on the other side morphs the element instead of replacing it outright.

## Examples

```tsx
// On the listing page
<SharedElement id={`cover-${book.slug}`}>
	<img src={book.coverUrl} alt={book.title} />
</SharedElement>
```

```tsx
// On the book's own page — the matching `id` lets the browser morph
// between the two instead of swapping the image outright.
<SharedElement id={`cover-${book.slug}`}>
	<img src={book.coverUrl} alt={book.title} />
</SharedElement>
```

## Props

Also accepts everything in `TagProps<"div">`.