Glass

Glass lets controls and cards float over photos, video, maps or colourful surfaces while staying legible. You apply it as a variant on existing components.

Install

bashnpx shadcn@4.18.0 add @siteplane/button @siteplane/card @siteplane/popover @siteplane/tooltip @siteplane/menu @siteplane/context-menu @siteplane/dropdown-menu

The project needs Siteplane UI's one-time setup first: installation.

When to pick it

• vs Card: Keep the default Card surface on plain pages, where glass shows almost nothing.
• vs Popover: Set the glass tone attributes on the popup itself, since popovers render outside their trigger.

Rules

• Set variant="glass" on Button, Tooltip, Popover, Menu, Context Menu, Card or DropdownMenuContent.
• Use it only with a picture or colour behind it; on a flat background keep the default surface.
• Switch to a lighter panel with data-glass-tone="light" or dark text with data-glass-ink="dark", on the component or a wrapper.
• Check text contrast against your real imagery and keep long text on a solid surface.

Reference

• Glass docs, with every prop, part and example (Markdown)
• Siteplane UI 1.8.1, Glass. Read the installed source under src/siteplane before relying on an API.