Theme Preview

1import { ThemeCompare, ThemePreviewToggle } from "@/registry/ui/theme-preview";
2
3function PricingCard() {
4  return (
5    <div className="mx-auto max-w-sm rounded-3xl border border-border bg-card p-6 text-card-foreground shadow-xl">
6      <div className="mb-6">
7        <p className="text-sm font-medium text-muted-foreground">Pro</p>
8        <h3 className="mt-2 text-3xl font-bold tracking-tight">£9/mo</h3>
9        <p className="mt-2 text-sm text-muted-foreground">
10          For builders who want premium components and showcase utilities.
11        </p>
12      </div>
13
14      <button className="w-full rounded-2xl bg-primary px-4 py-3 text-sm font-semibold text-primary-foreground shadow-sm transition hover:opacity-90">
15        Upgrade now
16      </button>
17    </div>
18  );
19}
20
21export function ThemePreviewExample() {
22  return (
23    <main className="space-y-10 p-8">
24      <ThemePreviewToggle minHeight={360}>
25        <div className="grid min-h-screen place-items-center p-8">
26          <PricingCard />
27        </div>
28      </ThemePreviewToggle>
29
30      <ThemeCompare minHeight={360}>
31        <div className="grid min-h-screen place-items-center p-8">
32          <PricingCard />
33        </div>
34      </ThemeCompare>
35    </main>
36  );
37}