---
title: Rotate
description: "`Rotate` is a component that provides an animation to switch between two elements while rotating."
links:
  - style: https://github.com/yamada-ui/yamada-ui/tree/main/packages/react/src/components/rotate/rotate.style.ts
  - source: https://github.com/yamada-ui/yamada-ui/tree/main/packages/react/src/components/rotate
  - storybook: https://yamada-ui.github.io/yamada-ui?path=/story/components-rotate--basic
---

```tsx
<Rotate
  from={<AppleIcon fontSize="2xl" />}
  to={<CherryIcon fontSize="2xl" />}
/>
```

## Usage

```tsx
import { Rotate } from "@yamada-ui/react"
```

```tsx
import { Rotate } from "@/components/ui"
```

```tsx
import { Rotate } from "@workspaces/ui"
```

```tsx
<Rotate />
```

### Change Rotate

To change the rotate, set `rotate` to a numerical value. By default, `45` is set.

```tsx
<Rotate
  rotate={-360}
  from={<AppleIcon fontSize="2xl" />}
  to={<CherryIcon fontSize="2xl" />}
/>
```

### Change Duration

To change the duration, set a numerical value (seconds) to `duration`.

```tsx
<Rotate
  duration={1.4}
  from={<AppleIcon fontSize="2xl" />}
  to={<CherryIcon fontSize="2xl" />}
/>
```

### Delay

If you want to delay the switch, set a numerical value (seconds) to `delay`.

```tsx
<Rotate
  delay={1}
  from={<AppleIcon fontSize="2xl" />}
  to={<CherryIcon fontSize="2xl" />}
/>
```

### Disable

To disable, set `disabled` to `true`.

```tsx
<Rotate
  disabled
  from={<AppleIcon fontSize="2xl" />}
  to={<CherryIcon fontSize="2xl" />}
/>
```

### Read-Only

To ready-Only, set `readOnly` to `true`.

```tsx
<Rotate
  readOnly
  from={<AppleIcon fontSize="2xl" />}
  to={<CherryIcon fontSize="2xl" />}
/>
```

### Control

```tsx
const [value, onChange] = useState<KeyframeIdent>("from")

return (
  <Rotate
    from={<AppleIcon fontSize="2xl" />}
    to={<CherryIcon fontSize="2xl" />}
    value={value}
    onChange={onChange}
  />
)
```

## Props

| Prop           | Default  | Type                                                                                                                      | Description                                                                  |
| -------------- | -------- | ------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------- |
| `as`           | -        | `keyof IntrinsicElements`                                                                                                 | The HTML element to render.                                                  |
| `asChild`      | -        | `boolean`                                                                                                                 | Merges its props onto its immediate child.                                   |
| `css`          | -        | `CSSObject \| CSSObject[]`                                                                                                | The CSS object.                                                              |
| `colorScheme`  | -        | `"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` | Set color scheme variables.                                                  |
| `defaultValue` | `"from"` | `KeyframeIdent`                                                                                                           | You can set the initial state.                                               |
| `delay`        | `0`      | `number`                                                                                                                  | 　The animation delay.                                                       |
| `disabled`     | `false`  | `boolean`                                                                                                                 | If `true`, the component is disabled.                                        |
| `duration`     | `0.4`    | `number`                                                                                                                  | The animation duration.                                                      |
| `from`         | -        | `ReactNode`                                                                                                               | Passing React elements to "from" is required.                                |
| `onChange`     | -        | `(value: KeyframeIdent) => void`                                                                                          | This is a callback function that is called when the animation state changes. |
| `readOnly`     | `false`  | `boolean`                                                                                                                 | If `true`, the component is readonly.                                        |
| `rotate`       | `45`     | `number`                                                                                                                  | The animation rotation.                                                      |
| `to`           | -        | `ReactNode`                                                                                                               | Passing React elements to "to" is required.                                  |
| `value`        | -        | `KeyframeIdent`                                                                                                           | Use this when you want to control the animation from outside the component.  |