Visually Hidden
Hides text visually while keeping it available to assistive tech.
Preview
import { VisuallyHidden } from "@/components/ui/VisuallyHidden";
export function VisuallyHiddenDemo() {
return (
<button type="button" className="rounded-sm border border-gray-7 px-1 py-0.5">
Save
<VisuallyHidden> the current theme</VisuallyHidden>
</button>
)
}Installation
Make sure that namespace is set in your component.json file. Namespace docs: Learn more about namespaces
pnpm dlx shadcn@latest add @aura/visually-hiddenManual
Copy and paste the class names utility into your utils/class-names.ts file.
import { clsx, type ClassValue } from "clsx"
import { twMerge } from "tailwind-merge"
export function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs))
}
Copy and paste the VisuallyHidden component into your components/ui/VisuallyHidden.tsx file.
"use client";
import * as React from "react";
import { cn } from "@/utils/class-names";
function VisuallyHidden({ className, ...props }: React.ComponentProps<"span">) {
return <span data-slot="visually-hidden" className={cn("sr-only", className)} {...props} />;
}
export { VisuallyHidden };