Frosted glass over the page field: page, light and nested variants, padding steps and an optional bloom.
GlassPanel is the signature surface: a translucent white fill, a lit edge, a specular top line and a two-layer shadow over the coloured page field. page holds a screen's main content (one or two per screen), light is for screens that are mostly panel, nested is a glass block inside a panel.
It publishes --inner-radius (its radius minus its padding, floored at --r-2xs) so anything flush inside it is concentric. bloom adds a soft corner light for the one place to act; the flat preset turns it off.
Installation
npx shadcn@latest add KezLahd/rime/glass-panelAlso installs: base.
Usage
import { GlassPanel } from "@/components/ui";
<GlassPanel padding="lg">…</GlassPanel>Examples
Variants
API
Generated from the component's TypeScript types and JSDoc (scripts/gen-ui-registry.mjs), so it always matches the source.
GlassPanel
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | "page" | "light" | "nested" | "page" | page = the signature panel, radius 20, two-layer shadow (one or two per screen). light = for screens that are mostly panel, so the page does not go milky. nested = a glass row or block inside a page panel, radius 16, no heavy shadow. |
| padding | "none" | "sm" | "md" | "lg" | "md" | |
| as | "div" | "section" | "article" | "aside" | "header" | "div" | |
| bloom | boolean | Soft corner light, the reference "something to act on here" signal. Use sparingly. Off in the public system (--bloom-opacity: 0). | |
| tabbed | boolean | Squares the top-left corner so FolderTabs can sit on it. Set by FolderTabs. |
Also accepts the native attributes of AriaAttributes, DOMAttributes, HTMLAttributes.
Theme tokens
Per-component tokens are undeclared by default, so the default shown is the fallback the CSS uses. Set one at :root (or in theme.css) to restyle every instance. Live values are read from this page, so they follow the Rime Studio.
| Token | Default | Live value |
|---|---|---|
| --bloom-opacity | 1 | … |
| --panel-pad-lg | calc(24px * var(--density)) | … |
| --panel-pad-md | calc(20px * var(--density)) | … |
| --panel-pad-sm | calc(12px * var(--density)) | … |
| --panel-radius-nested | var(--r-xl) | … |
| --panel-radius-page | var(--r-2xl) | … |
| --r-flat | var(--panel-radius) | … |
System tokens it reads
| Token | Default | Live value |
|---|---|---|
| --blur-panel | tokens.css | … |
| --blur-panel-light | tokens.css | … |
| --blur-row | tokens.css | … |
| --density | tokens.css | … |
| --glass-edge | tokens.css | … |
| --glass-fill | tokens.css | … |
| --glass-fill-light | tokens.css | … |
| --glass-fill-nested | tokens.css | … |
| --r-2xl | tokens.css | … |
| --r-2xs | tokens.css | … |
| --r-xl | tokens.css | … |
| --rgb-bloom-a | tokens.css | … |
| --rgb-brand | tokens.css | … |
| --rgb-contact | tokens.css | … |
| --rgb-white | tokens.css | … |
| --shadow-panel | tokens.css | … |
| --shadow-panel-light | tokens.css | … |
| --shadow-specular | tokens.css | … |
Accessibility
- Glass needs contrast checks on its worst-case background: check every ink in the Studio's Contrast tab, which measures against the glass over the field.
Do and don't
Do
- Use one page panel per job on a screen.
Don't
- No bento grids of panels; no left accent bars.
For AI agents
This page as markdown, rendered from the same registry entry. Point an agent at it (or add .md to this page's URL), or at /llms.txt for the index.
Open glass-panel.md