Carregando…Carregando…Carregando…Carregando…Feature comparison table with highlighted columns, group headers and check/cross values.
$ npx kikitocn add comparison-table@/lib/utilsimport { ComparisonTable } from "@/components/ui/cn/comparison-table/ComparisonTable";
export function ComparisonTableExample() {
return (
<ComparisonTable />
);
}| Prop | Tipo | Padrão | Descrição |
|---|---|---|---|
columns* | ComparisonColumn[] | — | Colunas: { key, label, highlight?, badge? } |
rows* | ComparisonRow[] | — | Linhas: { feature, group?, values: Record<key, boolean|string|ReactNode> } |
stickyHeader | boolean | false | Fixa o cabeçalho ao rolar |
Comparison Table — feature matrix with highlighted column
Free | ProPopular | Team | |
|---|---|---|---|
| Features | |||
Projects | 3 | Unlimited | Unlimited |
Team members | 1 | 5 | Unlimited |
Storage | 1 GB | 50 GB | 500 GB |
| Collaboration | |||
Sharing | ✕ | ✓ | ✓ |
Comments | ✕ | ✓ | ✓ |
Roles & permissions | ✕ | ✕ | ✓ |
| Support | |||
Email support | ✕ | ✓ | ✓ |
Priority support | ✕ | ✕ | ✓ |