VisuallyHidden

npm package: import it from 'flootlets'

bun add flootlets

Or copy it in with the shadcn CLI: import it from '@/components/ui/…'

npx shadcn@latest add https://dyeoh.github.io/flootlets/r/visually-hidden.json

Both need Tailwind CSS v4; see Installation for the setup.

Use it to name icon-only buttons, or to add context that’s obvious visually but not when read aloud.

×Remove Kuih Lapis from cart

// Screen readers announce "Remove Kuih Lapis from cart, button"; sighted users see ×.
export default function VisuallyHiddenExample() {
  return (
    <Button variant="ghost" size="icon">
      <span aria-hidden="true">×</span>
      <VisuallyHidden>Remove Kuih Lapis from cart</VisuallyHidden>
    </Button>
  );
}

Tailwind’s sr-only class does the same without the component.