Surface
Surface provides the base container for the library's elevated components.
Source
LLM docs
Package
Examples
4
Properties
38
Hooks
1
Playground
Basics
Use a Surface to give content a theme-aware background and elevation.
Loading demo…
import { Block, Surface, Text } from '@plocks/ui';
export function Demo() {
return (
<Block fullWidth>
<Surface level={1} padding="md" radius="lg" fullWidth>
<Text>Resting surface</Text>
</Surface>
</Block>
);
}Elevation levels
Level 0 is the page, 1 is resting content, 2 floats over content and 3 takes over the screen. Each resolves its own background, border and shadow from
theme.surfaces; toggle the color scheme to see the ladder switch from shadow-led to fill-led.Loading demo…
import { Block, Surface, Text } from '@plocks/ui';
const LEVELS = [0, 1, 2, 3] as const;
export function Demo() {
return (
<Block fullWidth>
{LEVELS.map((level) => (
<Surface key={level} level={level} padding="md" radius="lg" fullWidth>
<Text size="sm">Level {level}</Text>
</Surface>
))}
</Block>
);
}Nesting with raised
raised takes the enclosing Surface's level and adds one, so nested containers stack correctly without any of them hard-coding a number. Move the outer Surface to a different level and everything inside follows.Loading demo…
import { Block, Surface, Text } from '@plocks/ui';
export function Demo() {
return (
<Surface level={0} padding="md" radius="lg" fullWidth>
<Block>
<Text size="sm">Level 0</Text>
<Surface raised padding="md" radius="lg" fullWidth>
<Block>
<Text size="sm">Level 1</Text>
<Surface raised padding="md" fullWidth>
<Text size="sm">Level 2</Text>
</Surface>
</Block>
</Surface>
</Block>
</Surface>
);
}Surface vs Card
Card is a Surface with padding and section semantics on top. Reach for Surface directly when you want the elevation without Card's structure — a toolbar, a sheet, a custom panel.
Loading demo…
import { Block, Card, Row, Surface, Text } from '@plocks/ui';
export function Demo() {
return (
<Block fullWidth>
<Surface padding="md" radius="lg" fullWidth>
<Row align="center" justify="space-between">
<Text size="sm">Surface</Text>
<Text size="sm" c="muted">
level 1
</Text>
</Row>
</Surface>
<Card variant="elevated" radius="lg" fullWidth>
<Row align="center" justify="space-between">
<Text size="sm">Card</Text>
<Text size="sm" c="muted">
level 2
</Text>
</Row>
</Card>
</Block>
);
}React Native design for iOS, Android, and Web.
Quick Links
Resources