Github Oss Traction Band

blockmarketing

Open source community traction and velocity band with real-time star metrics, recent releases changelog feed, and quickstart CLI install terminal.

Installation

$pnpm dlx uipkge-ng@latest add github-oss-traction-band

$npx uipkge-ng@latest add github-oss-traction-band

$yarn dlx uipkge-ng@latest add github-oss-traction-band

$bunx uipkge-ng@latest add github-oss-traction-band

Manifest:https://uipkge.dev/r/angular/github-oss-traction-band.jsonInstalls to:src/app/components/blocks/github-oss-traction-band/

Variants

Loading interactive previews…

Schema

Type aliases exported from this item's source. Use these to shape the data you pass in.

ReleaseItem

interface ReleaseItem {
  version: string
  date: string
  title: string
  type: 'feature' | 'primitive' | 'block'
}

npm dependencies

lucide-angular

Includes

badge button card

Files installed (2)

src/app/components/blocks/github-oss-traction-band/github-oss-traction-band.component.ts11.1 kB

// Open source community traction and velocity band with real-time star metrics,
// recent releases changelog feed, and quickstart CLI install terminal.
// Port of the React block 1:1.
import { ChangeDetectionStrategy, Component, Input, signal } from '@angular/core'
import {
  Check,
  Copy,
  GitBranch,
  GitPullRequest,
  LucideAngularModule,
  MessageSquare,
  Package,
  Star,
  Terminal,
  TrendingUp,
} from 'lucide-angular'
import { cn } from '@/lib/utils'
import { UiBadgeComponent } from '@/ui/badge/badge.component'
import { UiButtonComponent } from '@/ui/button/button.component'
import { UiCardComponent } from '@/ui/card/card.component'

interface ReleaseItem {
  version: string
  date: string
  title: string
  type: 'feature' | 'primitive' | 'block'
}

const recentReleases: ReleaseItem[] = [
  { version: 'v2.4.0', date: 'Yesterday', title: 'Added 12 new Marketing & Conversion Workbenches', type: 'block' },
  {
    version: 'v2.3.8',
    date: '3 days ago',
    title: 'OKLCH Dynamic Theme Engine & Tailored HSL generator',
    type: 'feature',
  },
  { version: 'v2.3.5', date: 'Last week', title: 'Added SegmentedGauge & SmoothFunnel primitives', type: 'primitive' },
  {
    version: 'v2.3.0',
    date: '2 weeks ago',
    title: 'Full React 19 single-curly-brace AST parity validation',
    type: 'feature',
  },
]

