Skip to content
Get Pro
Sections, new

Comparison Table

Plans side by side, feature by feature, on filled rows in alternate bands with no borders.

$149 once · every Pro piece

Customize

The plan header condenses into a bar that holds at the top while the table scrolls; the pointer draws a crosshair of row and column washes that glide between cells; a click on a plan focuses its column and dims the others. Categories fold away on a spring, feature names carry tooltips, and values read as a check, a dash or text. On narrow screens the table becomes one swipeable card per plan, kept in step with a segmented plan picker.

Install

npx shadcn@latest add @obsyde/comparison

Needs your licence key · Get Pro

Usage

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

import { Comparison } from '@/components/obsyde/ember/comparison/Comparison';

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

Files

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

  • ember/comparison/Comparison.tsxcomponent
  • ember/comparison/comparison-demo.cssstyles
  • ember/comparison/comparison.cssstyles
  • ember/comparison/ComparisonDemo.tsxdemo
  • ember/actions-kit/kit.tsshared
  • ember/segmented/segmented.cssshared
  • ember/segmented/Segmented.tsxshared
  • ember/shared/ember.cssshared
  • ember/shared/accent.tsshared
  • ember/shared/spring.tsshared
  • ember/overlays-kit/kit.tsshared
  • ember/tooltip/tooltip.cssshared
  • ember/tooltip/Tooltip.tsxshared
  • ember/blocks-kit/check.cssshared
  • ember/blocks-kit/Check.tsxshared
  • ember/blocks-kit/blocks-kit.cssshared
  • ember/blocks-kit/kit.tsxshared

API

PropTypeDefault
accentAccent'ember' | 'volt' | 'arc''ember'
focusFocused plan'none' | 'free' | 'pro' | 'team''none'
collapsedFold supportbooleanfalse
heightTable heightnumber600