Surface

Surface is an elevated card for dashboard panels. It steps the fill and border up from the workspace canvas so nested content stays distinct in light and dark themes.

import { Surface } from '@lobehub/ui/dashboard';

NPM Source Edit

Layout

Default

Loading preview

APIs

Elevated card on a workspace canvas. Use it for panels that should read above the page background without inventing a new surface color.

Surface properties

children: null | string | number | bigint | false | true | ReactElement<unknown, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | Promise<AwaitedReactNode>

Also accepts all native HTML and ARIA attributes.