Plans as columns with the home column washed, grouped features, yes, no and partial marks, and a switch for only differences.
FreeWeb and MobileMotion
Preview
npx shadcn add @fetaui/comparison-tablePlayground
How Bitter compares
Everything a growing team needs, without the enterprise price or the spreadsheet sprawl.
| BitterBitter$10 per seat | Legacy suiteLegacy$24 per seat | SpreadsheetsSheetsFree | Point toolsPoint tools$16 per seat | |
|---|---|---|---|---|
| Templates | Manual copies | |||
| Collaboration | ||||
| Real time editing | ||||
| Free guest access | Five guests | |||
| Offline modeEdits sync when you reconnect | Desktop only | |||
| Automation | ||||
| Rules and triggers | Paid add on | |||
| AI summaries | ||||
| Public API | ||||
Differences
How Bitter compares
Everything a growing team needs, without the enterprise price or the spreadsheet sprawl.
| BitterBitter$10 per seat | Legacy suiteLegacy$24 per seat | SpreadsheetsSheetsFree | Point toolsPoint tools$16 per seat | |
|---|---|---|---|---|
| Templates | Manual copies | |||
| Collaboration | ||||
| Real time editing | ||||
| Free guest access | Five guests | |||
| Offline modeEdits sync when you reconnect | Desktop only | |||
| Automation | ||||
| Rules and triggers | Paid add on | |||
| AI summaries | ||||
Icons animation
Motion
Installation
Terminal· bash
npx shadcn add @fetaui/comparison-table
Accessibility
- A real table with column, row and group headers.
- Marks are icons with Yes, No and Partial labels.
- Text keeps 4.5:1 and marks 3:1.
Motion
- The panel fades in and rises 8 px over 400 ms, once.
- Rows fade in over 240 ms with a 40 ms stagger.
- Numbers and bars tween over 240 ms by writing text and transforms, so React does not render per frame.
- With reduced motion, the panel appears in place and values swap at once.
Responsive behavior
- Mobile drops secondary columns rather than shrinking text, and shows short names.
- 760 wide on Web and 358 on Mobile.
Performance
- Static markup with one Switch. Only differences removes matching rows from the DOM.
Note for AI
Give your coding assistant the Markdown reference instead of screenshots.
- Import ComparisonTable and its types. Props: title, subtitle, plans, groups, defaultDifferences, animated.
- A value is true, false, 'partial', or { mark, note }.
- home washes a plan's column and secondary drops it first on Mobile. Marks repeat as icons and labels.
Related
Pricing · CompareProBlockA plan comparison table with plan headers and feature rows.TableComponentNative table parts on one cell component, in Compact or Comfortable density and Plain or Grid style.Plan CardComponentOne plan: name, price, pitch, features and a full width Button.SwitchComponentTurns a setting on or off and applies it at once.