Components

Glass

Add an optional glass material to a custom control surface.

Example

Requires React 18.2+ or 19 and shared styles. See setup.

Default

Loading preview…

Code
'use client';
import { Button, HStack, Text, UIProvider, VStack } from '@swiftuijs/ui';
import { Glass } from '@swiftuijs/ui';
export default function Example() {
    return (<UIProvider glass theme="system">
    <VStack spacing={20} style={{ padding: 32, borderRadius: 24, background: 'linear-gradient(135deg, #bfdbfe, #ddd6fe, #fbcfe8)' }}>
      <Glass><HStack><Text>Regular material</Text><Button>Done</Button></HStack></Glass>
      <Glass glass={{ variant: 'clear', intensity: 0.8 }}><Text>Clear material over a rich background</Text></Glass>
      <Glass glass={false}><Text>Effects disabled</Text></Glass>
      <Glass glass={{ intensity: 0 }}><Text>Zero intensity</Text></Glass>
    </VStack>
  </UIProvider>);
}

Usage and limitations

  • Inherits UIProvider preferences; glass overrides them for this surface. Glass is off by default.
  • glass={{ enabled: true, intensity: 0.6, variant: 'regular' }} enables it. Intensity is clamped to 0–1; clear is more transparent. false or zero intensity uses an opaque fallback.
  • Use on controls over content. Keep forms and content cards opaque and check contrast over your actual background.
  • CSS blur, tint and highlights approximate the material; native optical refraction is not implemented. Reduced transparency, increased contrast and forced colors use opaque fallbacks; browsers without backdrop-filter keep an opaque background.
  • See theming and materials for configuration and browser requirements.

More examples

Navigation Surfaces

API reference

PropTypeRequiredDescription
glassboolean | { enabled?: boolean; intensity?: number; variant?: 'regular' | 'clear' }NoLocal material override. Intensity is clamped to 0–1; zero uses an opaque surface. Default: Inherited from UIProvider; off without a provider

Inherits additional props from IBaseElementComponent<'div'>, GlassSurfaceProps.

Edit this page on GitHubReport an issue

GeometryReader

Read a container’s size and viewport position through a render function.

Grid

Grid arranges content in explicit rows and columns, following SwiftUI's non-lazy grid model.