Documentation
OverlaysGlass surface
Drawer
Slides in supporting navigation, filters, or task panels.
01
See it in context
Preview
02
Copy a working example
Usage
---
import {
Button,
Checkbox,
Drawer
} from '@santi020k/lumen-astro'
---
<Button variant="outline" data-ui-drawer-trigger="ex-drawer">Open filters</Button>
<Drawer id="ex-drawer">
<h2>Filters</h2>
<label><Checkbox name="stable" /> Stable packages only</label>
<Button variant="ghost" data-ui-drawer-close>Close</Button>
</Drawer>---
import {
Button,
Checkbox,
Drawer
} from '@santi020k/lumen-astro'
---
<Button variant="outline" data-ui-drawer-trigger="ex-drawer">Open filters</Button>
<Drawer id="ex-drawer">
<h2>Filters</h2>
<label><Checkbox name="stable" /> Stable packages only</label>
<Button variant="ghost" data-ui-drawer-close>Close</Button>
</Drawer>import { Button, Checkbox, Drawer } from '@santi020k/lumen-react'
export const Example = () => (
<>
<Button variant="outline" data-ui-drawer-trigger="ex-drawer">Open filters</Button>
<Drawer id="ex-drawer">
<h2>Filters</h2>
<label><Checkbox name="stable" /> Stable packages only</label>
<Button variant="ghost" data-ui-drawer-close>Close</Button>
</Drawer>
</>
)import { Button, Checkbox, Drawer } from '@santi020k/lumen-react'
export const Example = () => (
<>
<Button variant="outline" data-ui-drawer-trigger="ex-drawer">Open filters</Button>
<Drawer id="ex-drawer">
<h2>Filters</h2>
<label><Checkbox name="stable" /> Stable packages only</label>
<Button variant="ghost" data-ui-drawer-close>Close</Button>
</Drawer>
</>
)<script type="module">
import { defineLumenElements } from '@santi020k/lumen-elements/define'
defineLumenElements()
</script>
<lumen-button variant="outline" data-ui-drawer-trigger="ex-drawer">Open filters</lumen-button>
<lumen-drawer id="ex-drawer">
<h2>Filters</h2>
<label><lumen-checkbox name="stable"></lumen-checkbox> Stable packages only</label>
<lumen-button variant="ghost" data-ui-drawer-close>Close</lumen-button>
</lumen-drawer><script type="module">
import { defineLumenElements } from '@santi020k/lumen-elements/define'
defineLumenElements()
</script>
<lumen-button variant="outline" data-ui-drawer-trigger="ex-drawer">Open filters</lumen-button>
<lumen-drawer id="ex-drawer">
<h2>Filters</h2>
<label><lumen-checkbox name="stable"></lumen-checkbox> Stable packages only</label>
<lumen-button variant="ghost" data-ui-drawer-close>Close</lumen-button>
</lumen-drawer>03
Choose your target
Add this component
Choose the package for your runtime. All adapters share the Lumen stylesheet. Use the matching registry command when you want a local wrapper for that framework.
pnpm add @santi020k/lumen-astropnpm add @santi020k/lumen-astrolumen add Drawerlumen add Drawerpnpm add @santi020k/lumen-reactpnpm add @santi020k/lumen-reactlumen add Drawer --target reactlumen add Drawer --target reactpnpm add @santi020k/lumen-elementspnpm add @santi020k/lumen-elementslumen add Drawer --target elementslumen add Drawer --target elementsGlass
Add the glass prop to apply the shared blur, saturation, border, and highlight tokens. Glass reads best over vivid content, so place the surface above imagery or color.
---
import {
Button,
Checkbox,
Drawer
} from '@santi020k/lumen-astro'
---
<div class="docs-glass-demo" style="justify-items: center;">
<Button variant="outline" data-ui-drawer-trigger="ex-drawer-glass">Open glass filters</Button>
</div>
<Drawer id="ex-drawer-glass" glass>
<h2>Filters</h2>
<p>The glass drawer blurs the page content it slides over.</p>
<label><Checkbox name="stable-glass" /> Stable packages only</label>
<label><Checkbox name="glass-only" /> Glass-capable surfaces only</label>
<Button variant="ghost" data-ui-drawer-close>Close</Button>
</Drawer>---
import {
Button,
Checkbox,
Drawer
} from '@santi020k/lumen-astro'
---
<div class="docs-glass-demo" style="justify-items: center;">
<Button variant="outline" data-ui-drawer-trigger="ex-drawer-glass">Open glass filters</Button>
</div>
<Drawer id="ex-drawer-glass" glass>
<h2>Filters</h2>
<p>The glass drawer blurs the page content it slides over.</p>
<label><Checkbox name="stable-glass" /> Stable packages only</label>
<label><Checkbox name="glass-only" /> Glass-capable surfaces only</label>
<Button variant="ghost" data-ui-drawer-close>Close</Button>
</Drawer>import { Button, Checkbox, Drawer } from '@santi020k/lumen-react'
export const Example = () => (
<>
<div className="docs-glass-demo" style={{ justifyItems: 'center' }}>
<Button variant="outline" data-ui-drawer-trigger="ex-drawer-glass">Open glass filters</Button>
</div>
<Drawer id="ex-drawer-glass" glass>
<h2>Filters</h2>
<p>The glass drawer blurs the page content it slides over.</p>
<label><Checkbox name="stable-glass" /> Stable packages only</label>
<label><Checkbox name="glass-only" /> Glass-capable surfaces only</label>
<Button variant="ghost" data-ui-drawer-close>Close</Button>
</Drawer>
</>
)import { Button, Checkbox, Drawer } from '@santi020k/lumen-react'
export const Example = () => (
<>
<div className="docs-glass-demo" style={{ justifyItems: 'center' }}>
<Button variant="outline" data-ui-drawer-trigger="ex-drawer-glass">Open glass filters</Button>
</div>
<Drawer id="ex-drawer-glass" glass>
<h2>Filters</h2>
<p>The glass drawer blurs the page content it slides over.</p>
<label><Checkbox name="stable-glass" /> Stable packages only</label>
<label><Checkbox name="glass-only" /> Glass-capable surfaces only</label>
<Button variant="ghost" data-ui-drawer-close>Close</Button>
</Drawer>
</>
)<script type="module">
import { defineLumenElements } from '@santi020k/lumen-elements/define'
defineLumenElements()
</script>
<div class="docs-glass-demo" style="justify-items: center;">
<lumen-button variant="outline" data-ui-drawer-trigger="ex-drawer-glass">Open glass filters</lumen-button>
</div>
<lumen-drawer id="ex-drawer-glass" glass>
<h2>Filters</h2>
<p>The glass drawer blurs the page content it slides over.</p>
<label><lumen-checkbox name="stable-glass"></lumen-checkbox> Stable packages only</label>
<label><lumen-checkbox name="glass-only"></lumen-checkbox> Glass-capable surfaces only</label>
<lumen-button variant="ghost" data-ui-drawer-close>Close</lumen-button>
</lumen-drawer><script type="module">
import { defineLumenElements } from '@santi020k/lumen-elements/define'
defineLumenElements()
</script>
<div class="docs-glass-demo" style="justify-items: center;">
<lumen-button variant="outline" data-ui-drawer-trigger="ex-drawer-glass">Open glass filters</lumen-button>
</div>
<lumen-drawer id="ex-drawer-glass" glass>
<h2>Filters</h2>
<p>The glass drawer blurs the page content it slides over.</p>
<label><lumen-checkbox name="stable-glass"></lumen-checkbox> Stable packages only</label>
<label><lumen-checkbox name="glass-only"></lumen-checkbox> Glass-capable surfaces only</label>
<lumen-button variant="ghost" data-ui-drawer-close>Close</lumen-button>
</lumen-drawer>API reference
Lumen-specific props and runtime attributes for the Astro primitive. React props follow the same names; Elements use equivalent kebab-case attributes where custom elements expose them.
| Attribute | Values | Default | Description |
|---|---|---|---|
| glass | boolean | "subtle" | "strong" | false | Applies the tokenized liquid-glass surface treatment with backdrop-filter fallbacks; "subtle" and "strong" adjust the fill intensity. |
| surface | "default" | "glass" | "default" | Deprecated alias for glass; surface="glass" maps to glass={true}. |
| id | string | - | Connects the dialog surface to a matching trigger attribute value. |
| data-ui-drawer-trigger | target id | - | Marks an external trigger and points it at the dialog id. |
| data-ui-drawer-close | boolean attribute | - | Marks a child control that closes the nearest dialog. |
| class, className | string | "" | Merges custom classes with the generated ui-* root classes. |
| ...native attributes | HTML attributes | - | Forwards standard attributes to the root element unless the component consumes them. |