Theme Toggle

Light, dark and system switch, as a sun/moon icon button or a three-way segmented control, that remembers the choice and follows the OS.

Installation

pnpm dlx shadcn@latest add @portfolio-kit/theme-toggle

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"
  }
}

A three-way light, system and dark control with a sliding thumb. “System” follows the OS setting, including later changes.

The ghost icon button sits quietly beside the nav; the small segmented control fits a footer. Both share one store, so they always agree.