VisuallyHidden Component

A component that hides content visually while keeping it accessible to screen readers.

  • Maintains accessibility for screen readers
  • Hides content visually but keeps it in the DOM
  • Useful for providing context to assistive technologies
  • Commonly used with icons and decorative elements

Installation

The VisuallyHidden component is part of our UI library. You can import it directly from the components directory.

Usage

Here is how to use the visually hidden component in your project.

React TSX
1import { VisuallyHidden } from "@/components/modern-ui/visually-hidden"

React TSX
1<VisuallyHidden>This text is hidden visually but available to screen readers</VisuallyHidden>

Examples

Basic VisuallyHidden

This text is hidden visually

This text is visible

API Reference

VisuallyHidden

PropTypeDefaultDescription
classNamestring-Additional CSS classes
childrenReactNode-The content to be hidden visually