ExploreComponents 3D architecture Observability

DocumentationDocs home Installation CLI Theming API reference Contributing

DeveloperRegistry API OpenAPI MCP server

nyuchimzizi

Mzizi — an open-architecture project of the Bundu Foundation, operated and developed by Nyuchi. Built on the Five African Minerals palette.

mukoko — consumermukoko.com weather news lingo nhimbe shamwari

nyuchi — enterprisenyuchi.com bushtrade

Built by Nyuchi Africav4.0.39

Source Code

View the full component source code below.

"use client"

import * as React from "react"
import { Check } from "@/lib/icons"

import { cn } from "@/lib/utils"

function SubscriptionCard({ loading = false,
  name,
  price,
  period,
  features,
  highlighted = false,
  onSelect,
  className,
  ...props
}: {
  name: string
  price: string
  period: string
  features: string[]
  highlighted?: boolean
  onSelect?: () => void
} & React.ComponentProps<"div">) {
  if (loading) return (<div data-slot="subscription-card" data-portal="https://design.nyuchi.com/components/subscription-card" role="article" data-loading className="animate-pulse rounded-[var(--radius-lg,14px)] bg-card p-4 ring-1 ring-foreground/10 space-y-3"><div className="h-4 w-2/3 rounded bg-muted" /><div className="h-3 w-full rounded bg-muted" /><div className="h-3 w-1/2 rounded bg-muted" /></div>)

  return (
    <div
      data-slot="subscription-card" role="article"
      data-highlighted={highlighted || undefined}
      className={cn(
        "flex flex-col gap-6 rounded-[var(--radius-lg,14px)] bg-card p-6 text-card-foreground ring-1 ring-foreground/10 transition-shadow",
        highlighted && "shadow-lg ring-2 ring-[var(--color-primary, var(--color-cobalt, #00B0FF))]",
        className
      )}
      {...props}
    >
      <div className="flex flex-col gap-1">
        <h3 className="text-lg font-semibold text-foreground">{name}</h3>
        <div className="flex items-baseline gap-1">
          <span className="text-3xl font-bold text-foreground">{price}</span>
          <span className="text-sm text-muted-foreground">/{period}</span>
        </div>
      </div>
      <ul className="flex flex-1 flex-col gap-2.5">
        {features.map((feature) => (
          <li key={feature} className="flex items-start gap-2 text-sm text-foreground">
            <Check className="mt-0.5 size-4 shrink-0 text-[var(--status-success, var(--color-malachite, #64FFDA))]" />
            <span>{feature}</span>
          </li>
        ))}
      </ul>
      {onSelect && (
        <button
          type="button"
          onClick={onSelect}
          className={cn(
            "inline-flex h-10 items-center justify-center rounded-full px-6 text-sm font-medium transition-colors",
            highlighted
              ? "bg-[var(--color-primary, var(--color-cobalt, #00B0FF))] text-white hover:bg-[var(--color-primary, var(--color-cobalt, #00B0FF))]/90"
              : "border border-border bg-input/30 text-foreground hover:bg-input/50"
          )}
        >
          Get started
        </button>
      )}
    </div>
  )
}

export { SubscriptionCard }

Source Code

View the full component source code below.

"use client"

import * as React from "react"
import { Check } from "@/lib/icons"

import { cn } from "@/lib/utils"

function SubscriptionCard({ loading = false,
  name,
  price,
  period,
  features,
  highlighted = false,
  onSelect,
  className,
  ...props
}: {
  name: string
  price: string
  period: string
  features: string[]
  highlighted?: boolean
  onSelect?: () => void
} & React.ComponentProps<"div">) {
  if (loading) return (<div data-slot="subscription-card" data-portal="https://design.nyuchi.com/components/subscription-card" role="article" data-loading className="animate-pulse rounded-[var(--radius-lg,14px)] bg-card p-4 ring-1 ring-foreground/10 space-y-3"><div className="h-4 w-2/3 rounded bg-muted" /><div className="h-3 w-full rounded bg-muted" /><div className="h-3 w-1/2 rounded bg-muted" /></div>)

  return (
    <div
      data-slot="subscription-card" role="article"
      data-highlighted={highlighted || undefined}
      className={cn(
        "flex flex-col gap-6 rounded-[var(--radius-lg,14px)] bg-card p-6 text-card-foreground ring-1 ring-foreground/10 transition-shadow",
        highlighted && "shadow-lg ring-2 ring-[var(--color-primary, var(--color-cobalt, #00B0FF))]",
        className
      )}
      {...props}
    >
      <div className="flex flex-col gap-1">
        <h3 className="text-lg font-semibold text-foreground">{name}</h3>
        <div className="flex items-baseline gap-1">
          <span className="text-3xl font-bold text-foreground">{price}</span>
          <span className="text-sm text-muted-foreground">/{period}</span>
        </div>
      </div>
      <ul className="flex flex-1 flex-col gap-2.5">
        {features.map((feature) => (
          <li key={feature} className="flex items-start gap-2 text-sm text-foreground">
            <Check className="mt-0.5 size-4 shrink-0 text-[var(--status-success, var(--color-malachite, #64FFDA))]" />
            <span>{feature}</span>
          </li>
        ))}
      </ul>
      {onSelect && (
        <button
          type="button"
          onClick={onSelect}
          className={cn(
            "inline-flex h-10 items-center justify-center rounded-full px-6 text-sm font-medium transition-colors",
            highlighted
              ? "bg-[var(--color-primary, var(--color-cobalt, #00B0FF))] text-white hover:bg-[var(--color-primary, var(--color-cobalt, #00B0FF))]/90"
              : "border border-border bg-input/30 text-foreground hover:bg-input/50"
          )}
        >
          Get started
        </button>
      )}
    </div>
  )
}

export { SubscriptionCard }