Fabrials UI

Loading state

Compare two plans

Personal

For individual projects

Projects: 3
Members: 1
Export data: Included

Team

For shared projects

Projects: Unlimited
Members: 10
Export data: Included

Plan features
Plan features	Personal For individual projects	Team For shared projects
Projects	3	Unlimited
Members	1	10
Export data	Included	Included

Pass columns and rows. Control highlights from your own state.

Any set of options

Columns, rows and optional highlights are controlled by your app. Product recommendations, cart state and tool registration belong to the example. Explore the shopping example

Installation

Add the registry entry to your app.
```
npx shadcn@latest add @fabrials/comparison
```
Without the named registry, use the address: https://ui.fabrials.com/r/comparison.json

API reference

Prop / export	Type	Description
`columns`	`ComparisonColumn[]`	Stable IDs, titles, visuals and optional actions. recommended: true marks the option the evidence points to (a Stormlight edge and a Best fit label).
`rows`	`ComparisonRow[]`	Values by column ID; highlight relevant evidence.
`caption`	`string`	Accessible table description.
`note`	`ReactNode`	Visible explanation of the current highlights.

Behavior

Controlled presentation. Register application-specific comparison tools with useWebMCPTool; use the same state for human controls and agent actions.

Accessibility

Keyboard and contrast

Keep visible labels, keyboard focus and status announcements when customizing. These components inherit your theme; maintain sufficient contrast in both color modes. The preview is keyboard operable.

Usage

Use stable column IDs as keys in each row’s values. Values, visuals and actions accept React nodes, so the same component can compare plans, products or settings.

TSX

import { Comparison } from "@/components/webmcp/comparison"; <Comparison  caption="Plan features"  columns={[    { id: "personal", title: "Personal" },    { id: "team", title: "Team", recommended: true },  ]}  rows={[    {      id: "members",      label: "Members",      values: { personal: "1", team: "10" },      highlighted: true,    },  ]}/>;

Comparison renders the evidence. Your application owns selection, recommendation rules and any side effects; mark the column your rules point to with recommended, so people see which option the highlighted rows support. It does not register tools or change application state by itself.

The shopping example combines Comparison with WebMCP tools, a compatible accessory, shared cart state and human review. For a different use case, see the project explorer or reservation flow.