Visually Hidden

Utility

Screen-reader-only hidden content.

Preview

The button has a visually hidden label for screen readers. Inspect the DOM to see the hidden text.

Usage

example.jsx

import { VisuallyHidden } from "@/components/ui/visually-hidden";

export default function Example() {
  return <VisuallyHidden />;
}

Source Code

Copy this file into components/ui/visually-hidden.jsx in your project.

visually-hidden.jsx

import { forwardRef } from "react";
import { cn } from "@/lib/utils";

const VisuallyHidden = forwardRef(({ className, ...props }, ref) => (
  <span ref={ref} className={cn("absolute h-px w-px overflow-hidden whitespace-nowrap border-0 p-0 [clip:rect(0,0,0,0)]", className)} {...props} />
));
VisuallyHidden.displayName = "VisuallyHidden";

export { VisuallyHidden };

Quick Install

Make sure you have the cn() utility set up. It requires clsx and tailwind-merge.

npm install clsx tailwind-merge