STYLES

Transforms

Rotate, scale, and translate any styled view component with one portable Dowe contract.

COMPOSITION

Chips with personality

Transforms change the rendered geometry without disturbing the Flex layout around each chip.

dowe
Flex direction:"column" align:"center" gap:3
  Chip variant:"solid" scheme:"warning" size:"sm" rotate:-7
    "Mobile Apps"
  Chip variant:"soft" scheme:"muted" size:"sm" rotate:4
    "Web Sites"
  Chip variant:"solid" scheme:"success" size:"sm" rotate:-4
    "Software"
  Chip variant:"solid" scheme:"muted" size:"sm" rotate:8
    "UI/UX Design"
Mobile AppsWeb SitesSoftwareUI/UX Design

Responsive transform values

rotate, scale, translateX, and translateY accept breakpoint objects and retain their last resolved value.

dowe
Chip rotate:{ xs:-3 md:-8 } scale:{ xs:1 md:1.1 } translateX:{ xs:0 md:2 }
  "Responsive"

API

Values, defaults, and responsive support

Responsive objects accept xs, sm, md, lg, and xl. Each value remains active until a later breakpoint overrides it.

Prop
Accepted values
Default
Responsive

No data

There are no records to display

Translation uses the Dowe scale: 1 equals 0.25rem on web, 4dp on Android, and 4pt on iOS. Half-step values such as -1.5 and 0.5 are valid; quarter steps are rejected.

COMPATIBILITY

Every shared styled surface

The table groups the component roots that accept rotate, scale, translateX, and translateY.

Group
Compatible components

No data

There are no records to display

Context entries are excluded: Option, fabAction, comboOption, csvColumn, dragGroup, dragItem, tab, step, region entries, Svg, and Path do not accept motion props. Wrap them in a styled Box when the composition needs a transform.