@pihanga2/shadcn

Pihanga core card components — built on shadcn/ui and Radix UI.

This is the traditional npm package distribution of the pihanga-shadcn card library.

A copy-on-install shadcn registry is also available for teams that prefer the shadcn workflow:

npx shadcn@latest add https://ivcap-works.github.io/pihanga-shadcn/r/button

Installation

npm install @pihanga2/shadcn

Install the required peer dependencies:

npm install react react-dom @pihanga2/core @pihanga2/cards

Tailwind CSS

This package ships TypeScript source with Tailwind CSS utility classes. Add the package to your Tailwind content glob so that utility classes are included in your generated CSS.

Tailwind v3 (tailwind.config.js):

module.exports = {
  content: [
    // … your project files …
    "./node_modules/@pihanga2/shadcn/dist-lib/**/*.{js,jsx,ts,tsx}",
  ],
};

Tailwind v4 (tailwind.css):

@source "../../node_modules/@pihanga2/shadcn/dist-lib";

Usage

Import only the cards your app uses — unused cards are eliminated by your bundler:

import "@pihanga2/shadcn/cards/button";
import "@pihanga2/shadcn/cards/dialog";
import "@pihanga2/shadcn/cards/dataTable";

Included cards (35)

• badge
• box
• button
• checkbox
• conditional
• dataTable
• dialog
• dropDownMenu
• field
• fileDrop
• flexGrid
• form
• framework
• input
• jsonViewer
• list
• loadingOverlay
• loadingSkeleton
• menu
• modeToggle
• navbarSearch
• pageWithNavbar
• pasteTarget
• resizable
• select
• slider
• sliderValue
• stack
• stepper
• switch
• tabs
• textField
• toast
• toggleGroup
• typography

Source & registry

• Repository: https://github.com/ivcap-works/pihanga-shadcn
• shadcn registry: https://ivcap-works.github.io/pihanga-shadcn/r