Surface
A container that applies surface-level styling to its children.
1use herogpui::components::surface::Surface;Usage
1use herogpui::prelude::Surface;
2use gpui::prelude::*;
3use gpui::px;
4
5Surface::new()
6 .padding(px(24.))
7 .child(gpui::div().child("A surface groups related content."))Live HeroGPUI compiled to WebAssembly. Select any example without loading another WASM instance.
Anatomy
Rust types
Surface
Surface is assembled from these builders. The API reference lists each one.
Customization
Appearance builders and theme tokens Surface uses.
Styling
| Style | Description |
|---|---|
flex + flex_col + gap(self.gap) + p(self.padding) + text_color(colors.foreground) | The strict component root: positioning and a foreground default only. Adds a minimal flex column so its `.padding`/`.gap` conveniences work — layout the upstream stylesheet does not declare. |
SurfaceVariant::Transparent => el (no bg, no border) | The transparent variant paints nothing extra: GPUI's default div background is already transparent, and no outline is added — the docs example draws its border through style. |
SurfaceVariant::Default => colors.surface.background + colors.surface.foreground | Standard surface fill with its own foreground. |
SurfaceVariant::Secondary => colors.surface_secondary + colors.surface_secondary_foreground() | Medium-prominence fill with its own foreground. |
SurfaceVariant::Tertiary => colors.surface_tertiary + colors.surface_tertiary_foreground() | Higher-prominence fill with its own foreground. |
API reference
Builders
| Builder | Type | Default | Description |
|---|---|---|---|
variant( | SurfaceVariant | SurfaceVariant:: | The visual variant of the surface. The strict root is only `relative text-foreground` plus each variant's fill and foreground pair — no padding, gap, radius or border of its own. |
ParentElement:: | AnyElement | — | Surface content, composed through ParentElement::extend. The port's `.padding`/`.gap` builders are repository conveniences standing in for the style skeleton every docs example adds (`flex flex-col gap-3 rounded-3xl p-6`) — not upstream props, and they default to zero because the component itself ships none. |
Parts
| Part | Description |
|---|---|
Surface | Strict component root: `relative` plus the variant's background and foreground pair. Zero default padding and gap, no radius and no border; the port's `.padding`/`.gap` builders are port conveniences, not props. |