SharedElementTransition

List-to-detail shared-element transition with reversible state, accessible controls, and reduced-motion handling.

InterfaceSource ready2 props documentedLive preview
Add with shadcnnpx shadcn@latest add https://www.uigrids.com/r/shared-element-transition.json
Interactive preview
Interface

Install with the CLI

# adds SharedElementTransition to components/ui with the shadcn CLI
npx shadcn@latest add https://www.uigrids.com/r/shared-element-transition.json

Or install the package

// npm install @uigrids/react-ui
import { SharedElementTransition } from '@uigrids/react-ui'

export default function App() {
  return <SharedElementTransition />
}

Props

PropTypeDefaultDescription
itemsunknownDEFAULT_ITEMSConfigures the items option.
classNamestring''Additional CSS classes for the outer element.