GitHub Stars Button

variant

size

<script setup lang="ts">
import type { VariantProps } from 'class-variance-authority'
import { cva } from 'class-variance-authority'
import {
  GitHubStarsButton,
  GitHubStarsButtonIcon,
  GitHubStarsButtonLogo,
  GitHubStarsButtonNumber,
  GitHubStarsButtonParticles,
  type githubStarsButtonVariants,
} from '@/components/animate-ui/buttons/github-stars'
import Star from './github-stars-star.vue'

type Variants = VariantProps<typeof githubStarsButtonVariants>

const starVariants = cva('size-[18px]', {
  variants: {
    variant: {
      default:
        'fill-neutral-700 stroke-neutral-700 dark:fill-neutral-300 dark:stroke-neutral-300',
      accent:
        'fill-neutral-300 stroke-neutral-300 dark:fill-neutral-700 dark:stroke-neutral-700',
      outline:
        'fill-neutral-300 stroke-neutral-300 dark:fill-neutral-700 dark:stroke-neutral-700',
      ghost:
        'fill-neutral-300 stroke-neutral-300 dark:fill-neutral-700 dark:stroke-neutral-700',
    },
  },
  defaultVariants: {
    variant: 'default',
  },
})

withDefaults(defineProps<{ variant?: Variants['variant'], size?: Variants['size'] }>(), {
  variant: 'default',
  size: 'default',
})
</script>

<template>
  <GitHubStarsButton
    username="imskyleen"
    repo="animate-ui"
    :value="3200"
    as-child
    :variant="variant"
    :size="size"
  >
    <a
      href="https://github.com/imskyleen/animate-ui"
      target="_blank"
      rel="noreferrer noopener"
    >
      <GitHubStarsButtonLogo />
      <GitHubStarsButtonNumber class="tabular-nums" />
      <GitHubStarsButtonParticles class="text-yellow-500">
        <GitHubStarsButtonIcon
          :icon="Star"
          :class="starVariants({ variant })"
          color="var(--color-yellow-500)"
        />
      </GitHubStarsButtonParticles>
    </a>
  </GitHubStarsButton>
</template>

Installation

npx shadcn-vue@latest add https://animate-ui.com/r/vue/buttons-github-stars.json

pnpm dlx shadcn-vue@latest add https://animate-ui.com/r/vue/buttons-github-stars.json

yarn dlx shadcn-vue@latest add https://animate-ui.com/r/vue/buttons-github-stars.json

bun x shadcn-vue@latest add https://animate-ui.com/r/vue/buttons-github-stars.json

Usage

<script setup lang="ts">
import {
  GitHubStarsButton,
  GitHubStarsButtonIcon,
  GitHubStarsButtonLogo,
  GitHubStarsButtonNumber,
  GitHubStarsButtonParticles,
} from '@/components/animate-ui/buttons/github-stars';
import StarIcon from './StarIcon.vue';
</script>

<template>
  <GitHubStarsButton username="imskyleen" repo="animate-ui" as-child>
    <a href="https://github.com/imskyleen/animate-ui">
      <GitHubStarsButtonLogo class="size-4" />
      <GitHubStarsButtonNumber />
      <GitHubStarsButtonParticles class="text-yellow-500">
        <GitHubStarsButtonIcon :icon="StarIcon" color="gold" />
      </GitHubStarsButtonParticles>
    </a>
  </GitHubStarsButton>
</template>

A button built on GitHub Stars: its parts are GitHub Stars' (GithubStarsLogo, GithubStarsNumber, GithubStarsIcon, GithubStarsParticles), exported here under the button's name. The count is fetched from the GitHub API (api.github.com/repos/<username>/<repo>), unauthenticated; pass it with value to skip the request.

Animation

The button stays hidden (visibility: hidden, aria-busy) until the count is loaded. Then the number counts up from 0 with rolling digits (Sliding Number), the star fills from the bottom as it climbs, and bursts into particles when the count is reached.
Pressing scales the button to tap-scale (0.97), on Motion's spring for scale (stiffness: 550, damping: 30). It doesn't scale on hover, unless you set hover-scale.
<AnimateUIProvider :tempo> paces the press spring.
Under reduced motion, the digits change without rolling, the burst is skipped and the button doesn't scale.

API Reference

GitHubStarsButton

Prop	Type	Default
`variant?`	`'default' \| 'accent' \| 'outline' \| 'ghost' \| null`	`'default'`
`size?`	`'default' \| 'sm' \| 'lg' \| null`	`'default'`
`username?`	`string`	-
`repo?`	`string`	-
`value?`	`number`	-
`delay?`	`number`	`0`
`in-view?`	`boolean`	`false`
`in-view-once?`	`boolean`	`true`
`in-view-margin?`	`string`	`'0px'`
`hover-scale?`	`number`	`1`
`tap-scale?`	`number`	`0.97`
`transition?`	`Transition`	`{ type: 'spring', stiffness: 550, damping: 30, restSpeed: 10 }`
`as-child?`	`boolean`	`false`
`...props?`	`HTMLMotionProps<'button'>`	-

GitHubStarsButtonLogo, GitHubStarsButtonNumber, GitHubStarsButtonIcon, GitHubStarsButtonParticles

The parts of GitHub Stars: GithubStarsLogo, GithubStarsNumber, GithubStarsIcon and GithubStarsParticles.

InstallationCopy Anchor Link

UsageCopy Anchor Link

AnimationCopy Anchor Link

API ReferenceCopy Anchor Link