A feature matrix with grouped rows, a sticky header and a glowing highlighted column. Rows highlight on hover and the table turns into stacked cards in narrow containers.
Compare
The same features you would spend a quarter wiring together, on by default and priced per project.
| Feature | RelayRecommended | Legacy CDN | Build it yourself |
|---|---|---|---|
| Performance | |||
| Global edge locations | 310 | 84 | Up to you |
| Median cold start | 4 ms | 240 ms | 1.2 s |
| On-the-fly image optimization | |||
| HTTP/3 and early hints | Partial | ||
| Developer experience | |||
| Deploy on git push | |||
| Preview URL for every branch | |||
| One-click rollbacks | Manual | ||
| Security | |||
| Always-on DDoS mitigation | |||
| SOC 2 Type II report | |||
| Managed TLS certificates | Paid add-on | ||
Global edge locations
Median cold start
On-the-fly image optimization
HTTP/3 and early hints
Deploy on git push
Preview URL for every branch
One-click rollbacks
Always-on DDoS mitigation
SOC 2 Type II report
Managed TLS certificates
npx shadcn@latest add https://hyperblur.dev/r/comparison-table.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/comparison-table.tsx.
import { ComparisonTable } from "@/components/hyperblur/comparison-table"
<ComparisonTable stickyOffset={64} />| Prop | Type | Default | Description |
|---|---|---|---|
| eyebrow | string | "Compare" | Small label above the title. Empty hides it. |
| title | string | "Why teams move their sites to Relay" | Section heading. |
| subtitle | string | Paragraph next to the heading. | |
| columns | { name: string; highlight?: boolean; note?: string }[] | Relay, Legacy CDN, Build it yourself | Products being compared. The highlighted one gets the glowing column and the note badge. |
| groups | { name: string; rows: { label: string; values: (boolean | string)[] }[] }[] | Performance, Developer experience, Security | Row groups. values line up with columns: true shows a check, false a dash, a string shows as text. |
| stickyOffset | number | 0 | Top offset in pixels for the sticky header, for pages with a fixed navbar. |
| cta | { label: string; href: string } | null | { label: "Deploy your first site", href: "#" } | Button under the table. null hides it. |
| secondaryCta | { label: string; href: string } | null | { label: "Read the migration guide", href: "#" } | Text link next to the button. null hides it. |
| accent | string | "#2f7bff" | Highlighted column and check color. |
| className | string | "" | Extra classes for the section element. |
| style | CSSProperties | Inline styles merged after the accent variable. |