Design KitComponentv0.3.0

NBTable / ComparisonTable

Readable tables for specs and plan comparisons.

All componentsKit overviewContact

When to use

Use when users must compare structured data quickly (features/specs/plans).

Import

Import
tsx
import NBTable from "@/components/NBTable";
import ComparisonTable from "@/components/ComparisonTable";

Example

Example
tsx
import ComparisonTable from "@/components/ComparisonTable";

<ComparisonTable
  columns={["Feature", "Core", "Pro"]}
  rows={[{ feature: "Docs", values: ["✓", "✓"] }]}
  highlight={2}
/>

Live preview

Example comparison table
FeatureCorePlusBestPro
Readable tables✓✓✓
Captions✓✓✓
Highlight column—✓✓
Example specs table
TokenMeaning
--mhc-hl-yellowEmphasis
--mhc-shadowHard shadow

Live preview

People also ask

Where do I import NBTable / ComparisonTable from?

Use: import NBTable from "@/components/NBTable"; import ComparisonTable from "@/components/ComparisonTable";

How do I keep it multi-domain safe?

Don’t hardcode domains in metadata/JSON-LD. Use getSiteUrl() + toAbsoluteUrl().

Design kit

Turn this into a sellable export

If you want the “packaged kit” (versioning, license, exportable docs and components), we can scope the release pipeline.

ContactAll components