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/aDesktop · ✓BetaBlocks

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 only — React, from @krizaka/ui/comparison-table. Beta: its API may still change in a minor version.

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

Why it is here. Orazaka's « The same AI. Different ownership. » on dev.orazaka.com (the landing restructure, krizaka/orazaka#183), and every product's « why us ».

When to use

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.

When not to use

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

Installation

Install

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

Styles

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

Import

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

Examples

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	Default	Description
`columns`required	`readonly ComparisonColumn[]`	—	The answer columns, in order.
`highlight`required	`string`	—	The column drawn as the highlighted band (yours).
`label`required	`string`	—	The table's accessible name (the section's title), passed translated.
`rows`required	`readonly ComparisonRow[]`	—	The questions, in order (three to six).
`topicLabel`required	`string`	—	The first column's header (“Question”).
`reveal`	`boolean`	`true`	Stagger the rows' entrance with `[data-reveal]` (needs MotionObserver).

Accessibility

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.

Keyboard

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

Best practices

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.

Generated from the code of @krizaka/ui 3.63.1: its meta.ts, its examples and its types.Edit this documentation on GitHub