EaseKitDocs
Components · Variants
Documentation

Variants

Sets like size or state, each value stored as differences from the base, optionally with its own box size. Switch them per instance, on the timeline or on hover.

Variants are versions of a component, grouped in sets such as size: small | large or state: unread | read. Each value is stored as its differences from the base, so edits to the base reach every variant. Instances pick a value per set, and switching between values tweens.

Add a variant

  1. Edit the component.
  2. In the stage pill, open the variant menu (Base) and click Add Variant….
  3. Enter a Set (for example size) and a Value (for example large) and click Add. The variant starts as a copy of the base; the pill now reads size: large.
  4. Change what should differ: colors, text, visibility, sizes, values at rest.
  5. Switch back to Base or to another variant in the same menu.
The variant menu in the stage pill

What a variant can change

  • Fill, border and text color.
  • Text and font size.
  • Image, and which component a nested slot shows.
  • Visibility: deleting a child while editing a variant hides it in that variant; adding a child adds it to the base.
  • Scale, width, height and opacity.
  • The component's own box: a large variant can be wider than the base.

Give a variant its own size

A variant can have a box of its own, for example a size: large card that is 360 pt wide while the base is 280 pt. Change the component's box while that variant is open in edit mode, or ask the AI (“make the large variant 360 × 200”). The base keeps its size.

  • Instances showing the variant take its size, and a switch tweens the size along with everything else.
  • Picking the variant in the inspector resizes the instance right away.
  • Over MCP, add_variant takes width and height.

Use variants

  • Select an instance: each variant set has a menu in the inspector's Variants section, with Transition and Switch at playhead below.
  • The library groups variants under their component. Click a variant chip to place an instance showing it.
  • In Interactions, the Set variant action switches an instance's variant, for example on hover.
  • On the timeline, Switch at playhead makes an instance change variant at a moment (see Animated variant switches).
ExportVariants become
ReactA string union per set: state?: "unread" | "read"; switches animate with Motion
SwiftUIAn enum per set; switches animate with withAnimation
HTMLPer-variant CSS with transitions
LottieA precomp per combination in use
CSS, Web Animations, SVGBaked: timeline switches arrive as keyframes