createStyledContext()

createStyledContext() passes variant props through every styled component in a compound component tree.

Compound component APIs let related elements coordinate their props:

export default () => (
  <Button size="lg">
    <Button.Text>Lorem ipsum</Button.Text>
  </Button>
)
Copy

Setting size="lg" on the outer Button frame should pass down to the Text so the frame and text sizes stay aligned, without requiring explicit size props on every child component.

createStyledContext() provides this coordination for styled components, sharing variant props through React context.

You can set it up as follows:

import {
  View,
  Text,
  createStyledContext,
  styled,
  withStaticProperties,
} from '@tamagui/core'

export const ButtonContext = createStyledContext<{
  size?: 'sm' | 'md' | 'lg'
}>({
  size: 'md',
})

export const ButtonFrame = styled(View, {
  displayName: 'Button',
  context: ButtonContext,

  variants: {
    size: {
      sm: { paddingInline: '3', paddingBlock: '1.5' },
      md: { paddingInline: '4', paddingBlock: '2' },
      lg: { paddingInline: '6', paddingBlock: '2' },
    },
  } as const,

  defaultVariants: {
    size: 'md',
  },
})

export const ButtonText = styled(Text, {
  displayName: 'ButtonText',
  context: ButtonContext,

  variants: {
    size: {
      sm: { fontSize: 'sm' },
      md: { fontSize: 'sm' },
      lg: { fontSize: 'base' },
    },
  } as const,
})

export const Button = withStaticProperties(ButtonFrame, {
  Props: ButtonContext.Provider,
  Text: ButtonText,
})
Copy

A few things to note here:

• ButtonContext should only be typed and given properties that work across both components. Since both define a size variant, this works, even though the frame and text read different token scales.
• You can use <Button.Props size="lg"><Button /></Button.Props> now to set default props for a Button from above.
• The context pattern currently skips compiler flattening. Avoid using it on low-level primitives like generic Stacks or Text. For higher-level controls like Button, it works well: the compiler still extracts CSS and optimizes render logic.