Status bar
Bottom information strip showing document metadata, cursor position, and zoom controls.
Install
npx shadcn@latest add https://substrate.georgedrury.co.uk/r/status-barnpx shadcn@latest add https://substrate.georgedrury.co.uk/r/zoom-controlsExamples
Default
1200 × 8003 objects
X: 583 Y: 151
"use client"
import { useState } from "react"Components
StatusBar
| Component | Description |
|---|---|
StatusBar | Fixed-height strip with border-top |
StatusBarSection | Aligned group (left, center, or right) |
StatusBarItem | Inline text item with tabular-nums |
StatusBarSeparator | Thin vertical divider |
ZoomControls
| Prop | Type | Default | Description |
|---|---|---|---|
zoom | number | — | Current zoom level (1 = 100%) |
onZoomChange | (zoom: number) => void | — | Called when zoom changes |
onZoomToFit | () => void | — | Optional fit-to-view callback |
min | number | 0.1 | Minimum zoom |
max | number | 10 | Maximum zoom |
step | number | 0.25 | Zoom increment per click |