81 Pro components and page blocks

Get Pro
uibrik

Comparison Table

Pro

Preview

Customize

Highlight0
Cross
Accent

Installation

Pro

Comparison Table is a Pro component

Sign in to see the source, or install it with a license key. The live preview and props above are free to explore.

Sign inGet Pro

Install with a key

  1. Add the Pro registry to components.json:
    components.json
    {
  "registries": {
    "@uibrik-pro": {
      "url": "https://uibrik.com/r/pro/{name}.json",
      "headers": { "Authorization": "Bearer ${UIBRIK_LICENSE}" }
    }
  }
}
  2. Put your key in .env.local and add that file to .gitignore:
    .env.local
    UIBRIK_LICENSE=your-license-key
  3. Install it:
    Terminal
    npx shadcn@latest add @uibrik-pro/comparison-table

Usage

import { ComparisonTable } from "@/components/uibrik/comparison-table/comparison-table";​const columns = [  { name: "Acme", icon: <IconBoltFilled size={16} />, cta: { label: "Get started" } },  { name: "Legacy suite", icon: <IconStack2Filled size={16} /> },  // …1 more];​const rows = [  { group: "Collaboration", feature: "Realtime editing", values: [true, false, false] },  { group: "Collaboration", feature: "Comments and mentions", values: [true, true, false] },  // …6 more];​<ComparisonTable  highlight={0}  missing="cross"  animate  hover  stickyHeader  accent=""  columns={columns}  rows={rows}  offset={0}  label="Feature"/>

Props

ComparisonTable
highlight
Type number
0
Index of the column raised as a card, usually yours. -1 for none.
missing
Type "cross" | "dash"
"cross"
How a missing feature is marked.
animate
Type boolean
true
Draw the checks in row by row when the table scrolls into view.
hover
Type boolean
true
A band follows the pointer from row to row.
stickyHeader
Type boolean
true
Keep the column names in view while the table scrolls.
accent
Type string
""
Colour for the highlighted column's logo, checks and button. Empty follows the text colour.
columns
Type { name: string; icon?: ReactNode; cta?: { label: string; href?: string; onClick?: () => void } }[]
3 sample columns
Products to compare, in order. `icon` sits in a tile above the name; `cta` adds a button at the foot of the column.
rows
Type { feature: string; values: (boolean | string)[]; group?: string }[]
8 sample rows
One value per column: true draws a check, false marks it missing, text shows as is. Rows sharing a group sit under one heading.
offset
Type number
0
Space kept clear above the sticky header, px, e.g. for a fixed navbar.
label
Type string
"Feature"
Header over the feature names, for screen readers.
className
Type string
–
Classes for the table.