import { BreakpointsIndicator } from "@vortexlabs/vortex";
<BreakpointsIndicator color="primary" storageKey="responsive-layout-indicator" ariaLabel="Demo breakpoint indicator" />Features
- Shows the active theme breakpoint.
- Moves between viewport corners.
- Collapses into an edge tab or stays pinned.
- Remembers its position and visibility.
- Supports colors, variants, responsive sizes, and rounded corners.
Color
Use color to distinguish the indicator from your interface. Appearance and pinned previews are shown inline for comparison; indicators normally float in a viewport corner.
<BreakpointsIndicator color="neutral" draggable={false} storageKey="docs-indicator-color-neutral" />
<BreakpointsIndicator color="primary" draggable={false} storageKey="docs-indicator-color-primary" />
<BreakpointsIndicator color="info" draggable={false} storageKey="docs-indicator-color-info" />
<BreakpointsIndicator color="success" draggable={false} storageKey="docs-indicator-color-success" />
<BreakpointsIndicator color="warning" draggable={false} storageKey="docs-indicator-color-warning" />
<BreakpointsIndicator color="critical" draggable={false} storageKey="docs-indicator-color-critical" />Variant and Shape
Set variant="outline" for an outlined badge. Set rounded for rounded corners.
<BreakpointsIndicator variant="outline" draggable={false} storageKey="docs-indicator-outline" />
<BreakpointsIndicator rounded draggable={false} storageKey="docs-indicator-rounded" />Size
Use size to change the indicator height and font size. The default is md.
<BreakpointsIndicator size="sm" draggable={false} storageKey="docs-indicator-size-sm" />
<BreakpointsIndicator size="md" draggable={false} storageKey="docs-indicator-size-md" />
<BreakpointsIndicator size="lg" draggable={false} storageKey="docs-indicator-size-lg" />Set size to a breakpoint object for responsive sizing, such as size={{ xs: "sm", md: "lg" }}.
Pinned Indicator
Set draggable={false} to keep the indicator in its current corner. A pinned indicator cannot collapse, so omit collapsible.
<BreakpointsIndicator
draggable={false}
storageKey="pinned-layout-indicator"
ariaLabel="Pinned layout breakpoint"
/>Dragging and Collapse
Drag the indicator to a viewport corner or past an edge to collapse it. Set collapsible={false} to keep it expanded while allowing movement.
<BreakpointsIndicator collapsible={false} />Persistence and Visibility
Set a unique storageKey per indicator to save its corner, collapsed edge, and visibility in localStorage.
<BreakpointsIndicator storageKey="layout-debugger" />Press Cmd+Shift+Period (macOS) or Ctrl+Shift+Period to show or hide all indicators. The shortcut is ignored while typing.
Development Setup
The indicator does not hide itself in production. Mount it inside your provider using your framework’s development flag. For Next.js:
import { BreakpointsIndicator } from "@vortexlabs/vortex";
export const DevelopmentIndicator = () =>
process.env.NODE_ENV === "development" ? <BreakpointsIndicator /> : null;The indicator renders outside ancestor stacking contexts and keeps its theme and text direction. It stays within its iframe or shadow root when mounted there.