Install with shadcn
Experimental compatibility. This installs the real Astryx package and creates a local public re-export; it does not copy component implementation source. How compatibility works.
Install the editable showcase compositionbash
bash
Usage
Renders content in the accessibility tree while hiding it visually. Use for accessible names on icon-only controls, aria-live announcement regions, and supplementary screen-reader context. Deliberately has no styling props; the whole point is to stay invisible.
ts
Best practices
| Guidance | Practices |
|---|---|
| Do | Use to give icon-only buttons and controls an accessible name that screen readers announce. |
| Do | Render as a block element (as="div") with aria-live to announce dynamic updates like drag-and-drop or result counts. |
| Don't | Use it to hide content from everyone; it stays in the accessibility tree; use conditional rendering or |
| Don't | Put interactive controls inside it; the content is not visible and cannot receive pointer input. |
Props
| Prop | Type | Description |
|---|---|---|
children | ReactNode | Content exposed to assistive technology while hidden from sight. |
as | ElementType (default: 'span') | HTML tag to render as. Use a block element for live regions. |
Examples
Common configurations, variations, and states.A polite aria-live region announces visual-only state changes to assistive technology.
Give a visually implicit section an accessible name so screen-reader users can navigate to it.
Add screen-reader-only context to terse visual data, like spelling out what a trend arrow means.