Documentation
NavigationGlass surface
Command
Builds command palettes and filterable action lists.
01
See it in context
Preview
02
Copy a working example
Usage
Astro examples assume UIPrimitives is mounted once in your root layout. Do not add the runtime next to each component instance.
---
import {
Command,
Input
} from '@santi020k/lumen-astro'
---
<Command>
<Input type="search" placeholder="Type a command..." aria-label="Command search" />
<button data-ui-command-item>Open documentation</button>
<button data-ui-command-item>Toggle theme</button>
<button data-ui-command-item>Create component</button>
</Command>---
import {
Command,
Input
} from '@santi020k/lumen-astro'
---
<Command>
<Input type="search" placeholder="Type a command..." aria-label="Command search" />
<button data-ui-command-item>Open documentation</button>
<button data-ui-command-item>Toggle theme</button>
<button data-ui-command-item>Create component</button>
</Command>import { Command, Input } from '@santi020k/lumen-react'
export const Example = () => (
<>
<Command>
<Input type="search" placeholder="Type a command..." aria-label="Command search" />
<button data-ui-command-item>Open documentation</button>
<button data-ui-command-item>Toggle theme</button>
<button data-ui-command-item>Create component</button>
</Command>
</>
)import { Command, Input } from '@santi020k/lumen-react'
export const Example = () => (
<>
<Command>
<Input type="search" placeholder="Type a command..." aria-label="Command search" />
<button data-ui-command-item>Open documentation</button>
<button data-ui-command-item>Toggle theme</button>
<button data-ui-command-item>Create component</button>
</Command>
</>
)<script type="module">
import { defineLumenElements } from '@santi020k/lumen-elements/define'
defineLumenElements()
</script>
<lumen-command>
<lumen-input type="search" placeholder="Type a command..." aria-label="Command search"></lumen-input>
<button data-ui-command-item>Open documentation</button>
<button data-ui-command-item>Toggle theme</button>
<button data-ui-command-item>Create component</button>
</lumen-command><script type="module">
import { defineLumenElements } from '@santi020k/lumen-elements/define'
defineLumenElements()
</script>
<lumen-command>
<lumen-input type="search" placeholder="Type a command..." aria-label="Command search"></lumen-input>
<button data-ui-command-item>Open documentation</button>
<button data-ui-command-item>Toggle theme</button>
<button data-ui-command-item>Create component</button>
</lumen-command>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 Commandlumen add Commandpnpm add @santi020k/lumen-reactpnpm add @santi020k/lumen-reactlumen add Command --target reactlumen add Command --target reactpnpm add @santi020k/lumen-elementspnpm add @santi020k/lumen-elementslumen add Command --target elementslumen add Command --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 { Command, Input, Kbd } from '@santi020k/lumen-astro'
---
<div class="docs-glass-demo">
<Command glass>
<Input placeholder="Type a command..." />
<button data-ui-command-item>Open glass docs <Kbd>G</Kbd></button>
<button data-ui-command-item>Copy setup snippet <Kbd>C</Kbd></button>
<button data-ui-command-item>Toggle dark theme <Kbd>D</Kbd></button>
</Command>
</div>---
import { Command, Input, Kbd } from '@santi020k/lumen-astro'
---
<div class="docs-glass-demo">
<Command glass>
<Input placeholder="Type a command..." />
<button data-ui-command-item>Open glass docs <Kbd>G</Kbd></button>
<button data-ui-command-item>Copy setup snippet <Kbd>C</Kbd></button>
<button data-ui-command-item>Toggle dark theme <Kbd>D</Kbd></button>
</Command>
</div>import { Command, Input, Kbd } from '@santi020k/lumen-react'
export const Example = () => (
<>
<div className="docs-glass-demo">
<Command glass>
<Input placeholder="Type a command..." />
<button data-ui-command-item>Open glass docs <Kbd>G</Kbd></button>
<button data-ui-command-item>Copy setup snippet <Kbd>C</Kbd></button>
<button data-ui-command-item>Toggle dark theme <Kbd>D</Kbd></button>
</Command>
</div>
</>
)import { Command, Input, Kbd } from '@santi020k/lumen-react'
export const Example = () => (
<>
<div className="docs-glass-demo">
<Command glass>
<Input placeholder="Type a command..." />
<button data-ui-command-item>Open glass docs <Kbd>G</Kbd></button>
<button data-ui-command-item>Copy setup snippet <Kbd>C</Kbd></button>
<button data-ui-command-item>Toggle dark theme <Kbd>D</Kbd></button>
</Command>
</div>
</>
)<script type="module">
import { defineLumenElements } from '@santi020k/lumen-elements/define'
defineLumenElements()
</script>
<div class="docs-glass-demo">
<lumen-command glass>
<lumen-input placeholder="Type a command..."></lumen-input>
<button data-ui-command-item>Open glass docs <lumen-kbd>G</lumen-kbd></button>
<button data-ui-command-item>Copy setup snippet <lumen-kbd>C</lumen-kbd></button>
<button data-ui-command-item>Toggle dark theme <lumen-kbd>D</lumen-kbd></button>
</lumen-command>
</div><script type="module">
import { defineLumenElements } from '@santi020k/lumen-elements/define'
defineLumenElements()
</script>
<div class="docs-glass-demo">
<lumen-command glass>
<lumen-input placeholder="Type a command..."></lumen-input>
<button data-ui-command-item>Open glass docs <lumen-kbd>G</lumen-kbd></button>
<button data-ui-command-item>Copy setup snippet <lumen-kbd>C</lumen-kbd></button>
<button data-ui-command-item>Toggle dark theme <lumen-kbd>D</lumen-kbd></button>
</lumen-command>
</div>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. |
| data-ui-command-item | boolean attribute | - | Marks filterable command items for the runtime. |
| 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. |