Layout@knitui/components

Paper

Paper is a generic content surface built on Box. shadow (xs→xl) adds elevation, radius rounds the corners, and withBorder draws an outline. No border or shadow is shown by default.

WebiOSAndroid0 own props7 examples

Stories Source Tests Open in Storybook

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

Playground

Loading playground…

shadowElevation level — maps to a box-shadow scale (xs→xl).

radiusCorner rounding — maps to the border-radius token scale.

withBorderWhen true, renders a 1 px border using the $borderColor token.

false

Playground

<Paper
  radius="md"
  withBorder={false}
  padding="$lg"
  width={280}
>
  <Text>Paper surface</Text>
</Paper>

Examples

Shadows

All five shadow levels side by side to compare elevation.

Loading example…

ShadowsSource Storybook

Radii

All five radius values side by side, from sharp to fully rounded.

Loading example…

RadiiSource Storybook

With Border

Border variant — a 1 px outline using the active theme's $borderColor token.

Loading example…

With BorderSource Storybook

Shadow And Border

Shadow and border combined — useful for cards that need both depth and definition.

Loading example…

Shadow And BorderSource Storybook

Card Layout

Paper used as a card layout with a title and body text.

Loading example…

Card LayoutSource Storybook

Nested

Nesting two Paper surfaces to create a layered depth effect.

Loading example…

NestedSource Storybook

Props

Prop	Type	Default	Description
`disabled` system	`boolean \| undefined`	—
`radius` system	`string \| number \| undefined` xs · sm · md · lg · xl	`md`	Corner rounding — maps to the border-radius token scale.
`shadow` system	`"xs" \| "sm" \| "md" \| "lg" \| "xl" \| "xxs" \| "xxl" \| undefined` unset · xs · sm · md · lg · xl	—	Elevation level — maps to a box-shadow scale (xs→xl).
`theme` system	`ThemeName \| null \| undefined`	—	Applies a theme to this element

Accessibility & DOM props (2)

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

Plus 499 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.