Surface

Preview

About

A HeroUI-style container that provides background, elevation, rounding, and clipping for its inner content. The base for grouping content into cards, panels, and nested surfaces.

• variant: KasySurfaceVariant.transparent (structure/radius only, no fill), .defaultSurface (default; an elevated surface with the kit's shadow), .secondary / .tertiary (progressively recessed neutral backgrounds, for nested surfaces), or .image (clips the child — e.g. an image — to the radius, with no fill or shadow).
• borderRadius: corner radius; defaults to the kit's container radius (KasyRadius.rounded2xl, 16), same as KasyCard.
• padding: inner spacing around child.
• clipBehavior: clip behavior (defaults to Clip.antiAlias).
• child: the content shown inside the surface.

Only defaultSurface draws the kit's elevation shadow.

Last updated on 08/23/2026