shadcn/ui Open Source Contribution — สร้าง

วิธี Contribute ให้ Open Source

ขั้นตอน contribute ให้ shadcn/ui และ open source projects

=== Open Source Contribution Guide ===

1. Fork and Clone Repository

Go to https://github.com/shadcn-ui/ui

Click "Fork" button

git clone https://github.com/YOUR-USERNAME/ui.git

cd ui

git remote add upstream https://github.com/shadcn-ui/ui.git

2. Setup Development Environment

pnpm install

pnpm dev

3. Create Feature Branch

git checkout -b feat/new-component-timeline

Naming conventions:

feat/description — new feature

fix/description — bug fix

docs/description — documentation

refactor/description — code refactoring

4. Find Issues to Work On

Look for labels:

• "good first issue" — beginner friendly
• "help wanted" — maintainers want help
• "bug" — confirmed bugs
• "enhancement" — feature requests

Before starting:

1. Comment on the issue saying you want to work on it

2. Wait for maintainer to assign you

3. Ask questions if anything is unclear

4. Read CONTRIBUTING.md carefully

5. Contribution Checklist

[ ] Read CONTRIBUTING.md and CODE_OF_CONDUCT.md

[ ] Issue exists and is assigned to you

[ ] Branch created from latest main

[ ] Code follows project style guide

เนื้อหาเกี่ยวข้อง — แนะนำให้อ่าน Stencil.js Batch Processing Pipeline

[ ] TypeScript types are correct

[ ] Components are accessible (keyboard, screen reader)

[ ] Dark mode works correctly

[ ] Tests added/updated

[ ] Documentation updated

[ ] No console errors or warnings

[ ] PR description explains the change

6. Commit Message Convention

Format: type(scope): description

Types:

feat: new feature

fix: bug fix

docs: documentation

style: formatting, missing semicolons

refactor: code restructuring

test: adding tests

chore: maintenance tasks

Examples:

git commit -m "feat(timeline): add Timeline component"

git commit -m "fix(button): fix focus ring on dark mode"

git commit -m "docs(card): add usage examples"

7. Create Pull Request

git push origin feat/new-component-timeline

แนะนำเพิ่มเติม — XM Signal

Go to GitHub and create PR

Fill in PR template:

