Clarity.
With a little depth.

One optional import.

Import the glass layer after the base styles. Scope it around the part of your interface that needs depth. The alpha packages remain unpublished; these imports work in the workspace or installed alpha archives.

import "@devvy-ui/tokens/theme.css";
import "@devvy-ui/styles";
import "@devvy-ui/styles/glass.css";
import { Glass, Card, CardContent, Button } from "@devvy-ui/react";

<Glass theme="dark" quality="auto">
  <Card>
    <CardContent>
      <h2>A little room for your idea.</h2>
      <Button variant="outline">Start building</Button>
    </CardContent>
  </Card>
</Glass>

Set your own material.

.my-material {
  --dvy-glass-blur: 12px;
  --dvy-glass-opacity: .9;
  --dvy-glass-saturation: 1.15;
  --dvy-glass-light-angle: 135deg;
  --dvy-glass-radius: 1.25rem;
}

/* Apply className="my-material" to Glass. */

Glass scope API

Reusable dialogs and docks

Dialog and Dock are theme-independent React primitives. They work with the ordinary theme; the glass scope supplies their material.

const [open, setOpen] = useState(false);
const trigger = useRef<HTMLButtonElement>(null);

<Button ref={trigger} onClick={() => setOpen(true)}>Settings</Button>
<Glass theme="dark">
  <Dialog open={open} onOpenChange={setOpen}
    returnFocusRef={trigger}
    title="Workspace settings"
    description="Make this space your own.">
    <Button onClick={() => setOpen(false)}>Done</Button>
  </Dialog>
</Glass>

Dialog requires open, onOpenChange and title. Optional description labels supporting text, initialFocusRef chooses the initial focus target, and closeLabel localizes the close button. Set returnFocusRef to the opening button so pointer activation also restores focus in Safari. Keep modal interactions inside the dialog and use the controlled callback for form actions.

<Dock label="Workspace navigation">
  <a href="/workspace" aria-current="page">Workspace</a>
  <a href="/activity">Activity</a>
  <a href="/library">Library</a>
</Dock>

// Add floating for a viewport dock. Reserve space in your layout
// so the dock never covers content or keyboard focus.

Designed to adapt. Built to include.

• Native buttons, named navigation and a real HTML dialog. The browser manages modal focus, inert background, Escape and focus return.
• Systems without backdrop-filter receive opaque surfaces. The React wrapper also reduces effects for save-data, four or fewer reported CPU threads, or four or fewer reported GB of memory.
• Device hints are conservative signals, not a measured GPU capability score. Use reduced mode explicitly where appropriate. CSS-only consumers can set data-devvy-quality="reduced".
• Reduced-transparency and higher-contrast media preferences remove blur. Reduced motion removes entrance and hover motion. Forced colors restore system surfaces and borders.
• Transparency is not a substitute for contrast. Keep text on a sufficiently opaque surface and test your own colors, images and token overrides.

Compatibility, honestly.

React 18/19 use the same adapter; the material itself is plain CSS and needs no React. Native modal behavior requires HTMLDialogElement.showModal support. An older browser without it receives an explicitly nonmodal inline panel. It does not receive an imitation focus trap. Unsupported CSS degrades to solid DEVVY surfaces.

Vue, Svelte and Web Components adapters are still future work. Their markup can use the same CSS, but this release does not claim tested framework integrations. See docs/glass.md for the complete fallback, testing and deployment policy.

DEVVY GLASS is an original material study by DEV STATION. It uses platform glass conventions while keeping DEVVY’s typography, palette and component language. No proprietary Apple artwork, shaders or component assets are used.