Surfacesradix-ui

Glass

A frosted pane — the base every surface is made from. Intensity, tint and elevation variants; asChild.

Subtle

Default

Strong

Tinted

Flat — no drop shadow

Installation

pnpm dlx shadcn@latest add https://glasscn.app/r/glass.json

Or with the namespace set up: shadcn add @glasscn/glass

Props

Prop	Type	Default
intensity	`"default" \| "strong" \| "subtle"` How much frost: the fill's opacity over the blur.	"default"
tint	`"none" \| "primary" \| "destructive"` Mixes a colour into the frost via --glass-bg.	"none"
elevation	`"raised" \| "flat"` Drop shadow on or off (--glass-elevation).	"raised"
asChild	`boolean` Render the child element as the pane.	false

Source

components/glass/glass.tsx

import * as React from "react"
import { cn } from "cn"
import { Slot } from "radix-ui"

import { glassVariants, type GlassVariantProps } from "@/lib/glass-variants"

/**
 * A frosted pane: the base every glasscn surface is made from.
 * Blurs and saturates whatever is behind it, rimmed with a light edge.
 */
function Glass({
  className,
  intensity,
  tint,
  elevation,
  asChild = false,
  ...props
}: React.ComponentProps<"div"> & GlassVariantProps & { asChild?: boolean }) {
  const Comp = asChild ? Slot.Root : "div"
  return (
    <Comp
      data-slot="glass"
      data-intensity={intensity ?? "default"}
      className={cn(glassVariants({ intensity, tint, elevation }), "rounded-surface", className)}
      {...props}
    />
  )
}

export { Glass, glassVariants }