Comparison table — feature-by-feature grid for plan/product comparison.
Inspired by pricing page tables in shadcn blocks and PricingCard grid patterns. Common use cases: SaaS pricing pages, product spec sheets, feature matrices.
Highlighted columns (:highlighted: true in plan map) receive a distinct
background and border to draw attention to a recommended plan.
Examples
<.comparison_table
plans={[
%{name: "Starter", highlighted: false},
%{name: "Pro", highlighted: true},
%{name: "Enterprise", highlighted: false}
]}
features={[
%{label: "Users", values: ["1", "Up to 10", "Unlimited"]},
%{label: "API Access", values: [false, true, true]},
%{label: "SLA", values: [false, false, "99.99%"]}
]}
/>Summary
Functions
Attributes
plans(:list) (required) - List of plan maps with:name(string) and:highlighted(boolean).features(:list) (required) - List of feature maps with:label(string) and:values([true|false|string]) — one value per plan, in the same order as:plans.class(:string) - Additional CSS classes for the root element. Defaults tonil.- Global attributes are accepted. HTML attributes forwarded to the root
<div>.
Slots
footer- Optional content rendered below the table.