Content

Surface

A coloured, rounded background — plain or glass.

iOSSwiftUI VStack in a GlassEffectContainerAndroidCompose SurfaceRenders in a Screen or an Island
Surface on iOS
iOSSwiftUI VStack in a GlassEffectContainer
Surface on Android
AndroidCompose Surface

Import

ts
import {Surface} from '@hzblj/kara-ui'

Props

A container padded s16 and rounded large unless told otherwise — a SwiftUI VStack on iOS, Material's Surface around a Column on Android.

Also takes the native `sx` props.

PropTypeDefaultDescription
childrenReactNode—

Stacked vertically, from the leading edge.

glassbooleanfalse

iOS wraps the content in a GlassEffectContainer; Android raises it to a tonal elevation of 3.

testIDstring—

Test identifier, forwarded to the native view.

children
ReactNode

Stacked vertically, from the leading edge.

glassfalse
boolean

iOS wraps the content in a GlassEffectContainer; Android raises it to a tonal elevation of 3.

testID
string

Test identifier, forwarded to the native view.

Platform notes

  • glass reaches for iOS 26 glass and a Material 3 tonal surface on Android — the two do not look alike, and are not meant to.