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';
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	—	—
style	StyleProp<ViewStyle>	—	—
testID	string | undefined	—	—
elevation	MD3Elevation | undefined	—	—
backgroundColor	string | undefined	—	—

Defined in react-native-molecules/components/Surface