build69
Sign inGet API key
build69  /  Components  /  Motion — Transitions & Decorative  /  Grow

Grow

v1.0.1Updated 21 Jul 2026

Fades its child in while scaling it from 0.95 to 1 — a subtle, restrained entrance that reads as 'appearing in place' rather than flying in. A `transformOrigin` prop anchors the scale, so a popover can grow out of the corner nearest its trigger. Gentler than Zoom, which scales all the way from 0.

View source← Back to catalog

Preview

Live · 3 stories
Grow DemoOpen ↗
▸Why this is recommendedgrowtransitionanimationscale+4

Grow — demo.

Recommended for+14
  • ✓Growing a menu or popover out of its trigger corner
  • ✓Revealing a tooltip or hover card in place
  • ✓Showing a dropdown panel under a toolbar button
  • ✓Subtly introducing a card without moving it
Tags+6
growtransitionanimationscalemotionmuipopoverdemo
Features+4
  • Combined opacity fade + gentle scale (0.95 -> 1)
  • transformOrigin anchors the scale to any edge or corner
  • Configurable duration / delay / easing per instance
  • unmountOnExit removes the child from the DOM after exit
  • Respects prefers-reduced-motion (snaps, no animation)
  • data-state attribute for debugging
Not recommended for−2
  • ✕Attention-grabbing entrances (use Zoom)
  • ✕Directional entrances from off-screen (use Slide)
  • ✕Page-level route transitions

Install

Ask your agent, or call the MCP tool directly. The resolved bundle is written into your project.

get_registry_item({ name: "Grow" })

Usage

import { Grow } from '@/components/motion/transitions/grow';

<Grow in={open} transformOrigin="top left" duration={250}>
  <PopoverPanel>Menu</PopoverPanel>
</Grow>

Tick variants in the left menu — each adds a tab with that variant’s real story source, the same code the preview above renders.

Props

PropTypeRequired
in

Whether the child is shown; drives the transition

booleanyes
transformOrigin

CSS transform-origin for the scale. Default 'center center'

string—
duration

Duration in ms. Default 200

number—
delay

Delay in ms before the transition starts. Default 0

number—
easing

Timing function. Default 'ease-out'

'ease' | 'ease-out' | 'ease-in' | 'linear'—
unmountOnExit

Remove the child from the DOM after exit. Default false

boolean—
className

Extra classes merged onto the wrapper element

string—
style

Extra inline styles; transition-driven properties take precedence

React.CSSProperties—
ref

Ref to the wrapper element (React 19 ref-as-prop)

React.Ref<HTMLDivElement>—
children

Content to grow

React.ReactNodeyes

Related

Platform docsAll componentsSource files