Input Breakpoint Ruler
A controlled responsive breakpoint ruler for editing and previewing width thresholds.
Responsive breakpoints
Adjust threshold widths and preview which rule applies.
Use arrow keys to adjust by 1 pixels, Shift plus an arrow for 10 pixels, and Home or End for the nearest legal bound.
The preview follows the selected viewport; saved thresholds stay caller-controlled.
Input Breakpoint Ruler is a free forms-inputs component for Next.js, React and Tailwind authoring tools. It lets site builders move labeled responsive width thresholds with a pointer or keyboard and preview which threshold applies at a selected viewport width.
The threshold list remains controlled by the caller, values cannot cross their neighbors, and the supplied preview width is displayed separately from edits. It is an authoring control for breakpoint settings, not a device screenshot stage.
Install
Add the @te registry to your components.json once:
{
"registries": {
"@te": "https://templateempire.io/r/{name}.json"
}
}Then install the component:
npx shadcn@latest add @te/input-breakpoint-rulerUsage
"use client";
import { useState } from "react";
import { InputBreakpointRuler, type ResponsiveBreakpoint } from "@/components/input-breakpoint-ruler";
export function BreakpointEditor() {
const [breakpoints, setBreakpoints] = useState<ResponsiveBreakpoint[]>([
{ id: "mobile", label: "Mobile", maxWidth: 640 },
{ id: "tablet", label: "Tablet", maxWidth: 768 },
]);
const [previewWidth, setPreviewWidth] = useState(700);
return <InputBreakpointRuler breakpoints={breakpoints} onBreakpointsChange={setBreakpoints} activeViewportWidth={previewWidth} onActiveViewportWidthChange={setPreviewWidth} />;
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
| breakpoints | ResponsiveBreakpoint[] | required | Controlled list of unique ids and labels with strictly increasing integer maxWidth values inside the bounds. |
| onBreakpointsChange | (breakpoints: ResponsiveBreakpoint[]) => void | required | Receives a new array after a threshold edit, add or removal. |
| activeViewportWidth | number | required | Caller-supplied CSS viewport width used only for preview. |
| onActiveViewportWidthChange | (width: number) => void | undefined | Enables the separate preview slider; does not receive threshold edits. |
| minWidth | number | 320 | Inclusive ruler minimum and threshold lower bound. |
| maxWidth | number | 1920 | Inclusive ruler maximum and threshold upper bound. |
| step | number | 1 | Fine arrow-key increment in CSS pixels; Shift+Arrow uses ten times this value. |
| className | string | undefined | Additional classes merged onto the root section. |
Customisation
The ruler uses semantic background, border, muted, primary and focus tokens. Threshold values and preview width remain owned by the consuming editor.
.builder-breakpoint-ruler { max-inline-size: 54rem; }Frequently asked questions
- Does the ruler generate CSS media queries?
- No. It edits and reports thresholds; the consuming site builder owns CSS generation.
- Does changing the preview width edit the thresholds?
- No. Preview width and breakpoint values use separate controlled callbacks.