Sections

Utilities

Swap

Animate between two visual states with smooth transitions.

Installation


pnpm dlx shadcn@latest add https://shark.vini.one/r/swap.json.json

Usage


import { 
  Swap, 
  SwapIndicator
} from "@/registry/react/components/swap";


<Swap>
  <SwapIndicator type="on">
    <MoonIcon />
  </SwapIndicator>
  <SwapIndicator type="off">
    <SunIcon />
  </SwapIndicator>
</Swap>

Examples

Fade

Flip

Rotate

Scale

Blur

API Reference

Swap

Prop	Type	Default
`variant`	`"fade" \| "scale" \| "flip" \| "rotate" \| "blur"`	`"fade"`
`swap`	`boolean`	`-`
`lazyMount`	`boolean`	`true`
`unmountOnExit`	`boolean`	`true`
`className`	`string`	`-`
`asChild`	`boolean`	`-`

SwapIndicator

Prop	Type	Default
`type`	`'on' \| 'off'`	required
`className`	`string`	`-`
`asChild`	`boolean`	`-`

For a complete list of props, see the Ark UI documentation.

On This Page

Installation Usage Examples Fade Flip Rotate Scale Blur API Reference Swap SwapIndicator