Scale

A ruler-tick strip - diagonal hairlines at a fixed pitch. One component, two orientations. Reads its line color from a `--pattern` CSS variable set by the consumer.

Installation

npx stepwise-ui add scale

Horizontal

import { Scale } from '@/components/stepwise/scale'

// thickness sets the strip's height in px. --pattern sets the line colour and
// is optional - Scale ships a neutral grey that works on either theme.
<Scale orientation="horizontal" thickness={24} />

// Or pick your own line colour
<Scale orientation="horizontal" thickness={24} style={{ '--pattern': '#d4d4d8' }} />

Vertical

// Vertical fills its parent's height - give the parent one
<div className="h-32">
  <Scale orientation="vertical" />
</div>

Usage

A hairline separator between two page sections - here, the last section before a footer. Reads as an intentional seam rather than a plain divider.

// A hairline seam between two page sections - reads better than a plain
// border when the page above and below it are both fairly quiet
<div style={{ '--pattern': '#d4d4d8' }}>
  <section>{/* last section before the footer */}</section>
  <Scale orientation="horizontal" thickness={30} />
  <footer>{/* footer */}</footer>
</div>

Props

PropTypeDescription

orientation

'horizontal' | 'vertical'

Strip direction. Default 'horizontal'.

thickness

number

Strip thickness in px. Default 40.

className

string

Merged onto the root.

style

CSSProperties

Merged onto the root - set --pattern here to control the line color.