Swap
A component that swaps between two states with click or hover activation modes.
Installation
pnpm dlx shadcn@latest add @diceui/swapLayout
Import the parts, and compose them together.
import { Swap, SwapOn, SwapOff } from "@/components/ui/swap";
return (
<Swap>
<SwapOn />
<SwapOff />
</Swap>
)Examples
Animations
The swap component supports 4 different animation types: fade, rotate, flip, and scale.
API Reference
Swap
The main container component for swap functionality.
Prop
Type
| Data Attribute | Value |
|---|---|
[data-state] | "on" | "off" |
[data-animation] | "fade" | "rotate" | "flip" | "scale" |
[data-disabled] | Present when the swap is disabled |
SwapOn
The content shown when the swap is in the swapped state.
Prop
Type
| Data Attribute | Value |
|---|---|
[data-state] | "on" | "off" |
SwapOff
The content shown when the swap is in the default state.
Prop
Type
| Data Attribute | Value |
|---|---|
[data-state] | "on" | "off" |
Accessibility
Keyboard Interactions
| Key | Description |
|---|---|
| Enter | Toggles the swap state when activation mode is 'click'. |
| Space | Toggles the swap state when activation mode is 'click'. |