surface
A headless elevated-container primitive.
Sets background and radius, with opt-in elevation and border, all driven by design
tokens via data-*. Renders any element via as — the foundation other
containers build on (cards, panels, popovers, sheets).
import { Surface } from '@fluixi-ui/surface';
<Surface elevation={2} radius="lg" bordered>…</Surface>
<Surface as="section" elevation={0}>flat panel</Surface>
Props
| Prop | Type | Default | Notes |
|---|---|---|---|
as |
element / component | "div" |
What to render. |
elevation |
0–4 |
1 |
Shadow depth, flat → floating. |
radius |
none | sm | md | lg | xl | full |
lg |
Corner radius token. |
bordered |
boolean |
false |
Hairline border. |
glow |
boolean |
false |
Animated gradient border ring. |
glowSide |
all | top | right | bottom | left |
all |
Restrict the glow to one edge. |
All other props are forwarded to the rendered element. The glow (and its custom
--flx-glow-* colours / hover behaviour) works exactly as on
Button — the ring is shared and
element-agnostic, so Card supports it too.
Styling is theme-driven, so it follows data-theme and data-accent. In dark
mode elevation is expressed tonally — a raised surface lightens (plus a hairline
edge) rather than relying on a shadow that would be invisible on a dark
background. Compose with interactions for a pressable or
hoverable surface (<PressableFeedback as={Surface} ripple>).
Part of the Fluixi UI component library. Made with ☕ by the Fluixi team.