Surface

Beta

Theme-aware container with configurable background, radius, and padding.

Installation

npm install @xaui/native

Import

import { Surface } from '@xaui/native/view'

Basic Usage

Minimal example showing the component with its default configuration.

import { Surface } from '@xaui/native/view'

export function Example() {
  return (
    <Surface>
      {/* children */}
    </Surface>
  )
}

Default Surface

Uses the current theme background color by default.

import { Surface } from '@xaui/native/view'
import { Typography } from '@xaui/native/typography'

export function DefaultSurfaceExample() {
  return (
    <Surface padding={16}>
      <Typography>Default background surface</Typography>
    </Surface>
  )
}

Semantic Background Colors

Use theme color keys to apply semantic background tones.

import { Column, Surface } from '@xaui/native/view'
import { Typography } from '@xaui/native/typography'

export function SurfaceThemeColorsExample() {
  return (
    <Column spacing={10}>
      <Surface themeColor="primary" padding={12} radius="sm">
        <Typography>Primary background</Typography>
      </Surface>
      <Surface themeColor="success" padding={12} radius="sm">
        <Typography>Success background</Typography>
      </Surface>
      <Surface themeColor="warning" padding={12} radius="sm">
        <Typography>Warning background</Typography>
      </Surface>
    </Column>
  )
}

Full Width Card Surface

Use radius and padding for card-like sections.

import { Surface } from '@xaui/native/view'
import { Typography } from '@xaui/native/typography'

export function SurfaceCardExample() {
  return (
    <Surface
      radius="lg"
      padding={18}
      themeColor="secondary"
      style={{ width: '100%', borderWidth: 1, borderColor: '#d4d4d8' }}
    >
      <Typography variant="titleSmall">Team Notes</Typography>
      <Typography>Meeting starts at 10:30 AM.</Typography>
    </Surface>
  )
}