Feature Comparison
A complete feature comparison section, ready to adapt to your product.
Make it yours.
Install the editable source and its dependencies into your React + Tailwind project.
Scroll horizontally for long lines
pnpm dlx shadcn@4.0.8 add http://localhost:3000/r/feature-comparison.jsonUse it
Scroll horizontally for long lines
"use client";
import { FeatureComparison } from "@/components/jez-ui/blocks/feature-comparison";
export default function Example() {
return (
<>
<FeatureComparison />
</>
);
}
Compose your own
These styled parts are included in the same install. Use children to build your layout; add className only when you want an override.
Scroll horizontally for long lines
import { FeatureComparison, FeatureComparisonTitle, FeatureComparisonDescription, FeatureComparisonContent } from "@/components/jez-ui/blocks/feature-comparison";Props & types
Scroll horizontally for long lines
export type FeatureComparisonPlan = {
id: string;
name: React.ReactNode;
price: React.ReactNode;
action?: React.ReactNode;
};
export type FeatureComparisonRow = {
id: string;
label: React.ReactNode;
group?: React.ReactNode;
values: Record<string, React.ReactNode>;
};
export type FeatureComparisonOptions = {
title?: React.ReactNode;
description?: React.ReactNode;
plans?: FeatureComparisonPlan[];
rows?: FeatureComparisonRow[];
caption?: string;
onSelect?: (plan: string) => void;
highlightedPlan?: string;
};
export type FeatureComparisonProps = Omit<
React.ComponentProps<"section">,
keyof FeatureComparisonOptions
> &
FeatureComparisonOptions;
FeatureComparisonPropsSource
View 3 source files
registry/blocks/feature-comparison.tsx
Scroll horizontally for long lines
"use client";
import * as React from "react";
import { cn } from "../ui/utils";
import { Button } from "../ui/button";
export type FeatureComparisonPlan = {
id: string;
name: React.ReactNode;
price: React.ReactNode;
action?: React.ReactNode;
};
export type FeatureComparisonRow = {
id: string;
label: React.ReactNode;
group?: React.ReactNode;
values: Record<string, React.ReactNode>;
};
const defaultPlans: FeatureComparisonPlan[] = [
{
id: "Personal",
name: "Personal",
price: (
<>
£8<span className="text-xs"> / month</span>
</>
),
},
{
id: "Studio",
name: "Studio",
price: (
<>
£32<span className="text-xs"> / month</span>
</>
),
},
];
const defaultRows: FeatureComparisonRow[] = [
{
id: "projects",
group: "Workspace",
label: "Projects",
values: { Personal: "3", Studio: "Unlimited" },
},
{
id: "people",
label: "Collaborators",
values: { Personal: "1", Studio: "Unlimited" },
},
{
id: "domains",
group: "Publishing",
label: "Custom domains",
values: { Personal: "1", Studio: "Unlimited" },
},
{
id: "branding",
label: "Remove branding",
values: { Personal: "No", Studio: "Yes" },
},
{
id: "history",
group: "Support",
label: "Version history",
values: { Personal: "7 days", Studio: "Unlimited" },
},
{
id: "support",
label: "Support channel",
values: { Personal: "Community", Studio: "Priority email" },
},
];
export type FeatureComparisonOptions = {
title?: React.ReactNode;
description?: React.ReactNode;
plans?: FeatureComparisonPlan[];
rows?: FeatureComparisonRow[];
caption?: string;
onSelect?: (plan: string) => void;
highlightedPlan?: string;
};
export type FeatureComparisonProps = Omit<
React.ComponentProps<"section">,
keyof FeatureComparisonOptions
> &
FeatureComparisonOptions;
export function FeatureComparison({
className,
title = "Compare the details.",
description = "Illustrative plans · GBP per workspace, billed monthly.",
plans = defaultPlans,
rows = defaultRows,
caption = "Plan features",
highlightedPlan = "Studio",
onSelect,
children,
...props
}: FeatureComparisonProps) {
const [message, setMessage] = React.useState("");
return (
<section {...props} className={cn("min-w-0 py-8", className)}>
{children !== undefined ? (
children
) : (
<>
<FeatureComparisonTitle>{title}</FeatureComparisonTitle>
<FeatureComparisonDescription>
{description}
</FeatureComparisonDescription>
<FeatureComparisonContent
role="region"
aria-label={caption}
tabIndex={0}
>
<table className="w-full min-w-[540px] border-collapse text-left text-sm">
<caption className="sr-only">{caption}</caption>
<thead>
<tr className="border-b border-border">
<th scope="col" className="p-4">
Included
</th>
{plans.map((plan) => (
<th
scope="col"
key={plan.id}
className={cn(
"p-4",
plan.id === highlightedPlan && "bg-muted",
)}
>
<span className="block text-lg">{plan.name}</span>
<span className="mt-2 block text-3xl font-normal">
{plan.price}
</span>
</th>
))}
</tr>
</thead>
<tbody>
{rows.map((row) => (
<tr key={row.id} className="border-b border-border">
<th scope="row" className="p-4 font-normal">
{row.group && (
<span className="mb-2 block font-semibold">
{row.group}
</span>
)}
{row.label}
</th>
{plans.map((plan) => (
<td
key={plan.id}
className={cn(
"p-4",
plan.id === highlightedPlan && "bg-muted",
)}
>
{row.values[plan.id] ?? "—"}
</td>
))}
</tr>
))}
</tbody>
<tfoot>
<tr>
<td />
{plans.map((plan) => (
<td
key={plan.id}
className={cn(
"p-4",
plan.id === highlightedPlan && "bg-muted",
)}
>
{plan.action !== undefined ? (
plan.action
) : (
<Button
variant={
plan.id === highlightedPlan ? "primary" : "outline"
}
onClick={() =>
onSelect
? onSelect(plan.id)
: setMessage(
`${plan.id} selected. Demo only; no purchase made.`,
)
}
>
Choose {plan.name}
</Button>
)}
</td>
))}
</tr>
</tfoot>
</table>
</FeatureComparisonContent>
<p role="status" className="mt-4 text-sm">
{message}
</p>
</>
)}
</section>
);
}
export function FeatureComparisonTitle({
className,
...props
}: React.ComponentProps<"h2">) {
return (
<h2
data-slot="feature-comparison-title"
className={cn("text-4xl tracking-tight", className)}
{...props}
/>
);
}
export function FeatureComparisonDescription({
className,
...props
}: React.ComponentProps<"p">) {
return (
<p
data-slot="feature-comparison-description"
className={cn("mt-4 text-sm text-muted-foreground", className)}
{...props}
/>
);
}
export function FeatureComparisonContent({
className,
...props
}: React.ComponentProps<"div">) {
return (
<div
data-slot="feature-comparison-content"
className={cn("mt-8 overflow-x-auto", className)}
{...props}
/>
);
}
registry/ui/utils.ts
Scroll horizontally for long lines
import { clsx, type ClassValue } from "clsx";
import { twMerge } from "tailwind-merge";
export function cn(...values: ClassValue[]) {
return twMerge(clsx(values));
}
registry/ui/button.tsx
Scroll horizontally for long lines
"use client";
import * as React from "react";
import { Slot } from "radix-ui";
import { LoaderCircle } from "lucide-react";
import { cn } from "./utils";
export type ButtonProps = React.ComponentProps<"button"> & {
variant?: "primary" | "secondary" | "outline" | "ghost" | "danger";
size?: "sm" | "md" | "lg";
loading?: boolean;
asChild?: boolean;
};
export function Button({
variant = "primary",
size = "md",
loading,
asChild,
className,
children,
disabled,
...props
}: ButtonProps) {
const Comp = asChild ? Slot.Root : "button";
return (
<Comp
type={asChild ? undefined : "button"}
disabled={asChild ? undefined : disabled || loading}
aria-disabled={disabled || loading || undefined}
aria-busy={loading || undefined}
className={cn(
"relative inline-flex shrink-0 items-center justify-center gap-2 whitespace-nowrap rounded-lg border border-transparent text-sm font-medium leading-none transition-[background-color,border-color,box-shadow,transform] duration-150 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary active:scale-[.98] disabled:pointer-events-none disabled:opacity-45 aria-disabled:pointer-events-none [&_svg]:shrink-0",
{
"bg-primary text-primary-foreground shadow-[inset_0_1px_0_#ffffff26,0_1px_2px_#00000012] hover:bg-primary/90":
variant === "primary",
"border-border/60 bg-muted text-foreground hover:bg-muted/70":
variant === "secondary",
"border-border bg-background text-foreground shadow-sm hover:bg-muted/60":
variant === "outline",
"text-muted-foreground hover:bg-muted hover:text-foreground":
variant === "ghost",
"bg-danger text-danger-foreground hover:bg-danger/90":
variant === "danger",
},
{
"h-8 px-3 text-xs": size === "sm",
"h-10 px-4": size === "md",
"h-12 px-6": size === "lg",
},
className,
)}
{...props}
>
{asChild ? (
children
) : (
<>
<span
className={cn(
"inline-flex min-w-0 flex-1 items-center justify-center gap-2",
loading && "invisible",
)}
>
{children}
</span>
{loading && (
<LoaderCircle
aria-hidden="true"
className="absolute size-4 animate-spin motion-reduce:animate-none"
/>
)}
</>
)}
</Comp>
);
}
Dependencies
clsx@2.1.1 · tailwind-merge@3.5.0 · radix-ui@1.6.7 · lucide-react@0.577.0
Accessibility & behaviour
Provide meaningful labels and preserve keyboard focus styles. Check contrast when customising theme colours.
Read the accessibility and performance guide →