Dice UI
Utilities

Visually Hidden

Hides content visually while keeping it accessible to screen readers.

API

Installation

CLI

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

Manual

Install the following dependencies:

npm install @diceui/visually-hidden

Copy and paste the following code into your project.

import * as React from "react";
 
import { Slot } from "@radix-ui/react-slot";
 
interface VisuallyHiddenProps extends React.ComponentPropsWithoutRef<"div"> {
  asChild?: boolean;
}
 
const VisuallyHidden = React.forwardRef<HTMLDivElement, VisuallyHiddenProps>(
  ({ asChild, style, ...props }, forwardedRef) => {
    const Comp = asChild ? Slot : "div";
 
    return (
      <Comp
        {...props}
        ref={forwardedRef}
        style={{
          border: 0,
          clip: "rect(0 0 0 0)",
          clipPath: "inset(50%)",
          height: "1px",
          margin: "-1px",
          overflow: "hidden",
          padding: 0,
          position: "absolute",
          whiteSpace: "nowrap",
          width: "1px",
          ...style,
        }}
      />
    );
  },
);
 
VisuallyHidden.displayName = "VisuallyHidden";
 
export { VisuallyHidden };

Usage

import { VisuallyHidden } from "@diceui/visually-hidden"
 
export default function IconButton() {
  return (
    <button>
      <Icon />
      <VisuallyHidden>Close menu</VisuallyHidden>
    </button>
  )
}

API Reference

VisuallyHidden

Visually hides content while keeping it accessible.

PropTypeDefault
asChild
boolean
false

Previous

Portal

On this page