Utilities
Installation
CLI
npx shadcn@latest add "https://diceui.com/r/visually-hidden"pnpm dlx shadcn@latest add "https://diceui.com/r/visually-hidden"yarn dlx shadcn@latest add "https://diceui.com/r/visually-hidden"bun x shadcn@latest add "https://diceui.com/r/visually-hidden"Manual
Install the following dependencies:
npm install @diceui/visually-hiddenpnpm add @diceui/visually-hiddenyarn add @diceui/visually-hiddenbun add @diceui/visually-hiddenCopy 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 function IconButton() {
return (
<button>
<Icon />
<VisuallyHidden>Close menu</VisuallyHidden>
</button>
)
}API Reference
VisuallyHidden
Visually hides content while keeping it accessible.
| Prop | Type | Default |
|---|---|---|
asChild? | boolean | false |