Visually Hidden

Utility

Hides content visually while keeping it available to screen readers.

VisuallyHidden renders an sr-only span, and visuallyHiddenClassName exposes the same class as a constant for use anywhere.

npx shadcn@latest add visually-hidden

Default

Preview

Live

The link below announces extra context to assistive tech without painting it on screen.

Learn more

tsx

1<a href="#" className="text-primary font-medium underline-offset-4 hover:underline">
2  Learn more
3  <VisuallyHidden> about accessibility in Shelf</VisuallyHidden>
4</a>

API reference

All props of the underlying Base UI primitive are forwarded. The table below documents the Shelf-specific props.

Prop	Type	Description
className	string	Merged with the sr-only base class.
as	React.ElementType= "span"	Render as a different element.
visuallyHiddenClassName	string	Exported constant equal to sr-only.