Surface

Surfaces & Layout

Surface

Themed surface primitive with elevation, shape, and background tokens.

Usage

Base building block for cards, sheets, and containers.

Highlights

• Elevation ramp mapping
• Extracts text-related styles via utilities

When to use it

• Create new layout primitives consistent with Material 3.
• Need to host ripple/state layers on a custom container.

Related components

CardStateLayer

Examples

Default

Preview (Web)

import { StyleSheet } from 'react-native-unistyles';
import { Surface } from 'react-native-molecules/components/Surface';
import { Text } from 'react-native-molecules/components/Text';

const styles = StyleSheet.create({
surface: {
width: 140,
height: 120,
borderRadius: 24,
alignItems: 'center',
justifyContent: 'center',
},
});

export default function Example() {
  return (
      <Surface style={styles.surface} elevation={3}>
          <Text>Surface</Text>
      </Surface>
  );
}

Prop	Type	Default	Description
childrenRequired	ReactNode	—	Content of the `Surface`.
style	StyleProp<ViewStyle>	—	—
testID	string | undefined	—	TestID used for testing purposes
elevation	MD3Elevation | undefined	—	—
backgroundColor	string | undefined	—	—
asChild	boolean | undefined	—	When `true`, the component will not render a wrapper element. Instead, it will merge its props (styles, elevation shadow, ref) onto its immediate child element. This follows the Radix UI "Slot" pattern for flexible component composition.

Defined in react-native-molecules/components/Surface