Surface
Container component that provides surface-level styling and context for child components
Usage
import { Surface } from '@lenso/ui';"use client";// Adapted from HeroUI v3.2.6 (e385ac202b2cdb94b1bf6fa76d32c31c8259cc5e), Apache-2.0.import { Surface } from "@lenso/ui";import * as stylex from "@stylexjs/stylex";import { s } from "../card/display.stylex";
export function Basic() { return ( <Surface xstyle={s.surface} variant="default"> <h3 {...stylex.props(s.textBase, s.semibold, s.foreground)}>Surface Content</h3> <p {...stylex.props(s.textSm, s.muted)}> This is a default surface variant. It uses bg-surface styling. </p> </Surface> );}Local adaptation source above. Derived from HeroUI v3.2.6 source.
Examples
Variants
Surface comes in semantic variants that describe their prominence level:
default- Standard surface appearance (bg-surface)secondary- Medium prominence (bg-surface-secondary)tertiary- Higher prominence (bg-surface-tertiary)
"use client";// Adapted from HeroUI v3.2.6 (e385ac202b2cdb94b1bf6fa76d32c31c8259cc5e), Apache-2.0.import { Surface } from "@lenso/ui";import * as stylex from "@stylexjs/stylex";import { s } from "../card/display.stylex";
const variants = [ { variant: "default", label: "Default", description: "This is a default surface variant. It uses bg-surface styling.", }, { variant: "secondary", label: "Secondary", description: "This is a secondary surface variant. It uses bg-surface-secondary styling.", }, { variant: "tertiary", label: "Tertiary", description: "This is a tertiary surface variant. It uses bg-surface-tertiary styling.", }, { variant: "transparent", label: "Transparent", description: "This is a transparent surface variant. It has no background, suitable for overlays and cards with custom backgrounds.", },] as const;export function Variants() { return ( <div {...stylex.props(s.column4)}> {variants.map(({ variant, label, description }) => ( <div key={variant} {...stylex.props(s.column2)}> <p {...stylex.props(s.textSm, s.medium, s.muted)}>{label}</p> <Surface xstyle={[s.surface, variant === "transparent" && s.border]} variant={variant}> <h3 {...stylex.props(s.textBase, s.semibold, s.foreground)}>Surface Content</h3> <p {...stylex.props(s.textSm, s.muted)}>{description}</p> </Surface> </div> ))} </div> );}Local adaptation source above. Derived from HeroUI v3.2.6 source.
With Form Components
When using form components inside a Surface, use the variant="secondary" prop to apply the lower emphasis variant suitable for surface backgrounds.
"use client";// Adapted from HeroUI v3.2.6 (e385ac202b2cdb94b1bf6fa76d32c31c8259cc5e), Apache-2.0.import { Input, Surface, TextArea } from "@lenso/ui";import { s } from "../card/display.stylex";
export function WithFormComponents() { return ( <Surface xstyle={s.surfaceForm} variant="default"> <Input aria-label="Input with secondary variant" placeholder="Input with secondary variant" variant="secondary" /> <TextArea aria-label="TextArea with secondary variant" placeholder="TextArea with secondary variant" variant="secondary" /> </Surface> );}Local adaptation source above. Derived from HeroUI v3.2.6 source.
Customization
Tailwind CSS
"use client";// Adapted from HeroUI v3.2.6 (e385ac202b2cdb94b1bf6fa76d32c31c8259cc5e), Apache-2.0.import { Surface } from "@lenso/ui";import * as stylex from "@stylexjs/stylex";import { s } from "../card/display.stylex";
export function CustomStyles() { return ( <Surface xstyle={s.surfaceCustom} variant="default"> <h3 {...stylex.props(s.textSm, s.semibold, s.foreground)}>Billing overview</h3> <p {...stylex.props(s.textSm, s.muted)}>View invoices and payment methods in one place.</p> </Surface> );}Local adaptation source above. Derived from HeroUI v3.2.6 source.
Global CSS
To customize the Surface component classes, you can use the @layer components directive.
Learn more.
@layer components { .surface { @apply rounded-2xl border border-border; }
.surface--secondary { @apply bg-gradient-to-br from-blue-50 to-purple-50; }}Styling Reference
HeroUI follows the BEM methodology to ensure component variants and states are reusable and easy to customize.
CSS Classes
The Surface component uses these CSS classes (View source styles):
Base Classes [!toc]
.surface- Base surface container
Variant Classes [!toc]
.surface--default- Default surface variant (bg-surface).surface--secondary- Secondary surface variant (bg-surface-secondary).surface--tertiary- Tertiary surface variant (bg-surface-tertiary)
API Reference
Surface
| Prop | Type | Default | Description |
|---|---|---|---|
variant | "transparent" | "default" | "secondary" | "tertiary" | "default" | The visual variant of the surface |
className | string | - | Additional CSS classes |
children | ReactNode | - | The surface content |
Context API
SurfaceContext
Child components can access the Surface context to get the current variant:
import { useContext } from 'react';import { SurfaceContext } from '@lenso/ui';
function MyComponent() { const { variant } = useContext(SurfaceContext); // variant will be "transparent" | "default" | "secondary" | "tertiary" | undefined}