Surface

Server component, no client JS

ImportCopy Anchor Link

import { Surface } from '@nizivo/react/surface';

// Once per app (Getting started), after
// @nizivo/tokens/tokens.css and @nizivo/react/css/base.css
import '@nizivo/react/css/surface.css';

Static or interactiveCopy Anchor Link

Server. No client JavaScript: it is a styled element. How to choose.

Solid or glassCopy Anchor Link

material="solid" (the default) paints bg/surface with a hairline border and radius/xl. material="glass" is Figma's Surface/Glass style: bg/surface at 72 % with a 24 px blur of whatever is behind it, and a soft shadow, as on the floating navbar over a shader hero. Put it over an image or colour, as the design says ("always on a tinted card, never on white"); over a plain white page it looks like a solid panel.

render makes it any element: render={<nav aria-label="Main" />} for a navbar, render={<section />} for a card.

Where glass stays opaqueCopy Anchor Link

The text on glass keeps the surface's contrast because the panel falls back to solid whenever the blur cannot happen or should not:

• in browsers without backdrop-filter (Safari before 18, the floor's Safari 17.5);
• when the reader asks for reduced transparency (prefers-reduced-transparency: reduce);
• in forced colours, where it is the system's Canvas.

StylingCopy Anchor Link

Surface has no public hooks (--nz-surface-* names design tokens), so set its padding, radius or border with your own class or style.

ExamplesCopy Anchor Link

import type { JSX } from 'react';
import { Surface } from '@nizivo/react/surface';

export function SurfaceExample(): JSX.Element {
  return (
    <Surface style={{ maxInlineSize: 320, padding: 20 }}>
      <strong>Store hours</strong>
      <p style={{ margin: '4px 0 0' }}>Mon–Sat, 9:00–18:00</p>
    </Surface>
  );
}

import type { JSX } from 'react';
import { Surface } from '@nizivo/react/surface';

export function SurfaceGlassExample(): JSX.Element {
  return (
    <div
      style={{
        display: 'grid',
        placeItems: 'center',
        inlineSize: 360,
        blockSize: 220,
        borderRadius: 16,
        background:
          'radial-gradient(circle at 25% 30%, #4c9e71 0 22%, transparent 23%), radial-gradient(circle at 75% 70%, #c9b79c 0 26%, transparent 27%), linear-gradient(135deg, #1a573a, #8a6e4b)',
      }}
    >
      <Surface material="glass" style={{ inlineSize: 260, padding: 20 }}>
        <strong>New collection</strong>
        <p style={{ margin: '4px 0 0' }}>Stoneware in five glazes, from Friday.</p>
      </Surface>
    </div>
  );
}

PropsCopy Anchor Link

Other exportsCopy Anchor Link

SurfaceMaterial type

import type { SurfaceMaterial } from '@nizivo/react/surface'

type SurfaceMaterial = "solid" | "glass"

SurfaceProps type

import type { SurfaceProps } from '@nizivo/react/surface'

The props of Surface, listed above.

SurfaceState type

import type { SurfaceState } from '@nizivo/react/surface'

The render state of Surface, listed above.

Data attributes and slotsCopy Anchor Link

Style parts by class (.nz-<slot>) and state by data attribute. Attribute meanings come from contracts/vocabulary.json.

CSS hooksCopy Anchor Link

Set a hook on the component's class or any ancestor to restyle it without specificity games; leave it unset for the default shown.

This stylesheet reads no public hook.

Layers: nz.components. Classes: .nz-surface.

AccessibilityCopy Anchor Link

Nothing in this component takes focus or keyboard input.

KeyboardCopy Anchor Link

None.

FigmaCopy Anchor Link

Node ids from design/component-map.json, which nz gen writes from component.json. The links open the Nizivo Figma library, which may ask you to sign in.

• Canonical: none
• Ghost masters: none