nyuchimzizi
Mzizi — an open-architecture project of the Bundu Foundation, operated and developed by Nyuchi. Built on the Five African Minerals palette.
Built by Nyuchi Africav4.0.39
Subscribe-to-read paywall with tier preview, price display, and CTA. Shows a blurred preview of gated content with clear upgrade path. Used in Novels for chapter unlocks and premium content across the platform.
View the full component source code below.
import * as React from "react"
import { cn } from "@/lib/utils"
interface SubscriptionGateProps extends React.ComponentProps<"div"> {
title?: string
description?: string
tierName?: string
price?: string
currency?: string
period?: string
features?: string[]
onSubscribe?: () => void
blurredPreview?: React.ReactNode
}
function SubscriptionGate({
title = "Premium Content", description, tierName, price, currency = "MXT", period = "month",
features, onSubscribe, blurredPreview, loading = false, className, ...props
}: SubscriptionGateProps) {
const { log, motion, LiveRegion } = useNyuchiHarness("subscription-gate")
const animStyle = React.useMemo(() => motion.prefersReduced ? {} : { animation: `nyuchi-fade-slide-up ${motion.enterDuration}ms ${motion.enterEasing} both` }, [motion])
return (
<div data-slot="subscription-gate" data-portal="https://design.nyuchi.com/components/subscription-gate" role="alert" aria-live="polite" className={cn("relative overflow-hidden rounded-[var(--radius-xl,17px)] border border-border", className)} {...props}>
{blurredPreview && (
<div className="pointer-events-none select-none blur-sm">{blurredPreview}</div>
)}
<div className={cn("flex flex-col items-center p-6 text-center", blurredPreview ? "absolute inset-0 bg-background/80 backdrop-blur-sm" : "bg-card")}>
<div className="text-base font-semibold" style={{ fontFamily: "var(--font-serif, serif)" }}>{title}</div>
{description && <p className="mt-1 text-xs text-muted-foreground max-w-xs">{description}</p>}
{price && (
<div className="mt-3">
<span className="text-2xl font-bold">{price}</span>
<span className="text-sm text-muted-foreground"> {currency}/{period}</span>
</div>
)}
{features && features.length > 0 && (
<ul className="mt-3 space-y-1 text-xs text-muted-foreground">
{features.map((f, i) => <li key={i} className="flex items-center gap-1.5"><span className="text-[var(--status-success, #22C55E)]">✓</span>{f}</li>)}
</ul>
)}
{onSubscribe && (
<button onClick={onSubscribe} className="mt-4 h-12 rounded-full bg-primary px-8 text-sm font-medium text-primary-foreground focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--color-primary,#00B0FF)] transition-colors hover:opacity-90">
{tierName ? `Subscribe to ${tierName}` : "Subscribe"}
</button>
)}
</div>
</div>
)
}
export { SubscriptionGate }
export type { SubscriptionGateProps }
npx shadcn@latest add https://mzizi.dev/api/v1/ui/subscription-gateFetch this component's metadata and source code from the registry API.
/api/v1/ui/subscription-gate