Skip to content
Get Pro
Trends

Step Line

Honest steps for tiers, plans and prices: values that hold until they change.

$149 once · every Pro piece

Customize

Each value owns a period, and its step can sit at the start of the period, its end or its middle. The period still running is dashed, and its label carries the accent. Labels sit once per step on the plateau they name, and drop out when a plateau is too short to hold one. Scrub it and the plateau under the cursor lifts as a shelf: a faint column down to the baseline and a brighter tread that springs from plateau to plateau. The tooltip says how long the tier held and how far the last step moved. A second series (active against licensed, use against quota) runs as a plain grey step line, linked to the legend.

Install

npx shadcn@latest add @obsyde/step-line

Needs your licence key · Get Pro

Usage

Import it from where the CLI puts it, or copy the files below by hand.

import { StepLine } from '@/components/obsyde/ember/step-line/StepLine';

export function Example() {
  return (
    <StepLine step="after" fill="gradient" open valueLabels shelf />
  );
}

Files

What you get with Pro: plain React, TypeScript and CSS, with no dependencies.

  • ember/step-line/StepLine.tsxcomponent
  • ember/step-line/step-line.cssstyles
  • ember/step-line/StepLineDemo.tsxdemo
  • ember/viz-kit/viz-kit.cssshared
  • ember/viz-kit/Tooltip.tsxshared
  • ember/viz-kit/focus.tsshared
  • ember/viz-kit/patterns.tsxshared
  • ember/viz-kit/roll.tsshared
  • ember/shared/rolling-number.cssshared
  • ember/shared/spring.tsshared
  • ember/shared/accent.tsshared
  • ember/viz-kit/scale.tsshared
  • ember/viz-kit/motion.tsshared
  • ember/viz-kit/chart.tsxshared
  • ember/shared/ember.cssshared
  • ember/viz-kit/touch.tsshared
  • ember/viz-kit/keyboard.tsshared
  • ember/viz-kit/size.tsshared
  • ember/viz-kit/States.tsxshared
  • ember/viz-kit/shape.tsshared
  • ember/viz-kit/series.tsxshared
  • ember/viz-kit/Legend.tsxshared
  • ember/viz-kit/Grid.tsxshared
  • ember/viz-kit/demo.tsxshared
  • ember/viz-kit/demo.cssshared
  • ember/viz-kit/Axis.tsxshared

API

PropTypeDefault
accentAccent'ember' | 'volt' | 'arc''ember'
viewData'seats' | 'price' | 'quota''seats'
stepStep at'after' | 'before' | 'mid''after'
fillFill'gradient' | 'solid' | 'pattern' | 'none''gradient'
openOpen periodbooleantrue
shelfShelf on hoverbooleantrue
legendLegend'row' | 'list' | 'none''row'
tooltipTooltip'panel' | 'corner' | 'none''panel'
crosshairCrosshair'solid' | 'dashed' | 'gradient' | 'none''solid'
dotsDots'halo' | 'ring' | 'none''halo'
patternPattern'none' | 'diagonal-up' | 'diagonal-down' | 'dots' | 'vertical' | 'crosshatch''none'
backgroundBackground'grid' | 'dots' | 'hatch' | 'none''grid'
revealReveal'sweep' | 'cool' | 'rise' | 'fade' | 'none''sweep'
statusStatus'ready' | 'loading' | 'empty''ready'
valueLabelsValue labelsbooleantrue
heightHeightnumber260
pointsPointsnumber18
seedSeednumber3