Skip to content
Get Pro
Comparison

Lollipop

One row per category: a hairline stem that fades in from the baseline and a head at the value, as a dot, a ring or a squircle.

$149 once · every Pro piece

Customize

Rows re-sort on springs, so a new order slides into place rather than jumping. Point at a row or step with the arrow keys and its head pops with a one-shot ping, turns hot and carries a value pill while the other rows step back. Stems can grow from zero or diverge left and right from the average, and an optional hatched track shows what is left to the end of the scale.

Install

npx shadcn@latest add @obsyde/lollipop

Needs your licence key · Get Pro

Usage

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

import { Lollipop } from '@/components/obsyde/ember/lollipop/Lollipop';

export function Example() {
  return (
    <Lollipop head="dot" sort="desc" />
  );
}

Files

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

  • ember/lollipop/Lollipop.tsxcomponent
  • ember/lollipop/lollipop.cssstyles
  • ember/lollipop/LollipopDemo.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/marks.tsxshared
  • ember/viz-kit/demo.tsxshared
  • ember/viz-kit/demo.cssshared

API

PropTypeDefault
accentAccent'ember' | 'volt' | 'arc''ember'
headHead'dot' | 'ring' | 'squircle''dot'
sortSort'desc' | 'asc' | 'none''desc'
sortSwitchSort switchbooleanfalse
baselineBaseline'zero' | 'mean''zero'
highlightHighlight'max' | 'min' | 'none''max'
trackTrack'none' | 'solid' | 'diagonal-up' | 'diagonal-down' | 'dots' | 'vertical' | 'crosshatch''none'
rowsRowsnumber8
tooltipTooltip'pill' | 'panel' | 'none''pill'
backgroundBackground'grid' | 'dots' | 'none''grid'
statusStatus'ready' | 'loading' | 'empty''ready'
valueLabelsValue labelsbooleanfalse
seedSeednumber3