VisuallyHidden
XS · 350B gzip budgetContent for assistive technology only, removed from the visual layout without leaving the accessibility tree.
- Category
- Accessibility & preferences
- Budget
- xs, static display primitive
- External runtime
- React / React DOM only
axe fixtureSSR rendersource scanbundle budget
Preview
Live fixtureTry the component here. Locale-aware formatting and direction follow the selected language; example content and labels are not automatically translated. Overlay demos use interactive launchers.
Install
npx shadcn@latest add https://gear5-ui.vercel.app/r/visually-hidden.jsonCopies the source into your project.
New here? Set up Tailwind and import aliases first →Source & props
Edit on GitHub ↗Prop types and inline documentation are included below. This is repository source; the installer rewrites shared imports for your project.
/**
* Content present for assistive technology and absent from the visual
* layout — an icon-only button's real label, an SR-only column header.
*
* Not `display: none` or `hidden`: both remove a node from the accessibility
* tree as completely as from the screen, which is the opposite of the point.
*/
export function VisuallyHidden({
children,
as: As = "span",
}: {
children: React.ReactNode;
as?: React.ElementType;
}) {
return (
<As
style={{
position: "absolute",
width: 1,
height: 1,
margin: -1,
padding: 0,
border: 0,
overflow: "hidden",
clip: "rect(0 0 0 0)",
clipPath: "inset(50%)",
whiteSpace: "nowrap",
}}
>
{children}
</As>
);
}
What CI checks
Quality contract- Bundled, minified and gzipped against its tier budget
- Audited by axe in the state previewed above
- Rendered through react-dom/server with no browser globals
- Scanned for network calls, dangerous sinks, and unguarded animation