║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║

---

title: Visually Hidden description: Hides content visually while keeping it accessible to screen readers. links: api: /docs/utilities/visually-hidden#api-reference

Installation

CLI

npx shadcn@latest add "https://diceui.com/r/visually-hidden"

Manual

<Steps> <Step> Install the following dependencies:

 ```package-install
 @diceui/visually-hidden
 ```

</Step> <Step> Copy and paste the following code into your project.

<ComponentSource src="./registry/default/components/visually-hidden.tsx" />

</Step> </Steps>

Usage

import { VisuallyHidden } from "@diceui/visually-hidden"

export function IconButton() {
  return (
    <button>
      <Icon />
      <VisuallyHidden>Close menu</VisuallyHidden>
    </button>
  )
}

API Reference

VisuallyHidden

Visually hides content while keeping it accessible.

<AutoTypeTable path="./types/docs/utilities.ts" name="VisuallyHiddenProps" />

║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║