Utilities
Installation
CLI
npx shadcn@latest add "https://diceui.com/r/visually-hidden"Manual
Install the following dependencies:
npm install @diceui/visually-hiddenCopy and paste the following code into your project.
import { Slot } from "@radix-ui/react-slot";
import type * as React from "react";
interface VisuallyHiddenProps extends React.ComponentProps<"div"> {
asChild?: boolean;
}
function VisuallyHidden(props: VisuallyHiddenProps) {
const { asChild, style, ...visuallyHiddenProps } = props;
const Comp = asChild ? Slot : "div";
return (
<Comp
{...visuallyHiddenProps}
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,
}}
/>
);
}
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