Components

Comparison Table

A data-driven feature comparison table — tiers × features with checks, dashes and values.

php artisan blatui:add comparison-table

Feature comparison across Hobby, Pro, Enterprise
Feature	Hobby	Pro	Enterprise
Projects	3	Unlimited	Unlimited
Custom domains
Preview deploys
Team seats	1	5	Unlimited
Rollbacks	3 days	Unlimited	Unlimited
SSO / SAML
Audit logs
SLA		99.9%	99.99%

<x-ui.comparison-table
    class="max-w-2xl"
    highlight="Pro"
    :tiers="['Hobby', 'Pro', 'Enterprise']"
    :rows="[
        ['feature' => 'Projects', 'values' => ['3', 'Unlimited', 'Unlimited']],
        ['feature' => 'Custom domains', 'values' => [true, true, true]],
        ['feature' => 'Preview deploys', 'values' => [true, true, true]],
        ['feature' => 'Team seats', 'values' => ['1', '5', 'Unlimited']],
        ['feature' => 'Rollbacks', 'values' => ['3 days', 'Unlimited', 'Unlimited']],
        ['feature' => 'SSO / SAML', 'values' => [false, false, true]],
        ['feature' => 'Audit logs', 'values' => [false, false, true]],
        ['feature' => 'SLA', 'values' => [false, '99.9%', '99.99%']],
    ]"
/>

API Reference

Props, slots and exposed methods for <x-ui.comparison-table>.

Props

Prop	Type	Default	Description
`tiers`*	`array`	`[]`	The column headers, one per plan or tier, e.g. ["Hobby", "Pro", "Enterprise"]. The values in each row line up with these by position.
`rows`*	`array`	`[]`	The feature rows. Each row pairs a feature name with one value per tier. See Each row below.
`highlight`	`string\|int`	—	The tier to emphasise, given as a tier name (matched against tiers) or a 0-based column index. Its header is colored and its cells get a subtle background.
`featureLabel`	`string`	`'Feature'`	The header text for the leftmost (feature name) column.

* Required.

Each row

Prop	Type	Default	Description
`feature`	`string`	—	The feature name shown in the leftmost column (the row header).
`values`	`array`	—	One value per tier, in the same order as tiers. Use true for a check icon, false or null for a "not included" dash, or any string/number to render as-is.