Comparison — ARC UI

Components

Comparison

data

static

<arc-comparison>

Overview

Guidelines

When to use

Use for pricing tables, feature matrices, and plan comparisons
Keep feature labels concise — long labels compress the value columns
Highlight at most one column (the recommended tier) to guide user attention
Use boolean values ("true"/"false") for feature presence to get automatic check/cross icons
Ensure the features array and each column's values array have the same length

When not to use

Use for arbitrary data tables — use data-table instead for sortable/filterable data
Add more than 4-5 columns — the grid becomes too compressed on smaller screens
Mix boolean and text values in the same row — pick one format per feature
Forget to provide the features prop — without it, no rows will render

Features

CSS Grid layout with automatic column count based on slotted children
JSON-driven features and values — no complex DOM nesting required
Boolean rendering: "true" becomes a green check, "false" becomes a ghost X
Column highlighting with accent background for featured/recommended tiers
Row hover states for easy horizontal scanning
Accessible table roles (table, row, rowheader, columnheader, cell)
CSS parts for deep customization: table, header, cell, feature
Respects prefers-reduced-motion for transitions

Preview

Usage

<arc-comparison features='["Storage","Bandwidth","Custom Domain","Priority Support"]'>
  <arc-comparison-column
    heading="Free"
    values='["5 GB","10 GB","false","false"]'>
  </arc-comparison-column>
  <arc-comparison-column
    heading="Pro"
    highlight
    values='["100 GB","Unlimited","true","true"]'>
  </arc-comparison-column>
  <arc-comparison-column
    heading="Enterprise"
    values='["Unlimited","Unlimited","true","true"]'>
  </arc-comparison-column>
</arc-comparison>

import { Comparison, ComparisonColumn } from '@arclux/arc-ui-react';

function PricingTable() {
  const features = JSON.stringify(['Storage', 'Bandwidth', 'Custom Domain', 'Support']);

  return (
    <Comparison features={features}>
      <ComparisonColumn heading="Free" values='["5 GB","10 GB","false","false"]' />
      <ComparisonColumn heading="Pro" highlight values='["100 GB","Unlimited","true","true"]' />
      <ComparisonColumn heading="Enterprise" values='["Unlimited","Unlimited","true","true"]' />
    </Comparison>
  );
}

<script setup>
import { Comparison, ComparisonColumn } from '@arclux/arc-ui-vue';

const features = JSON.stringify(['Storage', 'Bandwidth', 'Custom Domain', 'Support']);
</script>

<template>
  <Comparison :features="features">
    <ComparisonColumn heading="Free" values='["5 GB","10 GB","false","false"]' />
    <ComparisonColumn heading="Pro" highlight values='["100 GB","Unlimited","true","true"]' />
    <ComparisonColumn heading="Enterprise" values='["Unlimited","Unlimited","true","true"]' />
  </Comparison>
</template>

<script>
  import { Comparison, ComparisonColumn } from '@arclux/arc-ui-svelte';

  const features = JSON.stringify(['Storage', 'Bandwidth', 'Custom Domain', 'Support']);
</script>

<Comparison {features}>
  <ComparisonColumn heading="Free" values='["5 GB","10 GB","false","false"]' />
  <ComparisonColumn heading="Pro" highlight values='["100 GB","Unlimited","true","true"]' />
  <ComparisonColumn heading="Enterprise" values='["Unlimited","Unlimited","true","true"]' />
</Comparison>

import { Component } from '@angular/core';
import { Comparison, ComparisonColumn } from '@arclux/arc-ui-angular';

@Component({
  imports: [Comparison, ComparisonColumn],
  template: `
    <Comparison [features]="features">
      <ComparisonColumn heading="Free" values='["5 GB","10 GB","false","false"]' />
      <ComparisonColumn heading="Pro" highlight values='["100 GB","Unlimited","true","true"]' />
      <ComparisonColumn heading="Enterprise" values='["Unlimited","Unlimited","true","true"]' />
    </Comparison>
  `,
})
export class PricingComponent {
  features = JSON.stringify(['Storage', 'Bandwidth', 'Custom Domain', 'Support']);
}

import { Comparison, ComparisonColumn } from '@arclux/arc-ui-solid';

const features = JSON.stringify(['Storage', 'Bandwidth', 'Custom Domain', 'Support']);

<Comparison features={features}>
  <ComparisonColumn heading="Free" values='["5 GB","10 GB","false","false"]' />
  <ComparisonColumn heading="Pro" highlight values='["100 GB","Unlimited","true","true"]' />
  <ComparisonColumn heading="Enterprise" values='["Unlimited","Unlimited","true","true"]' />
</Comparison>

import { Comparison, ComparisonColumn } from '@arclux/arc-ui-preact';

const features = JSON.stringify(['Storage', 'Bandwidth', 'Custom Domain', 'Support']);

<Comparison features={features}>
  <ComparisonColumn heading="Free" values='["5 GB","10 GB","false","false"]' />
  <ComparisonColumn heading="Pro" highlight values='["100 GB","Unlimited","true","true"]' />
  <ComparisonColumn heading="Enterprise" values='["Unlimited","Unlimited","true","true"]' />
</Comparison>

API

Prop	Type	Default	Description
`features`	`string`	`'[]'`	JSON array of feature label strings, e.g. '["Storage","Bandwidth","Support"]'. Each entry becomes a row in the comparison grid.

ComparisonColumn

<arc-comparison-column>

Data-holder child element that defines a single column in the comparison grid. Renders nothing visible — it provides heading, highlight, and values data to the parent.

Prop	Type	Default	Description
`heading`	`string`	`''`	Column header text displayed at the top of this column (e.g., "Free", "Pro").
`highlight`	`boolean`	`false`	When true, adds an accent background to the header and all cells in this column.
`values`	`string`	`'[]'`	JSON array of values matching the features order. Use "true"/"false" for check/cross icons, or any string for text values.