Morph Icon
Transforms one vector icon smoothly into another with fluid shape morphing animations when state changes.
2.2 KB
•Updated on August 26, 2026
Installation
Bash
pnpm dlx shadcn@latest add @spaceui/components-spaceui-morph-iconUsage
Code
import { MorphIcon } from '@/components/spaceui/morph-icon'
import { IconSun, IconMoon } from '@tabler/icons-react'Code
<Button onClick={toggleTheme} size="icon" variant="ghost">
<MorphIcon activeKey={isDark ? 'dark' : 'light'} variant="blur-scale">
{isDark ? <IconMoon className="size-5" /> : <IconSun className="size-5" />}
</MorphIcon>
</Button>API Reference
MorphIcon Props
| Prop | Type | Default | Description |
|---|---|---|---|
activeKey | React.Key | Required | Unique key identifying current active icon/state to trigger transitions |
children | React.ReactNode | Required | The icon element to render |
variant | blur-scale|rotate-scale|flip|spring | blur-scale | Motion transition preset style |
duration | number | 0.22 | Transition duration in seconds |
className | string | - | Additional classes applied to the motion wrapper |
Theme Switcher Transition
Smooth morphing between sun, moon, and system desktop icons.
Action & Status Toggles
Common UI action buttons (like/heart, volume/mute, play/pause, upvote) with instant morphing transitions.
Animation Presets
Side-by-side comparison of all 4 motion presets: blur-scale, rotate-scale, flip, and spring.
Multi-State Status Indicator
Morphing through multi-stage state transitions (pending, loading, success, error).
Accordion & Visibility Toggles
Password reveal and accordion expand/collapse transitions using MorphIcon.
Examples
Theme switcher transition
Action and status toggles
Animation presets showcase
Multi-state status indicator
Accordion and visibility toggles
Keep in mind
- MIT License: Free and open-source for personal and commercial use. Feel free to copy, tweak, and adapt the components to match your exact needs.
- Credits & Inspiration: Some components on this site are inspired by or recreated from great ideas across the web. I'm not here to take credit; just to learn, experiment, and push interface craft further.
- Reach out & Claims: If an attribution was missed, or if you have any inquiry or claim, feel free to reach out directly on X to @adrielzimbril. I'll be glad to update or resolve it right away.