pd-shad-ui

A professional-grade, high-performance React UI component library based on Radix UI and Tailwind CSS.

✨ Key Features

• 💎 Modern Aesthetics: Carefully crafted components following best design practices.
• 🛡️ Style Isolation: All Tailwind classes are prefixed with pd- to prevent collisions with host applications.
• ♿ Accessibility First: Built on Radix UI primitives with built-in A11y auditing (Storybook + Vitest-axe).
• 🌓 Dark Mode Support: Seamless theme switching with optimized dark mode variables.
• 🌳 Tree-Shakable: Built with tsup, generating ESM and CJS outputs with zero side-effects.
• 🧪 Production Ready: 100% unit test coverage and rigorous CI validation.

📦 Installation

pnpm add pd-shad-ui

🚀 Quick Start

1. Configure Tailwind

Since pd-shad-ui uses a custom prefix, update your tailwind.config.js:

/** @type {import('tailwindcss').Config} */
export default {
  // Add our package to content to ensure classes are scanned
  content: [
    "./node_modules/pd-shad-ui/dist/**/*.js",
    // ... your app content
  ],
  theme: {
    extend: {
      // Import pd-shad-ui theme variables if needed
    },
  },
  plugins: [require("tailwindcss-animate")],
}

2. Usage

import { Button } from "pd-shad-ui"
import "pd-shad-ui/dist/index.css" // Import the base styles

export default function App() {
  return (
    <Button variant="default" onClick={() => console.log("clicked")}>
      Click Me
    </Button>
  )
}

🛠️ Development & Engineering

Core Infrastructure

• Monorepo: Powered by pnpm-workspace.
• Bundler: tsup (ESBuild) for blazing fast builds.
• Versioning: changesets for semantic versioning and changelogs.

Quality Assurance (QA)

We maintain high standards through automated checks:

• Unit Testing: Vitest + React Testing Library + Happy DOM.
• A11y Audit: vitest-axe for accessibility validation.
• Visual Testing: Storybook + @storybook/addon-themes.

Current Test Metrics:

| Category | Pass Rate | Coverage | | :--- | :--- | :--- | | Unit Tests | 100% (5/5 passing) | 100% Lines | | A11y Audits | 100% | Validated | | Tree-shaking | Verified | ESM Optimized |

📖 Component Documentation

Explore all components in our Component Documentation or run Storybook locally:

pnpm --filter pd-shad-ui run storybook

📄 License

MIT © [pidan]