Comparison table

A fair “versus” block: one grid where every row lines up across the columns, your column drawn as a highlighted band of the same grid (the brand's tint and light, its header part of it), a small icon per question, each answer as a bold key phrase then its detail; the other answers stay neutral. On a phone, one card per question with the answers stacked.

Web · ✓Mobile · n/aBureau · ✓BêtaBlocs

import { ComparisonTable } from "@krizaka/ui/comparison-table";

QuestionA cloud assistantOrazaka

Where do your prompts go?To a provider's servers, under their terms.To your machines. A cloud model only if you connect one.

What do you pay?Per seat and per token, on their price list.Your hardware and credits. A Studio shows its estimate before it runs.

Who decides?The vendor changes models, limits and policies.You do: models, roles and what each team can run.

Where do your prompts go?
A cloud assistant
To a provider's servers, under their terms.
Orazaka
To your machines. A cloud model only if you connect one.
What do you pay?
A cloud assistant
Per seat and per token, on their price list.
Orazaka
Your hardware and credits. A Studio shows its estimate before it runs.
Who decides?
A cloud assistant
The vendor changes models, limits and policies.
Orazaka
You do: models, roles and what each team can run.

Web uniquement — React, depuis @krizaka/ui/comparison-table. Bêta : son API peut encore changer à une version mineure.

Mobile · n/a. A block of a public site's landing page; a phone app does not argue against a competitor.

Pourquoi il est là. Orazaka's « The same AI. Different ownership. » on dev.orazaka.com (the landing restructure, krizaka/orazaka#183), and every product's « why us ».

Quand l’utiliser

A landing page's “why us”: three to six questions answered by you and by the usual alternative.
Two or three options compared on the same few questions, one of them recommended.

Quand ne pas l’utiliser

For many rows of data to sort or filter.À la place : Data table
For plans with prices and features.À la place : Pricing page
For choices with their reasons and costs.À la place : Decision list

Installation

Installer

npm install @krizaka/ui @krizaka/tailwind @krizaka/tokens tailwindcss

Styles

@import "tailwindcss";
@import "@krizaka/tailwind";
@import "@krizaka/ui/tailwind.css";

Importer

import { ComparisonTable } from "@krizaka/ui/comparison-table";

Exemples

The same AI, different ownership

Three questions, a cloud assistant against Orazaka; resize to a phone: one card per question.

QuestionA cloud assistantOrazaka

Where do your prompts go?To a provider's servers, under their terms.To your machines. A cloud model only if you connect one.

What do you pay?Per seat and per token, on their price list.Your hardware and credits. A Studio shows its estimate before it runs.

Who decides?The vendor changes models, limits and policies.You do: models, roles and what each team can run.

Where do your prompts go?
A cloud assistant
To a provider's servers, under their terms.
Orazaka
To your machines. A cloud model only if you connect one.
What do you pay?
A cloud assistant
Per seat and per token, on their price list.
Orazaka
Your hardware and credits. A Studio shows its estimate before it runs.
Who decides?
A cloud assistant
The vendor changes models, limits and policies.
Orazaka
You do: models, roles and what each team can run.

Props

A comparison where your column is a highlighted band of the same grid — aligned rows, fair neutral answers, cards on a phone.

Prop	Type	Défaut	Description
`columns`requis	`readonly ComparisonColumn[]`	—	The answer columns, in order.
`highlight`requis	`string`	—	The column drawn as the highlighted band (yours).
`label`requis	`string`	—	The table's accessible name (the section's title), passed translated.
`rows`requis	`readonly ComparisonRow[]`	—	The questions, in order (three to six).
`topicLabel`requis	`string`	—	The first column's header (“Question”).
`reveal`	`boolean`	`true`	Stagger the rows' entrance with `[data-reveal]` (needs MotionObserver).

Accessibilité

Wide: a table named by label, with columnheader, rowheader and cell roles on the grid's cells (rows are display: contents).
Phone: a list of cards named by label, each answer a dt / dd pair named by its column — nothing depends on a header out of view.
The highlight is a tint, a border and the column's name — never colour alone. Rows rise in one after the other ([data-reveal="soft"], 70 ms apart); nothing moves under reduced motion.

Clavier

Touches	Action
`Tab`	Nothing to focus: a reading block.

Bonnes pratiques

Stay fair: the other column states facts, neutral — never crossed out, never mocked.
Keep every claim true today; an answer the product does not deliver yet is softened or left out.
Key phrase in bold (a few words), detail after it (one sentence); questions short enough for one or two lines.
Three to six rows; give each question an icon of the same family.

Générée depuis le code de @krizaka/ui 3.63.1 : son meta.ts, ses exemples et ses types.Modifier cette documentation sur GitHub