Main content area
Visually Hidden
Visually Hidden component from @bungas/ui
Visually Hidden component from @bungas/ui
The VisuallyHidden component from Bungas UI.
The text below is visually hidden but accessible to screen readers:
Visible text
Icon buttons with accessible labels:
Skip links are visible on focus (tab to see):
Main content area
Form with visually hidden but accessible labels:
Using asChild to apply styles to a child element:
The hidden span above won't affect layout but is in the accessibility tree.
Visually hidden live region for screen reader announcements:
Page content (announcements are hidden but read by screen readers)
npm install @bungas/uiimport { VisuallyHidden } from "@bungas/ui"import { VisuallyHidden } from "@bungas/ui"
export function Example() {
return <VisuallyHidden />
}The text below is visually hidden but accessible to screen readers:
Visible text
Icon buttons with accessible labels:
Skip links are visible on focus (tab to see):
Main content area
Form with visually hidden but accessible labels:
Using asChild to apply styles to a child element:
The hidden span above won't affect layout but is in the accessibility tree.
Visually hidden live region for screen reader announcements:
Page content (announcements are hidden but read by screen readers)