Documentation
Data displayGlass surface
Tree
Displays hierarchical navigation or object collections.
01
See it in context
Preview
src
components
index.ts
tests
package.json
02
Copy a working example
Usage
---
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-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>
</>
)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><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>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 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
---
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-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>
</>
)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><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. 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. |
| 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. |