Use FeatureComparisonTable.RowDescription to add context beneath a feature name. Descriptions can include links and emphasis.
| Name | Type | Default | required | Description |
|---|
children | FeatureComparisonTable.Heading, FeatureComparisonTable.Item, FeatureComparisonTable.Group | | true | Table title, plans, and feature groups |
One item per pricing plan to be displayed. Supports two to four plans.
| Name | Type | Default | required | Description |
|---|
children | FeatureComparisonTable.Label, FeatureComparisonTable.ItemHeading, FeatureComparisonTable.Description, FeatureComparisonTable.Price, FeatureComparisonTable.PrimaryAction, FeatureComparisonTable.SecondaryAction | | true | Plan content |
| Name | Type | Default | required | Description |
|---|
children | ReactNode | | true | Label text, such as “Recommended”. Adding a label highlights the plan column |
| Name | Type | Default | required | Description |
|---|
as | 'h1'
'h2'
'h3'
'h4'
'h5'
'h6'
| h2 | false | Heading level for the table title |
id | string | | false | Anchor target and accessible label reference |
children | ReactNode | | true | Table title |
Plan name, shown alongside feature values on smaller screens.
| Name | Type | Default | required | Description |
|---|
as | 'h1'
'h2'
'h3'
'h4'
'h5'
'h6'
| h3 | false | Heading level for the plan summary |
children | ReactNode | | true | Plan name |
| Name | Type | Default | required | Description |
|---|
children | ReactNode | | true | Plan description |
| Name | Type | Default | required | Description |
|---|
children | ReactNode | | true | Price text, such as “$4 per month” |
| Name | Type | Default | required | Description |
|---|
as | 'a'
'button'
| | true | Link or button element |
children | ReactNode | | true | Action label |
href | string | | false | Link destination. Required when as="a" |
| Name | Type | Default | required | Description |
|---|
children | FeatureComparisonTable.GroupHeading, FeatureComparisonTable.Row | | true | Group title and feature rows |
expanded | 'boolean'
'{narrow: boolean, regular: boolean, wide: boolean}'
| {narrow: false, regular: true, wide: true} | false | Initial expanded state, optionally set per viewport size |
| Name | Type | Default | required | Description |
|---|
as | 'h1'
'h2'
'h3'
'h4'
'h5'
'h6'
| h3 | false | Heading level |
id | string | | false | Anchor target for the group heading |
children | ReactNode | | true | Group title |
| Name | Type | Default | required | Description |
|---|
children | FeatureComparisonTable.RowHeading, FeatureComparisonTable.RowDescription, FeatureComparisonTable.Cell | | true | Feature name, optional description, and plan values |
| Name | Type | Default | required | Description |
|---|
children | ReactNode | | true | Feature name |
| Name | Type | Default | required | Description |
|---|
children | ReactNode | | true | Feature description |
Add one cell per plan, in the same order as the items.
| Name | Type | Default | required | Description |
|---|
children | ReactNode | | false | Feature value |
variant | 'included'
'unavailable'
'unlimited'
'refresh'
| | false | Included, unavailable, unlimited, or periodically renewed |
variantAriaLabel | string | | false | Accessible icon label. Use to translate “Included”, “Unavailable”, “Unlimited”, or “Refresh” |