Data displayGlass surface
Tree
Displays hierarchical navigation or object collections.
01
See it and copy it
Framework example
Choose Astro, React, or Elements to compare native usage against the shared visual output. Each example assumes the framework-level setup is already complete.
src
components
index.ts
tests
package.json
View Tree code
Framework usage
Switch targets to compare the adapter code. This live preview runs the Astro example. React and Elements use their own behavior APIs; complete the matching framework setup before copying an example.---
import { Tree } from '@santi020k/lumen-astro'
---
<Tree aria-label="Project files">
<div aria-expanded="true" aria-level="1" role="treeitem">src</div>
<div role="group">
<div aria-level="2" role="treeitem">components</div>
<div aria-level="2" role="treeitem">index.ts</div>
</div>
<div aria-expanded="false" aria-level="1" role="treeitem">tests</div>
<div aria-level="1" role="treeitem">package.json</div>
</Tree>import { Tree } from '@santi020k/lumen-react'
export const Example = () => (
<>
<Tree aria-label="Project files">
<div aria-expanded="true" aria-level={1} role="treeitem">src</div>
<div role="group">
<div aria-level={2} role="treeitem">components</div>
<div aria-level={2} role="treeitem">index.ts</div>
</div>
<div aria-expanded="false" aria-level={1} role="treeitem">tests</div>
<div aria-level={1} role="treeitem">package.json</div>
</Tree>
</>
)<script type="module">
import { defineLumenElements } from '@santi020k/lumen-elements/define'
defineLumenElements()
</script>
<lumen-tree aria-label="Project files">
<div aria-expanded="true" aria-level="1" role="treeitem">src</div>
<div role="group">
<div aria-level="2" role="treeitem">components</div>
<div aria-level="2" role="treeitem">index.ts</div>
</div>
<div aria-expanded="false" aria-level="1" role="treeitem">tests</div>
<div aria-level="1" role="treeitem">package.json</div>
</lumen-tree>02
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 Treelumen add Treepnpm add @santi020k/lumen-reactpnpm add @santi020k/lumen-reactlumen add Tree --target reactlumen add Tree --target reactpnpm add @santi020k/lumen-elementspnpm add @santi020k/lumen-elementslumen add Tree --target elementslumen add Tree --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.
packages
astro
react
elements
View Tree code
Framework usage
Switch targets to compare the adapter code. This live preview runs the Astro example. React and Elements use their own behavior APIs; complete the matching framework setup before copying an example.---
import { Tree } from '@santi020k/lumen-astro'
---
<div class="docs-glass-demo">
<Tree glass>
<div role="treeitem" aria-expanded="true">packages</div>
<div role="treeitem" aria-selected="true">astro</div>
<div role="treeitem">react</div>
<div role="treeitem">elements</div>
</Tree>
</div>import { Tree } from '@santi020k/lumen-react'
export const Example = () => (
<>
<div className="docs-glass-demo">
<Tree glass>
<div role="treeitem" aria-expanded="true">packages</div>
<div role="treeitem" aria-selected="true">astro</div>
<div role="treeitem">react</div>
<div role="treeitem">elements</div>
</Tree>
</div>
</>
)<script type="module">
import { defineLumenElements } from '@santi020k/lumen-elements/define'
defineLumenElements()
</script>
<div class="docs-glass-demo">
<lumen-tree glass>
<div role="treeitem" aria-expanded="true">packages</div>
<div role="treeitem" aria-selected="true">astro</div>
<div role="treeitem">react</div>
<div role="treeitem">elements</div>
</lumen-tree>
</div>API reference
Lumen-specific props and runtime attributes for the Astro primitive. Use the framework differences above and the copyable examples for React composition and Elements attributes; the public adapter types define their supported contracts.
| 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. |
| role | ARIA role | "tree" | Generated tree role for the root element. |
| aria-expanded, aria-level | ARIA attributes | - | Use on child items to indicate nested tree structure. |
| 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. |