Touchstone

Feature comparison matrix in two modes — plans (3–4 pricing columns) or versus (your product framed in the accent against alternatives). Collapsible row groups, a sticky name/price/CTA header that frosts once pinned, checks that draw in row by row, row hover with floating hints, column-header dimming, and a one-column view with a segmented picker and swipe under 640px. Real table semantics.

motionpro

Hover a row — narrow the window to compare one plan at a time.

Compare plans

Every plan, line by line

Start free and upgrade when your team grows. Every plan includes unlimited viewers.

Every plan, line by line
Feature	Starter $0 For solo makers	Most popular Growth $29/seat/mo Billed yearly	Scale $79/seat/mo Billed yearly	Enterprise Custom Volume pricing



ProjectsActive projects at once. Archived projects never count.	3	Unlimited	Unlimited	Unlimited
Seats included	1	5	20	Custom
File storagePooled across the workspace, not per seat.	2 GB	100 GB	1 TB	Unlimited
Version historyRestore any page or file to an earlier state.	7 days	90 days	1 year	Unlimited
Guest accessInvite clients to view and comment without a paid seat.	Not included	Included	Included	Included

Real-time editing	Included	Included	Included	Included
Comments & mentions	Included	Included	Included	Included
Shared templatesGrowth includes 10 shared templates; Scale and up are unlimited.	Not included	Partially included	Included	Included
Approval flowsRoute work through reviewers before it ships.	Not included	Not included	Included	Included
Custom rolesScale adds editor and reviewer roles; Enterprise lets you define your own.	Not included	Not included	Partially included	Included

SSO / SAMLSign in with your identity provider and enforce it for every member.	Not included	Not included	Included	Included
Audit logGrowth keeps 30 days of events; Scale and up keep a full, exportable history.	Not included	Partially included	Included	Included
Uptime SLA	Not included	Not included	99.9%	99.99%
SupportPriority replies within 4 business hours.	Community	Email	Priority	Dedicated

Prices in USD. Taxes may apply.

Installation

CLI

npx shadcn@latest add @crucible/touchstone

Manual — install dependencies, then copy the source

npm install motion

Props

Prop	Type	Default	Description
mode	"plans" \| "versus"	"plans"	`"plans"` compares 3–4 pricing plans; `"versus"` compares your product (the highlighted column) against 2–3 alternatives. Also picks the sample data when `columns`/`groups` are omitted.
columns	TouchstoneColumn[]		Column definitions. Omit for sample data matching `mode`.
groups	TouchstoneGroup[]		Grouped feature rows. Omit for sample data matching `mode`.
eyebrow	React.ReactNode		Small label above the title. Pass `null` to hide.
title	React.ReactNode		Section heading. Pass `null` to hide the header block.
subtitle	React.ReactNode		Supporting line under the title.
footnote	React.ReactNode		Muted footnote beside the legend.
defaultCollapsed	string[]	[]	Group labels collapsed on first render.
onGroupToggle	(label: string, open: boolean) => void		Fires when a group is expanded or collapsed.
onColumnChange	(index: number) => void		Fires when the narrow-view column changes (picker or swipe).
stickyOffset	number	0	Distance from the top of the scroll container where the column header pins, in px (e.g. a fixed navbar).
accentColor	string	"#e9c46a"	The single signature accent — highlight frame, checks in the highlighted column, primary CTA, focus rings.
ref	React.Ref<TouchstoneHandle>		Imperative handle (`replay()`, `expandAll()`, `collapseAll()`, `showColumn()`). React 19 ref-as-prop.
className	string		Extra classes for the `<section>` root.
Also accepts all props of `Omit<React.ComponentPropsWithoutRef<"section">, "children" \| "title">` — they pass through to the underlying element.

Honors prefers-reduced-motion with a designed static fallback, and passes className through.

Touchstone

The preview is live. The source is Pro.

Installation

Props