Availability Badge
Status pill with a pulsing dot that says whether you're taking work, e.g. “Available for work” or “Booked until March”.
Installation
pnpm dlx shadcn@latest add @portfolio-kit/availability-badgeFirst time? Add the @portfolio-kit registry to components.json
components.json
{
"registries": {
"@portfolio-kit": "https://www.parthjadhav.com/products/portfolio-kit/r/{name}.json"
}
}Usage
Examples
Statuses
available pulses green, limited uses your highlight color, unavailable goes still and grey. Each has a sensible default label.
Variants
pill floats over heroes and media, soft sits inside cards, plain drops into meta rows and running text. With href, any of them links somewhere, like your contact section.
Over Media
The pill's translucent, blurred fill keeps it legible on top of a portrait or cover image.