Skip to content
Get Pro
Comparison

Budget Columns

Spending against a limit, counted out in cells that light up as money goes out.

$149 once · every Pro piece

Customize

As a strip, a band of cells with the limit partway along: lit cells warm through the grey ladder as spending nears the limit and every cell past it turns hot. As a burn-up, one column of dots per day stacked to the running total, with the limit as a dashed line and its value in a pill, and dots above it hot. Scrub through the days with a pointer or the arrow keys: the chart shows the budget as it stood that day, cells that just lit flash and cool, and the spend, the day and what is left roll to match.

Install

npx shadcn@latest add @obsyde/budget-columns

Needs your licence key · Get Pro

Usage

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

import { BudgetColumns } from '@/components/obsyde/ember/budget-columns/BudgetColumns';

export function Example() {
  return (
    <BudgetColumns />
  );
}

Files

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

  • ember/budget-columns/BudgetColumns.tsxcomponent
  • ember/budget-columns/budget-columns.cssstyles
  • ember/budget-columns/BudgetColumnsDemo.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/Grid.tsxshared
  • ember/viz-kit/demo.tsxshared
  • ember/viz-kit/demo.cssshared
  • ember/viz-kit/Axis.tsxshared

API

PropTypeDefault
accentAccent'ember' | 'volt' | 'arc''ember'
layoutLayout'strip' | 'burn''strip'
scenarioScenario'within' | 'close' | 'over''within'
dayDaynumber30
rowsRowsnumber2
cellCell'rounded' | 'dot''rounded'
patternPattern'none' | 'diagonal-up' | 'diagonal-down' | 'dots' | 'vertical' | 'crosshatch''none'
headerHeaderbooleantrue
statusStatus'ready' | 'loading' | 'empty''ready'
seedSeednumber4