Color Swatches
A project’s palette for case studies: named swatches with hex and OKLCH values you click to copy, WCAG contrast labels, and grid, strip or proportional (by usage) layouts.
Installation
pnpm dlx shadcn@latest add @portfolio-kit/color-swatchesFirst 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
Proportional
layout="proportional" sizes each color by how much of the product it covers, which says more about a brand than a row of equal chips.
Strip
layout="strip": one continuous band, details printed on each color in whichever of black or white reads best. Click a value to copy it.
In a case study
The palette chapter of a case study: a short rationale, then every color with its role, copyable values and how it holds up for text.