Web Components

React

Vue

@media (max-width: 63.999rem) { [data-page-frame-layout] { flex-direction: column !important; } .docs-sidebar { width: 100% !important; } .mobile-sidebar-pane { position: static !important; inset: auto !important; display: flex !important; width: 100% !important; max-height: min(60svh, 32rem); border-bottom: 1px solid var(--color-border); } .main-frame { width: 100% !important; } starlight-menu-button { display: none !important; } }

Separator

Shadcn separator reconstructed on Proto UI.

This entry shows the current shadcn separator implementation in Proto UI.

Base Separator owns the protocol: orientation defaults to horizontal, and decorative defaults to true. A decorative separator stays hidden from the accessibility tree with no role, while decorative={false} projects the separator role and a matching aria-orientation. The shadcn layer adds presentation only — the border color and the 1px hairline geometry that follows the inherited orientation.

The separator is contentless and declares no focus, tab stop, or event channel. Length comes from the surrounding layout, and spacing stays with the composition.