@Component({
  changeDetection: ChangeDetectionStrategy.Eager,
  selector: 'ui-github-oss-traction-band, [ui-github-oss-traction-band]',
  standalone: true,
  // React renders the root <section> itself: the host stays out of layout and `class` goes to the root.
  host: { '[attr.class]': '"contents"' },
  imports: [LucideAngularModule, UiBadgeComponent, UiButtonComponent, UiCardComponent],
  template: `
    <section data-slot="github-oss-traction-band" [class]="rootClass">
      <div
        class="bg-primary/10 pointer-events-none absolute top-1/2 left-1/2 -z-10 h-72 w-full max-w-4xl -translate-x-1/2 -translate-y-1/2 rounded-full blur-xl"
      ></div>
      <div class="mx-auto max-w-6xl space-y-12">
        <div
          class="border-border/60 flex flex-col items-center justify-between gap-6 border-b pb-8 text-center md:flex-row md:text-left"
        >
          <div class="space-y-2">
            <span ui-badge variant="secondary" class="gap-1.5 px-3 py-1 font-mono text-xs shadow-xs">
              <svg class="size-3.5" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
                <path
                  d="M12 .5C5.7.5.5 5.7.5 12c0 5.1 3.3 9.4 7.9 10.9.6.1.8-.3.8-.6v-2c-3.2.7-3.9-1.5-3.9-1.5-.5-1.4-1.3-1.7-1.3-1.7-1.1-.7.1-.7.1-.7 1.2.1 1.8 1.2 1.8 1.2 1 1.8 2.7 1.3 3.4 1 .1-.8.4-1.3.7-1.6-2.6-.3-5.3-1.3-5.3-5.8 0-1.3.5-2.3 1.2-3.1-.1-.3-.5-1.5.1-3.1 0 0 1-.3 3.3 1.2a11.4 11.4 0 016 0C17 4.7 18 5 18 5c.6 1.6.2 2.8.1 3.1.8.8 1.2 1.8 1.2 3.1 0 4.5-2.7 5.5-5.3 5.8.4.4.8 1.1.8 2.2v3.3c0 .3.2.7.8.6 4.6-1.5 7.9-5.8 7.9-10.9C23.5 5.7 18.3.5 12 .5z"
                />
              </svg>
              100% Free &amp; Open Source on GitHub
            </span>
            <h2 class="text-foreground text-3xl font-bold tracking-tight">
              Backed by a thriving open-source community.
            </h2>
            <p class="text-muted-foreground text-xs sm:text-sm">
              Zero vendor lock-in. 100% unbundled source code ownership under the permissive MIT License.
            </p>
          </div>
          <div class="flex shrink-0 items-center gap-3">
            <a
              ui-button
              size="lg"
              class="gap-2 font-semibold shadow-xs"
              href="https://github.com/uday-a/uipkge-registry"
              target="_blank"
              rel="noreferrer"
            >
              <svg class="size-4" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
                <path
                  d="M12 .5C5.7.5.5 5.7.5 12c0 5.1 3.3 9.4 7.9 10.9.6.1.8-.3.8-.6v-2c-3.2.7-3.9-1.5-3.9-1.5-.5-1.4-1.3-1.7-1.3-1.7-1.1-.7.1-.7.1-.7 1.2.1 1.8 1.2 1.8 1.2 1 1.8 2.7 1.3 3.4 1 .1-.8.4-1.3.7-1.6-2.6-.3-5.3-1.3-5.3-5.8 0-1.3.5-2.3 1.2-3.1-.1-.3-.5-1.5.1-3.1 0 0 1-.3 3.3 1.2a11.4 11.4 0 016 0C17 4.7 18 5 18 5c.6 1.6.2 2.8.1 3.1.8.8 1.2 1.8 1.2 3.1 0 4.5-2.7 5.5-5.3 5.8.4.4.8 1.1.8 2.2v3.3c0 .3.2.7.8.6 4.6-1.5 7.9-5.8 7.9-10.9C23.5 5.7 18.3.5 12 .5z"
                />
              </svg>
              <span>Star on GitHub</span>
              <span
                ui-badge
                variant="outline"
                class="bg-primary-foreground/20 text-primary-foreground ml-1 border-transparent font-mono text-xs"
                >{{ starCount() }}</span
              >
            </a>
          </div>
        </div>

        <div class="grid grid-cols-2 gap-4 sm:grid-cols-4">
          <div ui-card class="border-border bg-card/80 space-y-2 rounded-2xl p-5 shadow-xs">
            <div class="text-muted-foreground flex items-center justify-between">
              <span class="font-mono text-xs">GitHub Stars</span>
              <lucide-icon [img]="Star" class="fill-warning text-warning size-4" />
            </div>
            <p class="text-foreground font-mono text-3xl font-bold">14,820</p>
            <p class="text-success flex items-center gap-1 font-mono text-xs">
              <lucide-icon [img]="TrendingUp" class="size-3" /> +420 this week
            </p>
          </div>
          <div ui-card class="border-border bg-card/80 space-y-2 rounded-2xl p-5 shadow-xs">
            <div class="text-muted-foreground flex items-center justify-between">
              <span class="font-mono text-xs">Weekly Installs</span>
              <lucide-icon [img]="Package" class="text-primary size-4" />
            </div>
            <p class="text-foreground font-mono text-3xl font-bold">142,500</p>
            <p class="text-muted-foreground font-mono text-xs">Across Vue &amp; React</p>
          </div>
          <div ui-card class="border-border bg-card/80 space-y-2 rounded-2xl p-5 shadow-xs">
            <div class="text-muted-foreground flex items-center justify-between">
              <span class="font-mono text-xs">Contributors</span>
              <lucide-icon [img]="GitPullRequest" class="text-success size-4" />
            </div>
            <p class="text-foreground font-mono text-3xl font-bold">84+</p>
            <p class="text-muted-foreground font-mono text-xs">Design engineers</p>
          </div>
          <div ui-card class="border-border bg-card/80 space-y-2 rounded-2xl p-5 shadow-xs">
            <div class="text-muted-foreground flex items-center justify-between">
              <span class="font-mono text-xs">Community</span>
              <lucide-icon [img]="MessageSquare" class="text-info size-4" />
            </div>
            <p class="text-foreground font-mono text-3xl font-bold">4,200+</p>
            <p class="text-muted-foreground font-mono text-xs">Active builders</p>
          </div>
        </div>

        <div class="grid grid-cols-1 gap-6 md:grid-cols-2">
          <div ui-card class="border-border bg-card/90 space-y-4 rounded-2xl p-6 text-left shadow-sm">
            <div class="border-border flex items-center justify-between border-b pb-3">
              <h3 class="text-foreground flex items-center gap-2 font-mono text-sm font-bold">
                <lucide-icon [img]="GitBranch" class="text-primary size-4" /> Recent Registry Releases
              </h3>
              <span class="text-muted-foreground font-mono text-xs">Continuous Shipping</span>
            </div>
            <div class="space-y-3">
              @for (rel of releases; track rel.version) {
                <div class="flex items-start justify-between gap-3 text-xs">
                  <div class="space-y-0.5">
                    <div class="flex items-center gap-2">
                      <span class="text-foreground font-mono font-bold">{{ rel.version }}</span>
                      <span ui-badge variant="outline" class="font-mono text-xs capitalize">{{ rel.type }}</span>
                    </div>
                    <p class="text-muted-foreground leading-snug">{{ rel.title }}</p>
                  </div>
                  <span class="text-muted-foreground shrink-0 font-mono text-xs">{{ rel.date }}</span>
                </div>
              }
            </div>
          </div>

          <div
            ui-card
            class="border-border bg-card/90 flex flex-col justify-between space-y-4 rounded-2xl p-6 text-left shadow-sm"
          >
            <div class="space-y-1">
              <h3 class="text-foreground flex items-center gap-2 font-mono text-sm font-bold">
                <lucide-icon [img]="Terminal" class="text-success size-4" /> Quickstart CLI
              </h3>
              <p class="text-muted-foreground text-xs">
                Add tokens, utils, and theme scaffolding into your repository in seconds.
              </p>
            </div>
            <div
              class="border-border bg-background text-foreground flex items-center justify-between gap-2 overflow-hidden rounded-xl border p-3.5 font-mono text-xs"
            >
              <span class="text-muted-foreground truncate">
                <span class="text-primary font-bold">&gt;</span> {{ commandText() }}
              </span>
              <button
                ui-button
                size="sm"
                variant="ghost"
                class="h-8 shrink-0 gap-1.5 px-2 text-xs"
                (click)="copyCommand()"
              >
                @if (isCopied()) {
                  <lucide-icon [img]="Check" class="text-success size-3.5" />
                } @else {
                  <lucide-icon [img]="Copy" class="size-3.5" />
                }
                <span>{{ isCopied() ? 'Copied' : 'Copy' }}</span>
              </button>
            </div>
            <div
              class="text-muted-foreground border-border/60 flex items-center justify-between border-t pt-2 font-mono text-xs"
            >
              <span>Supports Vue 3.5, Nuxt, React 19, Next.js</span>
              <span class="text-success font-semibold">&check; Zero lock-in</span>
            </div>
          </div>
        </div>
      </div>
    </section>
  `,
})
export class UiGithubOssTractionBandComponent {
  protected readonly Check = Check
  protected readonly Copy = Copy
  protected readonly GitBranch = GitBranch
  protected readonly GitPullRequest = GitPullRequest
  protected readonly MessageSquare = MessageSquare
  protected readonly Package = Package
  protected readonly Star = Star
  protected readonly Terminal = Terminal
  protected readonly TrendingUp = TrendingUp

  protected readonly releases = recentReleases

  @Input('class') className?: string

  readonly starCount = signal('14.8k')
  readonly isCopied = signal(false)
  readonly commandText = signal('npx shadcn add https://uipkge.dev/r/react/init.json')
  private copyTimer: ReturnType<typeof setTimeout> | undefined

  get rootClass(): string {
    return cn('bg-background relative overflow-hidden px-4 py-16 sm:px-6 sm:py-24 lg:px-8', this.className)
  }

  async copyCommand(): Promise<void> {
    try {
      await navigator.clipboard.writeText(this.commandText())
    } catch {
      // Clipboard unavailable in test env: still flip the label.
    }
    this.isCopied.set(true)
    clearTimeout(this.copyTimer)
    this.copyTimer = setTimeout(() => this.isCopied.set(false), 2000)
  }
}

src/app/components/blocks/github-oss-traction-band/index.ts0.1 kB

Raw manifest:https://uipkge.dev/r/angular/github-oss-traction-band.json

Change language