• What does this PR do?
• Screenshots (if UI change)
• How to test
• Related issues (#123)

8. Code Review Process

• Maintainer reviews your code
• Address feedback promptly
• Be open to suggestions
• Don't take feedback personally
• Push fixes to the same branch (auto-updates PR)

Common feedback:

• "Can you add tests for this?"
• "This doesn't match our style guide"
• "Can you use the existing utility function?"
• "This needs accessibility improvements"

echo "Contribution guide complete"

Testing และ Quality Assurance

เขียน tests สำหรับ components

#!/usr/bin/env python3
# component_qa.py — Component Quality Assurance
import json
import logging
from typing import Dict, List

logging.basicConfig(level=logging.INFO)
logger = logging.getLogger("qa")

class ComponentQA:
    def __init__(self):
        self.checks = []
    
    def accessibility_checklist(self, component_name):
        """Generate accessibility checklist for a component"""
        return {
            "component": component_name,
            "checks": {
                "keyboard_navigation": [
                    "Tab focuses the component",
                    "Enter/Space activates the component",
                    "Escape closes dialogs/dropdowns",
                    "Arrow keys navigate within component",
                    "Focus is visible (focus ring)",
                ],
                "screen_reader": [
                    "Has appropriate ARIA role",
                    "Has accessible label (aria-label or aria-labelledby)",
                    "State changes announced (aria-expanded, aria-selected)",
                    "Error messages linked (aria-describedby)",
                    "Live regions for dynamic content (aria-live)",
                ],
                "visual": [
                    "Color contrast ratio >= 4.5:1 (text)",
                    "Color contrast ratio >= 3:1 (large text, UI)",
                    "Not relying on color alone for information",
                    "Works at 200% zoom",
                    "Respects prefers-reduced-motion",
                ],
                "semantic": [
                    "Uses correct HTML elements (button, not div)",
                    "Headings are hierarchical",
                    "Lists use ul/ol/li",
                    "Form inputs have labels",
                    "Images have alt text",
                ],
            },
        }
    
    def test_plan(self, component_name):
        """Generate test plan for a shadcn/ui component"""
        return {
            "component": component_name,
            "unit_tests": [
                f"{component_name} renders without crashing",
                f"{component_name} renders children correctly",
                f"{component_name} applies className prop",
                f"{component_name} forwards ref correctly",
                f"{component_name} handles disabled state",
                f"{component_name} handles loading state",
            ],
            "interaction_tests": [
                f"{component_name} responds to click events",
                f"{component_name} responds to keyboard events",
                f"{component_name} manages focus correctly",
                f"{component_name} handles hover state",
            ],
            "visual_tests": [
                f"{component_name} matches snapshot (light mode)",
                f"{component_name} matches snapshot (dark mode)",
                f"{component_name} renders all variants correctly",
                f"{component_name} is responsive",
            ],
            "accessibility_tests": [
                f"{component_name} has no axe violations",
                f"{component_name} is keyboard accessible",
                f"{component_name} has correct ARIA attributes",
            ],
        }
    
    def pr_review_checklist(self):
        """Checklist for reviewing PRs"""
        return {
            "code_quality": [
                "TypeScript types are strict (no any)",
                "No unused imports or variables",
                "Follows project naming conventions",
                "No hardcoded values (use CSS variables)",
                "Error handling is proper",
            ],
            "component_design": [
                "Props interface is well-defined",
                "Component is composable",
                "Supports className override via cn()",
                "Forwards ref with React.forwardRef",
                "Has sensible default props",
            ],
            "testing": [
                "Unit tests cover main functionality",
                "Edge cases are tested",
                "Accessibility tests included",
                "No flaky tests",
            ],
            "documentation": [
                "Component has JSDoc comments",
                "Usage examples provided",
                "Props are documented",
                "Breaking changes noted",
            ],
        }

qa = ComponentQA()
a11y = qa.accessibility_checklist("Button")
print("Accessibility:", json.dumps(a11y["checks"]["keyboard_navigation"], indent=2))

tests = qa.test_plan("Dialog")
print("\nTest Plan:", json.dumps(tests["unit_tests"], indent=2))

review = qa.pr_review_checklist()
print("\nPR Review:", json.dumps(review["code_quality"], indent=2))

Best Practices สำหรับ Component Library

แนวทางสร้าง component library ที่ดี

=== Component Library Best Practices ===

1. Component API Design

Good: Composable pattern

<Card>

<CardHeader>

<CardTitle>Title</CardTitle>

<CardDescription>Description</CardDescription>

</CardHeader>

<CardContent>Content here</CardContent>

<CardFooter>

<Button>Action</Button>

</CardFooter>

</Card>

Bad: Props-heavy monolithic component

<Card

เนื้อหาเกี่ยวข้อง — บทความที่เกี่ยวข้อง: LocalAI Self-hosted Tech Conference 2026

title="Title"

description="Description"

content="Content"

footerButtons={[{label: "Action"}]}

/>

2. Variant System with cva

import { cva, type VariantProps } from "class-variance-authority"

const buttonVariants = cva(

"inline-flex items-center justify-center rounded-md text-sm font-medium",

{

variants: {

variant: {

default: "bg-primary text-primary-foreground hover:bg-primary/90",

destructive: "bg-destructive text-destructive-foreground",

outline: "border border-input bg-background hover:bg-accent",

secondary: "bg-secondary text-secondary-foreground",

ghost: "hover:bg-accent hover:text-accent-foreground",

link: "text-primary underline-offset-4 hover:underline",

},

size: {

default: "h-10 px-4 py-2",

sm: "h-9 rounded-md px-3",

lg: "h-11 rounded-md px-8",

icon: "h-10 w-10",

},

},

defaultVariants: {

variant: "default",

size: "default",

},

}

)

3. Theming with CSS Variables

globals.css:

:root {

--background: 0 0% 100%;

--foreground: 222.2 84% 4.9%;

--primary: 222.2 47.4% 11.2%;

--primary-foreground: 210 40% 98%;

--secondary: 210 40% 96.1%;

--muted: 210 40% 96.1%;

--accent: 210 40% 96.1%;

เนื้อหาเกี่ยวข้อง — บทความที่เกี่ยวข้อง: MLflow Experiment Tech Conference 2026 — จัดการ

--destructive: 0 84.2% 60.2%;

--border: 214.3 31.8% 91.4%;

--ring: 222.2 84% 4.9%;

--radius: 0.5rem;

}

.dark {

--background: 222.2 84% 4.9%;

--foreground: 210 40% 98%;

--primary: 210 40% 98%;

...

}

4. File Organization

components/

├── ui/ # shadcn/ui base components

│ ├── button.tsx

│ ├── card.tsx

│ └── dialog.tsx

├── shared/ # Custom shared components

│ ├── data-table.tsx

│ ├── metric-card.tsx

│ └── status-badge.tsx

├── features/ # Feature-specific components

│ ├── dashboard/

│ ├── auth/

│ └── settings/

└── layouts/ # Layout components

├── header.tsx

├── sidebar.tsx

└── footer.tsx

5. Performance Tips

• Use React.lazy() for heavy components
• Memoize expensive renders with React.memo
• Use CSS animations instead of JS animations
• Lazy load icons (dynamic import)
• Tree-shake unused components
• Use Radix UI's asChild pattern for flexibility

echo "Best practices documented"

FAQ คำถามที่พบบ่อย

Q: shadcn/ui กับ Material UI ต่างกันอย่างไร?

A: shadcn/ui copy components เข้า project (ownership) ใช้ Tailwind CSS สำหรับ styling, components เป็นของคุณ customize ได้เต็มที่ ไม่มี runtime overhead จาก library, bundle size เล็ก Material UI เป็น npm package (dependency) ใช้ Emotion/styled-components สำหรับ styling, ต้องพึ่ง library updates, มี runtime CSS-in-JS overhead, bundle size ใหญ่กว่า แนะนำ shadcn/ui สำหรับ projects ที่ต้องการ customization สูงและ performance ดี Material UI สำหรับ projects ที่ต้องการ components สำเร็จรูปครบ ไม่ต้อง customize มาก

Q: จะเริ่ม contribute open source อย่างไร?

A: เริ่มจาก projects ที่ใช้อยู่แล้ว อ่าน CONTRIBUTING.md และ CODE_OF_CONDUCT.md หา issues ที่มี label good first issue เริ่มจาก documentation fixes, typo corrections, test additions ก่อนแล้วค่อยทำ feature ใหญ่ขึ้น comment บน issue ก่อนเริ่มทำ ใช้ conventional commits อย่ากลัว code review ถือเป็นโอกาสเรียนรู้ สำหรับ shadcn/ui เริ่มจากสร้าง component ใหม่ที่ community ร้องขอใน GitHub Discussions

Q: cn() utility function ทำอะไร?

A: cn() เป็น utility function ที่รวม clsx กับ tailwind-merge clsx ช่วย conditionally join classNames เช่น cn("px-4", isActive && "bg-blue-500") tailwind-merge ช่วย resolve conflicting Tailwind classes เช่น cn("px-4 px-6") จะได้ "px-6" (ไม่ซ้ำกัน) ทำให้ components รับ className prop แล้ว merge กับ default styles ได้อย่างถูกต้อง ใช้ทุกที่ใน shadcn/ui components

Q: shadcn/ui รองรับ React Server Components ไหม?

A: shadcn/ui components ส่วนใหญ่เป็น Client Components (ใช้ use client) เพราะมี interactivity เช่น Dialog, Dropdown, Tabs แต่ components ที่ไม่มี interactivity เช่น Card, Badge, Separator ใช้เป็น Server Components ได้ ใน Next.js App Router ให้ import client components ใน page.tsx ที่เป็น Server Component ได้ปกติ เพราะ Next.js จัดการ boundary ให้อัตโนมัติ สำหรับ performance ดีที่สุด แยก static content เป็น Server Components และ interactive parts เป็น Client Components