# Surface **Category**: native **URL**: https://www.heroui.com/docs/native/components/surface **Source**: https://raw.githubusercontent.com/heroui-inc/heroui/refs/heads/v3/apps/docs/content/docs/native/components/(layout)/surface.mdx > Container component that provides elevation and background styling. *** ## Import ```tsx import { Surface } from 'heroui-native'; ``` ## Anatomy The Surface component is a container that provides elevation and background styling. It accepts children and can be customized with variants and styling props. ```tsx ... ``` - **Surface**: Main container component that provides consistent padding, background styling, and elevation through variants. ## Usage ### Basic Usage The Surface component creates a container with consistent padding and styling. ```tsx ... ``` ### Variants Control the visual appearance with different surface levels. ```tsx ... ... ... ``` ### Nested Surfaces Create visual hierarchy by nesting surfaces with different variants. ```tsx ... ... ... ``` ### Custom Styling Apply custom styles using className or style props. ```tsx ... ... ``` ### Disable All Animations Disable all animations including children by using the `"disable-all"` value for the `animation` prop. ```tsx { /* Disable all animations including children */ } No Animations; ``` ## Example ```tsx import { Surface } from 'heroui-native'; import { Text, View } from 'react-native'; export default function SurfaceExample() { return ( Surface Content This is a default surface variant. It uses bg-surface styling. Surface Content This is a secondary surface variant. It uses bg-surface-secondary styling. Surface Content This is a tertiary surface variant. It uses bg-surface-tertiary styling. ); } ``` You can find more examples in the [GitHub repository](https://github.com/heroui-inc/heroui-native/blob/main/example/src/app/(home)/components/surface.tsx). ## API Reference ### Surface | prop | type | default | description | | -------------- | --------------------------------------------------------- | ----------- | ----------------------------------------------------------------------------------------- | | `variant` | `'default' \| 'secondary' \| 'tertiary' \| 'transparent'` | `'default'` | Visual variant controlling background color and border | | `children` | `React.ReactNode` | - | Content to be rendered inside the surface | | `className` | `string` | - | Additional CSS classes to apply | | `animation` | `"disable-all" \| undefined` | `undefined` | Animation configuration. Use `"disable-all"` to disable all animations including children | | `asChild` | `boolean` | `false` | Whether to render as a child element | | `...ViewProps` | `ViewProps` | - | All standard React Native View props are supported |