Service Card

Offer or pricing card with name, description, price, a checklist of what's included and a call to action. A featured variant highlights the offer you recommend.

Installation

pnpm dlx shadcn@latest add @portfolio-kit/service-card

First 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

Featured

Highlight the offer you recommend with an accent border, a badge on the top edge and a solid button.

Pricing Tiers

Three offers side by side; CSS subgrid keeps titles, prices, features and buttons aligned across cards.

Custom Price

Any string works as the amount (“Let's talk” for scoped work), and the badge text is yours to change.

API Reference

Used in

Pricing Table