pattern-pricing — $ plan --compare

The `$ plan --compare` section: the comparison matrix rides the Table family (consumer authors thead/tbody; the recommended column opts in with data-jx-recommended on the th AND its td's — pattern css paints brand inset rules that keep the row-hover law intact), each tier's install command rides a CodeCard with a copy PressButton in its footer, plan labels ride Badge. Commands/labels are value-domain payload; no atom is patched.

table family matrix code-card install rows badge plan labels recommended column law

pattern-pricing

The comparison section: the matrix rides the Table family (container-query laws intact — narrow the stage and the frame folds to card rows), each tier's install command rides a code-card, and the recommended tier is one paint law: brand rules flank the opted-in column (the head cell takes the 14% brand tint, the flanked cells carry the 2px inset rules both sides — measured); the tier code-cards themselves stay uniform by design (the pattern css implements the column law only).

$ plan --compare

plans — feature matrix
plan	price	seats	support	source access
solo	$0	1	community	fork freely
team	$12	unlimited	priority lane	fork freely
self-host	$99	unlimited	same-day	private registry

solo per seat / month

npx jixoai-ui add --tier solo

team per seat / month

npx jixoai-ui add --tier team

self-host flat / year

npx jixoai-ui add --tier self-host

pattern-pricing-usage.svelte svelte

<script lang="ts">
  import PatternPricing from '@ui/pattern-pricing.svelte';
  import type { PricingTier } from '@ui/pattern-pricing.svelte';
</script>

<PatternPricing caption="plans — feature matrix" tiers={tiers}>
  <thead>
    <tr>
      <th>plan</th>
      <th>price</th>
      <th data-jx-recommended="">seats</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>solo</td><td>$0</td><td data-jx-recommended="">1</td>
    </tr>
  </tbody>
</PatternPricing>

composition

Authoring the matrix

Structure is yours, paint is the pattern's: rows stay authored content, the recommended column is a consumer opt-in, and the tier cards are payload.

the comparison table is the children snippet — author thead/tbody/tfoot exactly as the Table docs teach; the pattern adds no row machinery
data-jx-recommended on the th AND its td's opts a column into the brand paint (rules + tinted head); row hover keeps flowing — the recommended cells never paint a background over it
tiers is value-domain payload: plan label, install command, recommended flag, note — code strings, the legal prop category
the heading stays OUT of the pattern on purpose — your page owns its h2; the pattern opens at the $ plan --compare eyebrow

usage

Usage

One section: authored matrix + tier payload. The recommended column is the opt-in, not a prop.

pattern-pricing usage

<script lang="ts">
  import PatternPricing from '@ui/pattern-pricing.svelte';
  import type { PricingTier } from '@ui/pattern-pricing.svelte';
</script>

<PatternPricing caption="plans — feature matrix" tiers={tiers}>
  <thead>
    <tr>
      <th>plan</th>
      <th>price</th>
      <th data-jx-recommended="">seats</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>solo</td><td>$0</td><td data-jx-recommended="">1</td>
    </tr>
  </tbody>
</PatternPricing>

axes

Universal props

The eight-axis surface (explicit-props): size · shape · radius · density · color · theme · elevation · motion — each axis takes named steps, auto (inherit the ambient context; stamps nothing), an exact number (px · coefficient · dp · hue per axis), or query() for responsive/container-conditional values. FIRST-TIME contract, all no-own: a composition product — the size axis scales the section root, the Table/Badge/CodeCard surfaces ride the ambient chain (吃也供).

PatternPricing · universal props

$ plan --compare

plans — feature matrix
plan	source
core	yours

core

npx jixoai-ui add button

$ plan --compare

plans — feature matrix
plan
pro

pro

npx jixoai-ui add dialog

pattern-pricing-universal.svelte svelte

<PatternPricing size={18} density="small">…</PatternPricing>

api

API

PatternPricing props and the PricingTier payload type.

Properties

Property	Type	Default	Description
tiers *	readonly PricingTier[]	—	Per-tier install cards: plan, command, recommended?, note?.
children *	Snippet	—	The comparison matrix — author thead/tbody (the Table contract).
eyebrow	string	'$ plan --compare'	The section's mono eyebrow line.
caption	string	'plans — feature matrix'	The Table caption (the matrix's visible title).
PricingTier.plan *	string	—	The plan label (badge + aria name of the copy control).
PricingTier.command *	string	—	The copyable install command (the card's code payload).
PricingTier.recommended	boolean	false	Brand-hue paint on the tier card; pair with the table column opt-in.
PricingTier.note	string	—	Muted qualifier under the plan label.
class	string	''	Class passthrough to the section root.

Universal props

Property	Type	Default	Description
size	'small' \| 'medium' \| 'large' \| 'auto' \| number	'auto' · ambient scope	the base scale — root font-size; parts size in em
shape	'round' \| 'scoop' \| 'bevel' \| 'notch' \| 'square' \| 'squircle' \| 'auto'	'auto' · ambient scope	corner geometry (CSS corner-shape; §14 degrade table)
radius	'small' \| 'medium' \| 'large' \| 'auto' \| number	'auto' · ambient scope	corner size; auto = the concentric broadcast (§3)
density	'small' \| 'medium' \| 'large' \| 'auto' \| number	'auto' · ambient scope	spacing/leading scale over the kernel channels (§4)
color	'primary' \| 'secondary' \| 'error' \| 'warn' \| 'success' \| 'info' \| 'auto' \| number \| string	'auto' · ambient scope	the hue axis of the fixed oklch primary system (§5)
theme	'light' \| 'dark' \| 'system' \| 'auto'	'auto' · ambient scope	light/dark profile; system = the JS-mutable global (§6)
elevation	'level-1' \| 'level0' \| 'level1' \| 'level2' \| 'level3' \| 'level4' \| 'level5' \| 'auto' \| number	'auto' · ambient scope	official M3 levels over the surface ladder (§7)
motion	'reduced' \| 'subtle' \| 'normal' \| 'expressive' \| 'auto' \| number	'auto' · ambient scope	intensity across the motion kernels (§8)