Component
Swap
Swaps between two elements in place with a fade, rotate, flip, or scale transition. Presentational — pair with the control that owns the state.
Install
Run the CLI to copy the source into your project.
pnpm dlx @stalk-ui/cli add @stalk-ui/swapExamples
Live previews render through the docs app's PandaCSS codegen.
<SwapDemo />
Props
Public component props extracted from the source TypeScript types.
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
| `swap` | `boolean` | Yes | - | Show the \`on\` content; \`false\` shows \`off\`. |
| `on` | `ReactNode` | Yes | - | - |
| `off` | `ReactNode` | Yes | - | - |
| `effect` | `SwapEffect` | No | - | Transition between the two: crossfade (default), rotate, flip, or scale. |
Variants
Variant axes exposed by the underlying PandaCSS recipe or slot recipe.
| Variant | Values |
|---|---|
| `effect` | `fade`, `rotate`, `scale`, `flip` |
Registry
Files this component contributes to your registry install.
- Manifest: `/r/swap.json`
- Recipe: `swap`
- Files: `src/components/ui/swap.tsx`