Layout@knitui/components

Affix

Affix pins its children to a fixed position on the viewport (or nearest filling ancestor on React Native). Pass a position object with top, right, bottom, and/or left offsets — $-space tokens ('$md') or raw numbers are accepted. By default the layer renders through a Portal so it escapes overflow:hidden / transformed ancestors.

WebiOSAndroid3 own props8 examples

Stories Source Tests Open in Storybook

import { Affix } from "@knitui/components";

Playground

Loading playground…

zIndexStack order of the fixed layer.

withinPortalWhen true the layer is rendered through a Portal so it escapes transformed / overflow:hidden ancestors.

false

shadowElevation — drop shadow from the shared ladder.

Playground

<Affix
  withinPortal={false}
  zIndex={200}
  position={{ bottom: 0, right: 0 }}
>
  <Box
    backgroundColor="$color8"
    paddingHorizontal="$md"
    paddingVertical="$sm"
    borderRadius="$md"
  >
    <Text color="white">Pinned content</Text>
  </Box>
</Affix>

Examples

Bottom Right

Default placement — bottom-right corner of the viewport.

Loading example…

Bottom RightSource Storybook

Top Left

Top-left placement using spacing tokens as offsets.

Loading example…

Top LeftSource Storybook

Token Offsets

Offsets expressed as Tamagui space tokens instead of raw numbers.

Loading example…

Token OffsetsSource Storybook

Without Portal

Rendered in-place (withinPortal={false}) — does not escape overflow:hidden ancestors.

Loading example…

Without PortalSource Storybook

Scroll To Top

A realistic scroll-to-top button pattern pinned to the bottom-right.

Loading example…

Scroll To TopSource Storybook

Shadows

All five shadow levels stacked in a contained frame to compare elevation.

Loading example…

ShadowsSource Storybook

All Corners

All four corners shown simultaneously using four independent Affix layers.

Loading example…

All CornersSource Storybook

Props

Prop	Type	Default	Description
`disabled` system	`boolean \| undefined`	—
`position`	`AffixPosition \| undefined`	`{ bottom: 0, right: 0 }`	Edge offsets — top, right, bottom, left. Accepts `$`-space tokens ('$md') or raw numbers.
`shadow` system	`"xs" \| "sm" \| "md" \| "lg" \| "xl" \| "xxs" \| "xxl" \| undefined` unset · xs · sm · md · lg · xl	—	Elevation — drop shadow from the shared ladder.
`theme` system	`ThemeName \| null \| undefined`	—	Applies a theme to this element
`withinPortal`	`boolean \| undefined`	`true`	When true the layer is rendered through a Portal so it escapes transformed / overflow:hidden ancestors.
`zIndex`	`number \| undefined`	`200`	Stack order of the fixed layer.

Accessibility & DOM props (2)

Prop	Type
`key`	`Key \| null \| undefined`
`ref`	`Ref<TamaguiElement> \| undefined`

Plus 496 inherited style props from Box — the full Tamagui/React Native style surface, including token shorthands like p, mx, bg and c. See Tokens for the scales they accept, or the full list.