Comparison

A comparison table for pricing tiers, feature breakdowns, or before/after comparisons. Each column is defined with an arc-comparison-column child element.

Components

Comparison

data

static

<arc-comparison>

Overview

Comparison renders a structured grid of feature rows and value columns, for pricing tables, plan comparisons, and feature matrices. The parent `arc-comparison` element accepts a JSON array of feature labels, while each slotted `arc-comparison-column` child provides a heading and a matching JSON array of values. Boolean values render as check marks or crosses: pass `"true"` or `"false"` as string values and the component renders accessible SVG icons in success/ghost colors. Any other string value is displayed as-is, so you can mix comparison data (e.g. "5 GB", "Unlimited", "true"). The `highlight` attribute on a column adds a subtle accent background to both the header and all cells in that column, to draw the eye to the recommended tier. The component uses CSS Grid for column sizing and has row hover states.

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

Do not use for arbitrary data tables. Use data-table for sortable/filterable data
Do not add more than 4-5 columns; the grid gets too compressed on smaller screens
Do not mix boolean and text values in the same row. Pick one format per feature
Do not 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, with no complex DOM nesting
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 horizontal scanning
Accessible table roles (table, row, rowheader, columnheader, cell)
CSS parts for customization: table, header, cell, feature
Respects `prefers-reduced-motion` for transitions

Preview

Usage

Comparison is in the marketing domain group, so it is absent from the default @arclux/arc-ui barrel. Import it from@arclux/arc-ui/marketing, or from its own subpath@arclux/arc-ui/comparison. Everything else (the element, the CSS, the framework wrappers, the support it gets) is unchanged.

<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: `
    <arc-comparison [features]="features">
      <arc-comparison-column heading="Free" values='["5 GB","10 GB","false","false"]' />
      <arc-comparison-column heading="Pro" highlight values='["100 GB","Unlimited","true","true"]' />
      <arc-comparison-column heading="Enterprise" values='["Unlimited","Unlimited","true","true"]' />
    </arc-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

featuresstring[]=[]: Feature label strings, one row each. Settable as a property, or as a JSON array in markup: features='["Storage","Bandwidth"]'. A malformed value falls back to an empty list rather than throwing.

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.

headingstring='': Column header text displayed at the top of this column (e.g., "Free", "Pro").
highlightboolean=false: When true, adds an accent background to the header and all cells in this column.
valuesstring[]=[]: Values matching the features order. Settable as a property, or as a JSON array in markup. Use "true"/"false" for check/cross icons, or any string for text values.

Comparison

Overview

Guidelines

When to use

When not to use

Features

Preview

Usage

API

ComparisonColumn

See Also

Docs

Project

Arclight