shadcn.io is not affiliated with official shadcn/ui

Components

Free

Swap for React Aria

Animate between two visual states with smooth transitions.

React Aria does not include this primitive, so this page uses the Ark UI component. The visuals match the Ark UI version.

PreviewCode

Installation

Free with an account. It carries your token, so the CLI installs everything in one go.

Google GitHub

Use email insteadNo credit card

Usage

import { MoonIcon, SunIcon } from "lucide-react";
import React from "react";
import { Button } from "@/components/ui/button";
import { Swap, SwapIndicator } from "@/components/ui/swap";

const SwapDemo = () => {
  const [swap, setSwap] = React.useState(false);

  return (
    <Button onClick={() => setSwap(!swap)} size="icon-lg" variant="outline">
      <Swap swap={swap} variant="fade">
        <SwapIndicator type="on">
          <MoonIcon />
        </SwapIndicator>
        <SwapIndicator type="off">
          <SunIcon />
        </SwapIndicator>
      </Swap>
    </Button>
  );
};

Accessibility

Enter: Activate the focused control.
Space: Activate the focused control.

Demos

Blur

PreviewCode

Flip

PreviewCode

Rotate

PreviewCode

Scale

PreviewCode

API Reference

Swap

<span> data-slot="swap"

PropType

hideMode?"display-none" | "activity"

How to hide content when mounted but not present. - display-none: HTML hidden attribute. Effects stay alive. - activity: React 19 <Activity mode="hidden">. Effects pause. Requires React 19+.

Type: "display-none" | "activity"
Default: "display-none"

lazyMount?boolean

Whether to enable lazy mounting. Ark default: false.

Default: true

swap?boolean

Whether the swap is in the "on" state.

Default: false

unmountOnExit?boolean

Whether to unmount on exit. Ark default: false.

Default: true

variant?"blur" | "fade" | "flip" | "rotate" | "scale"

The visual style.

Type: "blur" | "fade" | "flip" | "rotate" | "scale"
Default: "fade"

asChild?boolean

Use the provided child element as the default rendered element, combining their props and behavior.

className?string

Merged with the part's classes.

SwapIndicator

<span> data-slot="swap-indicator"

PropType

type"on" | "off"

Which state it's for: on shows while on, off while off.

Type: "on" | "off"

asChild?boolean

Use the provided child element as the default rendered element, combining their props and behavior.

useSwap

PropType

hideMode?"display-none" | "activity"

How to hide content when mounted but not present. - display-none: HTML hidden attribute. Effects stay alive. - activity: React 19 <Activity mode="hidden">. Effects pause. Requires React 19+.

Type: "display-none" | "activity"
Default: "display-none"

lazyMount?boolean

Whether to enable lazy mounting.

Default: false

swap?boolean

Whether the swap is in the "on" state.

Default: false

unmountOnExit?boolean

Whether to unmount on exit.

Default: false