shadcn.io is not affiliated with official shadcn/ui

Components

Free

Swap for Svelte

Animate between two visual states with smooth transitions.

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

<script lang="ts">
import { MoonIcon, SunIcon } from "lucide-svelte";
import React from "react";
import { Button } from "@/components/ui/button";
import { Swap, SwapIndicator } from "@/components/ui/swap";
</script>

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?Snippet<[PropsFn]>

Render your own element: a snippet that gets the part's props to spread on it.

Type: Snippet<[PropsFn]>

class?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?Snippet<[PropsFn]>

Render your own element: a snippet that gets the part's props to spread on it.

Type: Snippet<[PropsFn]>

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