ספריות קומפוננטות — shadcn/ui והאקוסיסטם

מה זה shadcn/ui ולמה הוא שינה את הכללים

דמיינו שאתם בונים אתר עם AI. אתם כותבים "build me a pricing page" — ו-AI מחזיר עמוד שלם עם כפתורים, כרטיסים, tabs ודיאלוגים. איך הוא עשה את זה כל כך מהר? התשובה: הוא לא בנה כל כפתור מאפס. הוא השתמש ב-shadcn/ui.

shadcn/ui (מבוטא "שאד-סי-אן") הוא לא ספרייה רגילה. הוא אוסף של קומפוננטות React מעוצבות — כפתורים, כרטיסים, דיאלוגים, טבלאות, תפריטים ועוד — שאתם מעתיקים לתוך הפרויקט שלכם. לא מתקינים package חיצוני. לא תלויים בגרסאות של מישהו אחר. הקוד פשוט חי אצלכם, בתיקיית components/ui.

חשבו על זה ככה: ספרייה רגילה היא כמו מנוי לערוץ טלוויזיה — אתם מקבלים תוכן אבל לא שולטים בו. shadcn/ui הוא כמו לקנות DVD — הסרט אצלכם, אתם יכולים לערוך אותו, לשנות אותו, לעשות מה שאתם רוצים.

מאחורי הקלעים, כל קומפוננטה של shadcn/ui בנויה מ-3 שכבות:

• Radix Primitives — השכבה שמספקת התנהגות ונגישות (keyboard navigation, focus management, ARIA attributes)
• Tailwind CSS — העיצוב (שלמדנו בפרק 04)
• הקוד שלכם — ההתאמות הספציפיות לפרויקט

התוצאה: קומפוננטות שנראות מעולה, נגישות לאנשים עם מוגבלויות, ועובדות עם keyboard — מבלי שאתם צריכים לדאוג לכל זה.

מי יצר את shadcn/ui?

shadcn/ui נוצר על ידי shadcn (שם משתמש ב-GitHub) — מפתח שעובד ב-Vercel (החברה שמאחורי V0 ו-Next.js). זו לא ספרייה של חברה ענקית עם צוות של 50 מפתחים. זה פרויקט שהתחיל כרעיון אחד פשוט: "מה אם במקום להתקין ספרייה, פשוט נעתיק את הקוד?"

הרעיון הזה התפוצץ. תוך שנה, shadcn/ui הפך לברירת המחדל של כמעט כל כלי AI שבונה ממשקים. למה? כי הגישה של copy-paste פתרה בעיה שכל מפתח סבל ממנה: תלות בספריות חיצוניות שמשתנות, נשברות, ולא מאפשרות שליטה. נכון לאפריל 2026, ל-shadcn/ui יש 82,000+ כוכבים ב-GitHub — שהופך אותו לאחד מפרויקטי ה-open source הצומחים ביותר בהיסטוריה של React.

מה כולל הפרויקט?

נכון לאפריל 2026, shadcn/ui כולל:

• 50+ קומפוננטות ליבה — מ-Button פשוט ועד Data Table מורכב
• 1,300+ בלוקים ב-Registry — sections שלמים (hero, pricing, FAQ)
• CLI חכם (גרסה v4) — מתקין, מעדכן, ותומך ב-6 frameworks
• Presets — חבילות theme מוכנות לטעינה בפקודה אחת
• תמיכת Multi-framework — Next.js, Vite, TanStack Start, React Router, Astro, Laravel

Copy-Paste vs npm install — למה זה משנה

בפרק 01 למדנו על npm — מנהל החבילות שמוריד קוד חיצוני ושם אותו בתיקיית node_modules. ככה עובדות רוב ספריות הקומפוננטות — MUI, Ant Design, Chakra UI. אתם מריצים npm install @mui/material ומקבלים 70+ קומפוננטות מוכנות.

shadcn/ui עובד אחרת לגמרי. כשאתם רוצים כפתור, אתם מריצים:

npx shadcn add button

מה קורה? הפקודה לא מתקינה package. היא מעתיקה קובץ — button.tsx — לתוך components/ui/ בפרויקט שלכם. הקוד עכשיו שלכם לחלוטין.

למה זה משנה? הנה 3 הבדלים מעשיים:

נקודה חשובה: npx shadcn add לא רק מעתיק קובץ אחד. הוא גם מוריד dependencies — בעיקר את Radix Primitives שמספקים את ההתנהגות. אז כן, יש עדיין npm install מאחורי הקלעים — אבל הקוד של הקומפוננטה עצמה נשאר שלכם.

מה קורה בפועל כשמריצים npx shadcn add?

בואו נעקוב אחרי מה שקורה כשמריצים npx shadcn add dialog:

1. CLI בודק את הפרויקט — מזהה framework (Next.js? Vite?), Tailwind version, TypeScript
2. מוריד את הקוד מה-Registry — קובץ dialog.tsx עם כל הקוד של הקומפוננטה
3. מעתיק לתיקיית components/ui/ — הקובץ עכשיו חלק מהפרויקט שלכם
4. מתקין dependencies — @radix-ui/react-dialog (ה-primitive) אם עוד לא מותקן
5. מוסיף utilities — אם צריך, מוסיף lib/utils.ts עם פונקציות עזר

התוצאה: קובץ dialog.tsx בפרויקט שלכם, שאתם יכולים לפתוח, לקרוא, ולשנות כרצונכם. אין "קופסה שחורה" — הכל שקוף.

חדש ב-CLI v4: inspection flags

מרץ 2026 הביא את CLI v4 עם יכולות חדשות לשקיפות:

• npx shadcn add button --dry-run — מראה מה היה מתווסף, בלי להוסיף באמת
• npx shadcn add button --diff — משווה את הגרסה ב-Registry לגרסה המקומית שלכם
• npx shadcn add button --view — מראה את הקוד שעומד להיכנס לפרויקט

הכלים האלה שימושיים במיוחד כשעובדים עם AI — אתם יכולים לבדוק מה AI עומד להוסיף לפני שזה קורה.

למה shadcn/ui ניצח — ברירת המחדל של כלי AI

הנה עובדה שכל Vibe Coder צריך לדעת: כמעט כל כלי AI שבונה אתרים משתמש ב-shadcn/ui כברירת מחדל.

למה כולם בחרו דווקא ב-shadcn? 3 סיבות:

1. הקוד גלוי ל-AI — כשהקומפוננטות בתיקיית components/ui, ה-AI יכול לקרוא, להבין ולשנות אותן. בספרייה רגילה (node_modules) — הקוד מוסתר.
2. Tailwind = שפה שAI מדבר — כפי שלמדנו בפרק 04, AI מייצר Tailwind classes מצוין. shadcn בנוי על Tailwind, אז הכל מתחבר.
3. קומפוננטות עקביות — shadcn נותן מערכת עיצוב שלמה. כש-AI בונה Button, Dialog, Card — הכל נראה אחיד כי הכל משתמש באותם design tokens.

shadcn/ui בסטארטאפים ישראליים

אקוסיסטם הסטארטאפים הישראלי — עם למעלה מ-6,000 חברות טכנולוגיה פעילות — אימץ את shadcn/ui במהירות. הסיבה: סטארטאפים ישראליים צריכים לבנות MVP מהר, עם צוות קטן, ולהראות מקצועי. shadcn/ui + AI נותנים בדיוק את זה.

דפוס שכיח בסטארטאפ ישראלי:

1. שלב MVP — בונים ב-V0 או Bolt עם shadcn/ui. בתוך יום-יומיים יש landing page + dashboard בסיסי
2. שלב גדילה — מוסיפים קומפוננטות מ-shadcnblocks (pricing, testimonials, FAQ). מתאימים theme לברנד
3. שלב scaling — אם צריכים data grid מתקדם — מוסיפים את shadcn DataTable עם TanStack Table. אם צריכים charts — מוסיפים Recharts (תואם shadcn)

היתרון: כל השלבים משתמשים באותה מערכת עיצוב. לא צריכים לעשות rewrite כשגדלים.

Radix Primitives — השכבה הנסתרת מתחת

כשאתם פותחים קומפוננטת shadcn ומסתכלים על הקוד, תראו שורות import כאלה:

import * as DialogPrimitive from "@radix-ui/react-dialog"

מה זה Radix Primitives? תחשבו על זה ככה: אם shadcn/ui הוא רכב מוכן לנסיעה, Radix Primitives הוא המנוע שבתוכו. אתם לא רואים את המנוע, אבל בלעדיו — שום דבר לא יזוז.

Radix Primitives הן קומפוננטות headless (ללא עיצוב) שמספקות:

• נגישות (Accessibility) — כל ה-ARIA attributes מוגדרים נכון
• Keyboard navigation — Tab, Enter, Escape, חצים — הכל עובד
• Focus management — כשנפתח dialog, ה-focus עובר אליו. כשנסגר — חוזר
• התנהגות — dialog נסגר ב-Escape, dropdown נסגר בלחיצה בחוץ

Radix הוא הפרויקט הכי פופולרי מסוגו — 130 מיליון הורדות בחודש. הוא מתוחזק על ידי WorkOS.

למה זה חשוב לכם כ-Vibe Coders? כי כשאתם משתמשים ב-shadcn/ui, אתם מקבלים נגישות בחינם. לא צריכים להוסיף aria-label, לא צריכים לדאוג ל-keyboard navigation, לא צריכים לבדוק ש-dialog נסגר ב-Escape. Radix עושה את הכל.

וזה לא רק נחמד — זה דרישת חוק. בישראל, חוק שוויון זכויות לאנשים עם מוגבלות (תקנות נגישות השירות, 2013) מחייב אתרי אינטרנט לעמוד בתקן WCAG 2.1 ברמה AA. אתרים של עסקים ישראליים שלא נגישים עלולים לקבל קנסות של עד 75,000 ש"ח לפי עבירה. כשאתם משתמשים ב-shadcn/ui עם Radix, אתם מקבלים נגישות ברמה AA כמעט אוטומטית — כולל ARIA attributes, keyboard navigation, focus management, ו-screen reader support. זה לא "פיצ'ר נחמד" — זה מגן על העסק שלכם מבחינה משפטית.

דוגמה מעשית: מה Radix עושה ב-Dialog

כשאתם פותחים Dialog של shadcn, Radix דואג בשבילכם ל:

• Focus trap — ה-Tab לא יוצא מה-Dialog. המשתמש לא יכול "ללכת לאיבוד"
• Escape לסגירה — לחיצה על Escape סוגרת את ה-Dialog
• Overlay click — לחיצה על הרקע הכהה סוגרת את ה-Dialog
• aria-describedby — מסביר לקורא מסך מה ה-Dialog מכיל
• Focus return — כשה-Dialog נסגר, ה-focus חוזר לכפתור שפתח אותו

כל זה קורה אוטומטית. אם הייתם בונים Dialog מאפס — הייתם צריכים לכתוב את כל הלוגיקה הזו בעצמכם. עם Radix, אתם מקבלים 100% נגישות בלי מאמץ.

Keyboard Navigation לעומק — מה Radix מטפל בכל קומפוננטה

הנגישות של Radix לא מוגבלת ל-Dialog. הנה מה שקורה בקומפוננטות נפוצות:

שימו לב לשורת ה-Tabs: Radix תומך ב-RTL אוטומטית. כשהאתר ב-dir="rtl", חצים ימינה/שמאלה מתהפכים כדי להתאים לכיוון הקריאה בעברית. זו דוגמה מצוינת למשהו שקל מאוד לשכוח כשבונים מאפס — ו-Radix פשוט מטפל בזה.

ARIA Attributes — מה Radix מוסיף אוטומטית

כשמשתמש עם screen reader (כמו NVDA או VoiceOver) גולש באתר שלכם, הוא צריך לדעת מה כל אלמנט. Radix מוסיף את ה-ARIA attributes שמאפשרים את זה:

• role="dialog" — מודיע ל-screen reader שזה חלון דיאלוג
• aria-expanded="true/false" — מודיע אם תפריט פתוח או סגור
• aria-selected="true" — מסמן את הלשונית/פריט הנבחר
• aria-haspopup="menu" — מודיע שלחיצה תפתח תפריט
• aria-controls="panel-id" — מקשר כפתור לתוכן שהוא שולט בו
• aria-live="polite" — מודיע על שינויים דינמיים בתוכן (Toast)

בלי Radix, הייתם צריכים להוסיף את כל האטריביוטים האלה ידנית — ולבדוק שהם מתעדכנים נכון בכל שינוי state. עם Radix, הכל אוטומטי ומתוחזק.

מתי Radix "נראה" בקוד?

ברוב המקרים, אתם לא צריכים לדעת ש-Radix קיים. הוא "שקוף" — shadcn/ui עוטף אותו ב-API נוח ונקי. אבל יש מצבים שכדאי להכיר:

• כשמשנים התנהגות — למשל, שה-Dialog לא ייסגר בלחיצה בחוץ: מוסיפים prop ל-Radix
• כשבונים קומפוננטה חדשה — אם צריך dropdown ייחודי, אפשר להשתמש ב-Radix ישירות
• כשמדבגים נגישות — מבינים איזה ARIA attributes Radix מוסיף
• כשצריכים התנהגות RTL מותאמת — למשל, Sheet שנפתח מימין בממשק עברי

חדש ב-2026: בגרסת CLI v4 של shadcn (מרץ 2026), אפשר עכשיו לבחור בין Radix UI ל-Base UI (של MUI) כ-primitive engine. ברירת המחדל עדיין Radix, ולרוב אין סיבה לשנות — אבל טוב לדעת שיש בחירה.

הקומפוננטות שחייבים להכיר — הליבה של shadcn/ui

shadcn/ui כולל עשרות קומפוננטות, אבל יש 15 שתראו שוב ושוב בכל פרויקט שAI בונה. בואו נכיר אותן:

קומפוננטות בסיסיות — ה-"לחם וחמאה"

קומפוננטות Layout וניווט

קומפוננטות טפסים ו-Feedback

Button לעומק — Variants ו-Sizes

Button היא הקומפוננטה הבסיסית ביותר, אבל יש לה עומק שכדאי להכיר. shadcn Button תומך ב-6 variants ו-4 sizes:

// דוגמת שימוש ב-variants:
<Button variant="default">שלח טופס</Button>
<Button variant="outline">ביטול</Button>
<Button variant="destructive">מחק חשבון</Button>
<Button variant="ghost" size="icon">
  <Settings className="h-4 w-4" />
</Button>

טיפ: כשמבקשים מ-AI כפתור, ציינו את ה-variant: "add a destructive Button for delete action" ולא סתם "add a red button". ככה AI ישתמש ב-variant המובנה של shadcn עם כל ה-hover states וה-accessibility.

Component Composition — הרכבת קומפוננטות

קומפוננטות shadcn מתוכננות להרכבה (Composition). כלומר, קומפוננטה מורכבת בנויה מחלקים קטנים שאפשר לשלב:

<Card>
  <CardHeader>
    <CardTitle>כותרת</CardTitle>
    <CardDescription>תיאור</CardDescription>
  </CardHeader>
  <CardContent>
    <p>התוכן שלי</p>
  </CardContent>
  <CardFooter>
    <Button>שמור</Button>
  </CardFooter>
</Card>

שימו לב: Card מכיל CardHeader, CardContent, CardFooter. ו-CardFooter מכיל Button. כל חלק עומד בפני עצמו אבל ביחד הם יוצרים כרטיס שלם. זו Composition — אותו עיקרון שמנחה את כל ספריות הקומפוננטות המודרניות.

עוד דוגמאות ל-Composition שתראו בקוד שAI מייצר:

• Dialog = DialogTrigger + DialogContent + DialogHeader + DialogFooter
• Alert = Alert + AlertTitle + AlertDescription
• Table = Table + TableHeader + TableBody + TableRow + TableHead + TableCell

קומפוננטות מורכבות — DataTable, Command ו-Calendar

מעבר לקומפוננטות הבסיסיות, shadcn כולל קומפוננטות מורכבות שחוסכות שעות של עבודה:

Data Table — טבלה עם מיון, פילטר וsearch

Data Table היא לא קומפוננטה בודדת אלא דפוס שימוש שמשלב כמה קומפוננטות: Table + מיון + חיפוש + pagination. ב-shadcn, הטבלה בנויה מעל TanStack Table (ספריית טבלאות חזקה). AI יודע לבנות אותה מצוין:

// Prompt ל-AI:
"Build a data table with shadcn Table showing users.
Include: sortable columns, search filter,
pagination (10 per page), and row selection."

Data Table מורכבת מכמה חלקים שחשוב להכיר:

• Table — הקומפוננטה הבסיסית עם TableHeader, TableBody, TableRow, TableCell
• Column definitions — הגדרה של כל עמודה: header, cell render, sorting, filtering
• Toolbar — שורת חיפוש + פילטרים מעל הטבלה (משתמשים ב-Input + Select + Button)
• Pagination — כפתורי עמודים מתחת לטבלה (עמוד קודם/הבא, מספר שורות לעמוד)
• Row selection — Checkbox בכל שורה לסימון מרובה (לפעולות batch כמו "מחק נבחרים")

טיפ: כשמבקשים DataTable מ-AI, ציינו את ה-data structure. למשל: "columns: name (string, sortable), email (string, searchable), role (enum: admin/user/viewer, filterable), created_at (date, sortable)". ככל שתהיו ספציפיים יותר לגבי סוג הנתונים — AI ייצר טבלה טובה יותר.

Command — Command Palette (Ctrl+K)

אם השתמשתם פעם ב-VS Code ולחצתם Ctrl+K או Cmd+K — אתם מכירים command palette. shadcn מביא את אותו חוויה לאתר שלכם:

// Prompt ל-AI:
"Add a command palette (Ctrl+K) using shadcn Command.
Include: search input, sections for Navigation
and Settings, keyboard shortcuts display."

הקומפוננטה הזו משנה את חוויית השימוש — משתמשים יכולים לחפש כל דבר בלחיצת מקשים. Command מבוססת על cmdk — ספרייה קלה שמנהלת את החיפוש, הסינון וה-keyboard navigation. כש-AI בונה Command, הוא יוצר:

• CommandInput — שדה חיפוש עם focus אוטומטי
• CommandList — רשימת תוצאות שמתעדכנת בזמן אמת
• CommandGroup — קבוצות (דפים, הגדרות, פעולות) עם כותרות
• CommandItem — כל פריט ברשימה, עם icon, label ו-shortcut
• CommandEmpty — הודעה כשאין תוצאות ("לא נמצאו תוצאות")

Calendar ו-DatePicker

בחירת תאריכים היא אחת המשימות הכי מתסכלות בפיתוח web. shadcn פותר את זה עם Calendar (מבוסס react-day-picker):

// Prompt ל-AI:
"Add a DatePicker using shadcn Calendar inside a Popover.
Support: date range selection, disabled past dates,
Hebrew locale."

חשוב לשוק הישראלי: Calendar תומך ב-localization — אפשר להציג חודשים ושמות ימים בעברית. גם בחירת טווח תאריכים (date range) עובדת — שימושי לאתרי הזמנות (מלונות, השכרת רכב) ולדוחות עם סינון לפי תאריך.

Combobox — חיפוש + בחירה

Combobox משלב Input עם Command — שדה שאפשר גם לחפש בו וגם לבחור מרשימה. מושלם לבחירת עיר, מוצר, או כל רשימה ארוכה.

דוגמה מעשית: בטופס עם שדה "עיר" — יש בישראל 250+ ערים ויישובים. Select רגיל עם 250 אפשרויות הוא סיוט. Combobox נותן לכם שדה שמסנן בזמן אמת: מקלידים "תל" — ורואים רק "תל אביב", "תל מונד", "תלפיות". חוסך זמן ומונע שגיאות.

Drawer — פאנל מלמטה (מובייל)

Drawer דומה ל-Sheet אבל נפתח מלמטה — כמו ב-Google Maps או Uber. מותאם במיוחד למובייל כי האגודל מגיע בקלות לתוכן שנכנס מלמטה. ב-דסקטופ, Drawer מתנהג כמו Dialog רגיל.

// Prompt ל-AI:
"Add a Drawer component for mobile product filters.
Include: price range (Slider), category (Select),
sort by (RadioGroup), and Apply button.
On desktop, show as a regular Dialog instead."

Form — טפסים עם validation

shadcn כולל אינטגרציה מובנית עם React Hook Form + Zod — שילוב שמאפשר טפסים עם validation מתקדם. במקום לבנות validation ידנית, מגדירים schema ב-Zod וה-form עובד אוטומטית:

// Prompt ל-AI:
"Build a contact form using shadcn Form with React Hook Form
and Zod validation. Fields: name (required, min 2 chars),
email (required, valid email), phone (optional, Israeli format),
message (required, min 10 chars). Show inline error messages
in Hebrew under each field."

shadcn/ui בשוק הישראלי — RTL, עברית ומקרי שימוש

לשוק הישראלי יש דרישות ייחודיות שחשוב להכיר כשעובדים עם shadcn/ui. בואו נעבור על האתגרים והפתרונות:

RTL — ימין לשמאל

עברית נכתבת מימין לשמאל, ומרבית הקומפוננטות של shadcn תוכננו ל-LTR (שמאל לימין). החדשות הטובות: Tailwind CSS ו-Radix תומכים ב-RTL. המפתח: להוסיף dir="rtl" על <html> ולוודא שמשתמשים ב-logical properties:

• במקום ml-4 (margin-left) — השתמשו ב-ms-4 (margin-start). ב-RTL, "start" הוא ימין
• במקום pl-4 (padding-left) — השתמשו ב-ps-4 (padding-start)
• במקום text-left — השתמשו ב-text-start
• Flexbox — flex-row מתהפך אוטומטית ב-RTL. שורה שרצה שמאל-לימין ב-LTR תרוץ ימין-לשמאל ב-RTL

פונטים עבריים

shadcn משתמש בפונט Inter כברירת מחדל — שתומך באנגלית אבל לא בעברית. לפרויקט ישראלי, צריכים להחליף לפונט עברי:

• Heebo — הפונט העברי הפופולרי ביותר. נקי, מודרני, 9 weights. מומלץ לרוב הפרויקטים
• Assistant — פונט עברי חינמי מ-Google Fonts. קריא מאוד, מתאים ל-UI
• Rubik — עגלגל יותר, מתאים לעיצובים playful. יש לו גם ערבית
• Ploni — פונט ישראלי ממשרד הפרסום McCann. בתשלום, אבל נראה מעולה

מחירים ומטבע

כשבונים עמוד מחירים (pricing) לעסק ישראלי, חשוב לזכור:

• המטבע הוא ₪ (שקל חדש, NIS) — לא $. ציינו ב-prompt "prices in NIS (₪)"
• סימן המטבע ₪ בא אחרי המספר בעברית: "99 ₪" (לא "₪99" כמו באנגלית)
• מע"מ: בישראל מקובל לציין "המחירים כוללים מע"מ" או "בתוספת מע"מ (18%)"
• תעריפים חודשיים/שנתיים: בישראל מקובל "לחודש" / "לשנה" עם הנחה על שנתי (בדרך כלל 20%)

דוגמאות מהשוק הישראלי

הנה סוגי אתרים נפוצים בישראל ואיזה קומפוננטות shadcn מתאימות לכל אחד:

התאמה אישית — Theme, צבעים ו-CSS Variables

זוכרים את design tokens מפרק 04? ב-shadcn/ui, ה-theme מוגדר באמצעות CSS variables בקובץ globals.css:

/* globals.css — ה-theme של shadcn/ui */
: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%;
  --accent: 210 40% 96.1%;
  --destructive: 0 84.2% 60.2%;
  --radius: 0.5rem;
}

.dark {
  --background: 222.2 84% 4.9%;
  --foreground: 210 40% 98%;
  --primary: 210 40% 98%;
  /* ... */
}

מה זה אומר בפועל? שינוי של שורה אחת משנה את כל האתר. אם תשנו את --primary — כל כפתור, כל לינק, כל אלמנט מודגש ישתנה בבת אחת. זה הכוח של CSS variables.

הצבעים ב-shadcn מוגדרים ב-HSL (Hue, Saturation, Lightness) — לא hex. זה מאפשר שליטה עדינה יותר:

Theme מותאם לברנד — תהליך מעשי

הנה תהליך של 5 דקות ליצירת theme מותאם לברנד:

1. בחרו צבע ראשי — מהלוגו או מהברנד. למשל, כחול של סטארטאפ ישראלי: hsl(217, 91%, 60%)
2. גלשו ל-TweakCN — הכניסו את הצבע, ראו איך הוא נראה על כל הקומפוננטות
3. התאימו border-radius — 0 לעיצוב חד/מקצועי, 0.75rem לעיצוב ידידותי, 1rem לעיצוב playful
4. בדקו dark mode — TweakCN מראה גם את גרסת ה-dark. ודאו שהצבעים קריאים
5. העתיקו CSS — הדביקו ב-globals.css. סיימתם.

Presets — חדש ב-CLI v4

במרץ 2026, shadcn הוסיף Presets — חבילות theme מוכנות שכוללות צבעים, פונטים, border-radius ואייקונים. במקום להגדיר כל variable בנפרד, אפשר לטעון preset בפקודה אחת:

# טעינת preset מוכן
npx shadcn init --preset midnight

# presets זמינים:
# default — ברירת מחדל (אפור-כחול)
# midnight — כהה ואלגנטי
# ocean — כחול-ירוק
# forest — ירוק טבעי
# sunset — כתום-אדום חם

אפשר גם ליצור preset מותאם ולשתף עם הצוות — כל מי שירוץ את אותה פקודה יקבל בדיוק אותו theme. זה שימושי במיוחד כשעובדים בצוות על כמה פרויקטים עם אותו ברנד.

shadcn/ui ב-V0 — השילוב המושלם

V0 של Vercel ו-shadcn/ui הם "בני דודים" — שניהם מבית Vercel. זה אומר ש-V0 מכיר את shadcn לעומק ויודע להשתמש בו בצורה אופטימלית.

כשאתם כותבים prompt ב-V0, הוא אוטומטית:

• משתמש בקומפוננטות shadcn/ui (Button, Card, Dialog, וכו')
• מוסיף Tailwind classes לעיצוב
• יוצר imports מ-@/components/ui
• מכבד את ה-theme שהגדרתם

הנה prompts שעובדים מצוין ב-V0 עם shadcn:

// דשבורד:
"Build an admin dashboard with:
- Sidebar using Sheet (mobile) and fixed sidebar (desktop)
- Top bar with user DropdownMenu
- Stats Cards in a grid
- Data Table with users list"

// Landing page:
"Build a SaaS landing page with:
- Hero section with Badge + Button
- Features section using Cards
- Pricing with Tabs (monthly/yearly)
- FAQ with Accordion
- CTA with Dialog for signup"

// טופס:
"Build a multi-step form using shadcn:
- Step 1: personal details (Input, Select)
- Step 2: preferences (Checkbox, RadioGroup)
- Step 3: review (Card summary)
- Progress indicator using Tabs"

מה V0 עושה טוב (ומה פחות)

V0 מצוין ב:

• Layout — sidebars, grids, responsive layouts. V0 מייצר layouts מורכבים בצורה מדהימה
• Composition — שילוב נכון של קומפוננטות (Card בתוך Grid, Dialog עם Form בפנים)
• Styling — גוונים, shadows, spacing — V0 "מרגיש" מה נראה טוב
• Dark mode — V0 מייצר light ו-dark mode ביחד כשמבקשים

V0 פחות טוב ב:

• RTL — צריכים לציין במפורש. V0 לפעמים "שוכח" להפוך icons או spacing ב-RTL
• לוגיקה מורכבת — form validation, API calls, state management. V0 בונה UI מצוין אבל ה-logic צריך עבודה
• עברית — טקסטים placeholder נשארים לפעמים באנגלית גם כשמבקשים עברית. צריכים לבקש ספציפית "all text in Hebrew"

טיפ מתקדם: ב-V0, אפשר "לשלב" — לבנות את ה-UI ב-V0, ואז להעביר ל-Claude/Cursor לעבודה על ה-logic. כל אחד עושה את מה שהוא הכי טוב בו.

חלופות — MUI, Ant Design, Chakra UI ו-Mantine

shadcn/ui הוא ברירת המחדל של כלי AI, אבל הוא לא הספרייה היחידה. יש מצבים שבהם ספרייה אחרת מתאימה יותר. בואו נכיר את החלופות העיקריות:

Material UI (MUI)

MUI היא הספרייה הוותיקה והגדולה ביותר — 6.7 מיליון הורדות שבועיות. היא מבוססת על Material Design של Google ומגיעה עם 70+ קומפוננטות. היתרון: הכל כלול — data grid מתקדם, date pickers, tree view, ועוד. החיסרון: כבדה, עיצוב "גוגלי" שקשה לשנות, ו-CSS-in-JS שהולך ונעלם מהתעשייה.

MUI מחולקת ל-3 חלקים:

• MUI Core — הקומפוננטות הבסיסיות (חינמי, open-source). כולל Button, TextField, Dialog, Drawer, AppBar ועוד 60+ קומפוננטות
• MUI X — קומפוננטות מתקדמות (חלקן בתשלום). כולל DataGrid (הכי חזק בשוק — מיון, פילטר, grouping, aggregation, export ל-Excel), Date Pickers מתקדמים, Tree View, ו-Charts
• MUI Templates — תבניות מוכנות לדשבורדים, landing pages, ו-admin panels (בתשלום, מ-$49)

מתי לבחור MUI: כשבונים אפליקציית enterprise עם טבלאות מורכבות (אלפי שורות עם grouping ו-export), כשהעיצוב הוא Material Design (מוכר למשתמשים מאפליקציות Google), או כשהצוות כבר מכיר MUI מפרויקטים קודמים. חברות ישראליות רבות בתחום ה-fintech וה-SaaS — כמו Monday.com ו-Wix — השתמשו ב-MUI בגרסאות קודמות של המוצרים שלהן.

Ant Design

Ant Design היא הבחירה של ענקיות הטכנולוגיה הסיניות (Alibaba, Tencent). יש לה 60+ קומפוננטות עם ProComponents — סט מתקדם לבניית דשבורדים ואפליקציות enterprise. היתרון: הכי הרבה פיצ'רים מובנים לטפסים וטבלאות. החיסרון: עיצוב שונה מהסטנדרט המערבי, ותיעוד שחלקו עדיין בסינית.

מה מייחד את Ant Design:

• ProTable — טבלה שכוללת חיפוש, פילטרים, עמודות מותאמות, ו-export מהקופסה. לא צריך לבנות שום דבר — רק להעביר data
• ProForm — מערכת טפסים שתומכת ב-step forms, dependent fields, ו-validation מורכב. מושלם לטפסי רישום ארוכים
• ProLayout — layout לדשבורד שלם עם sidebar, breadcrumbs, ו-routing מובנה
• Ant Design Charts — ספריית גרפים מלאה (מבוססת G2) עם 30+ סוגי גרפים

מתי לבחור Ant Design: כשבונים back-office או CRM עם טפסים מורכבים (10+ שדות, תלויות בין שדות), כשצריכים ProTable עם פילטרים מתקדמים, או כשהמוצר מכוון לשוק האסייתי. בישראל, Ant Design פחות נפוצה — אבל אם בונים מוצר data-heavy עם הרבה טבלאות וטפסים, ProComponents חוסכים שבועות של עבודה.

Chakra UI

Chakra UI דומה לגישה של shadcn — פשוטה, נגישה, ו-developer friendly. ההבדל: היא npm install רגיל, לא copy-paste. היתרון: API נקי ופשוט. החיסרון: פחות קומפוננטות מ-shadcn, קהילה קטנה יותר, פחות תמיכה בכלי AI.

מה כדאי לדעת על Chakra UI:

• Style props — במקום Tailwind classes, Chakra משתמשת ב-props ישירות: <Box p={4} bg="blue.500">. זה נוח אבל שונה מ-Tailwind
• Chakra v3 (2025) — שינוי ארכיטקטורה משמעותי. עברה מ-Emotion (CSS-in-JS) ל-Panda CSS (zero-runtime). זה פותר את בעיית הביצועים אבל שבר backward compatibility
• נגישות מובנית — כמו Radix, Chakra שמה דגש חזק על ARIA ו-keyboard navigation
• Color mode — dark mode/light mode toggle מובנה וקל לשימוש

מתי לבחור Chakra UI: כשמעדיפים style props על פני Tailwind classes, כשבונים אפליקציה קטנה-בינונית שצריכה להיראות נקייה, או כשהצוות כבר מכיר את ה-API של Chakra. שימו לב שכלי AI מייצרים Chakra פחות טוב מ-shadcn — כי הם מאומנים בעיקר על Tailwind.

Mantine

Mantine היא הכוכב העולה של 2026 — 1.35 מיליון הורדות שבועיות (צמיחה של 50% בחצי שנה). יש לה 100+ קומפוננטות, hooks library עשירה, rich text editor מובנה, ותמיכת SSR מצוינת עם CSS Modules (לא CSS-in-JS). אם הייתם בוחרים ספרייה שאינה shadcn בפרויקט חדש היום — Mantine הייתה מועמדת רצינית.

מה מייחד את Mantine:

• Mantine Hooks — 60+ hooks שימושיים: useClipboard, useMediaQuery, useIntersection, useHotkeys — עוזרים גם בלי הקומפוננטות עצמן
• Rich Text Editor — עורך טקסט WYSIWYG מובנה (מבוסס Tiptap). בספריות אחרות צריכים לחפש ספרייה נפרדת
• Spotlight — command palette כמו shadcn Command, אבל עם חיפוש actions מובנה
• Notifications — מערכת Toast/notifications מובנית עם queue management
• CSS Modules — לא CSS-in-JS, לא Tailwind. מערכת styling עצמאית שעובדת מצוין עם SSR

מתי לבחור Mantine: כשצריכים הכי הרבה "מהקופסה" — rich text editor, date pickers מתקדמים, hooks library. כשלא רוצים Tailwind (כן, יש כאלה). או כשבונים full-stack app שצריכה הכל מספרייה אחת.

מתי לבחור כל ספרייה — Decision Matrix

האקוסיסטם — Shadcnblocks, TweakCN, AllShadcn ועוד

אחד היתרונות הגדולים של shadcn/ui הוא האקוסיסטם שנבנה סביבו. יש עשרות כלים, אתרים ומשאבים שמרחיבים את מה ש-shadcn מציע. הנה החשובים ביותר:

Shadcnblocks — 1,429 בלוקים מוכנים

shadcnblocks.com הוא אוסף ענק של sections שלמים — Hero, Pricing, FAQ, Features, Testimonials, Footer ועוד. כל block מוכן ל-copy-paste ועובד עם shadcn/ui + Tailwind.

• 55 בלוקים חינמיים — מספיק להתחלה
• ניתן להתקין דרך shadcn CLI: npx shadcn add [block-name]
• כל הבלוקים responsive ותומכים ב-dark mode

הבלוקים מחולקים לקטגוריות שכל Vibe Coder צריך להכיר:

טיפ לשוק הישראלי: רוב הבלוקים ב-shadcnblocks מעוצבים ל-LTR. כשמעתיקים block לפרויקט עברי, צריכים להוסיף dir="rtl" ולוודא שה-layout מתהפך נכון. ברוב המקרים, Tailwind ו-flexbox עושים את ההיפוך אוטומטית — אבל כדאי לבדוק אלמנטים עם margin-left או text-align ספציפיים.

TweakCN — עורך Theme ויזואלי

tweakcn.com הוא עורך theme ויזואלי וחינמי ל-shadcn/ui. במקום לערוך CSS variables ידנית, אתם:

1. משנים צבעים ב-sliders ויזואליים — hue, saturation, lightness
2. משנים border-radius, fonts, ו-spacing
3. רואים preview בזמן אמת על כל הקומפוננטות — Button, Card, Dialog, Input וכו'
4. בודקים light mode ו-dark mode במקביל
5. מקבלים CSS מוכן ל-copy-paste — מדביקים ב-globals.css

תומך ב-Tailwind v3 ו-v4, כולל theme presets מוכנים. יש גם אפשרות לייצא theme כ-JSON preset לשימוש חוזר בפרויקטים אחרים.

למה TweakCN חשוב: בלי כלי ויזואלי, לשנות theme של shadcn זה "ניחוש" — משנים מספר HSL, רעננים את הדפדפן, רואים שלא מדויק, חוזרים. עם TweakCN, רואים את התוצאה בזמן אמת ומקבלים CSS מוכן. זה חוסך 30-60 דקות של ניסוי וטעייה.

awesome-shadcn-ui — הרשימה המרכזית

awesome-shadcn-ui הוא GitHub repo עם 170+ משאבים — קומפוננטות, templates, כלים, starters ועוד. אם אתם מחפשים משהו שקשור ל-shadcn — התחילו כאן.

הרשימה מחולקת לקטגוריות שכדאי להכיר:

• Components — קומפוננטות נוספות שלא נכללות ב-shadcn הרשמי (file upload, kanban board, multi-select, phone input)
• Templates/Starters — פרויקטים מוכנים להפעלה (SaaS starter, e-commerce, blog, portfolio) — חוסכים שעות של setup
• Tools — כלי עזר כמו TweakCN, theme generators, icon packs, animation libraries
• Ports — shadcn שפורט ל-frameworks אחרים: Svelte, Vue, Solid, Angular — אם יום אחד תעברו מ-React

טיפ: כשצריכים קומפוננטה שלא קיימת ב-shadcn (למשל, file upload עם drag & drop, או multi-select עם search), חפשו ב-awesome-shadcn-ui לפני שבונים מאפס. ברוב המקרים — מישהו כבר בנה את זה.

AllShadcn + Shoogle — חיפוש באקוסיסטם

allshadcn.com הוא אגרגטור שמרכז קומפוננטות, templates ו-blocks מכל הספריות ה-shadcn-compatible. הכלי הכי שימושי שם: Shoogle — "Google ל-shadcn" — מנוע חיפוש שעוזר למצוא בדיוק את הקומפוננטה שאתם צריכים.

איך Shoogle עובד בפועל: אתם מקלידים "kanban board" או "file upload" — ו-Shoogle מחזיר תוצאות מכל האקוסיסטם: shadcn הרשמי, shadcnblocks, ספריות צד שלישי, ו-GitHub repos. במקום לחפש ב-10 אתרים שונים — מקום אחד.

עוד כלים שכדאי להכיר

• shadcn-form-builder — כלי ויזואלי לבניית טפסים עם shadcn. גוררים שדות, מגדירים validation — ומקבלים קוד React מוכן
• v0.dev/themes — Vercel הוסיפה אוסף themes ל-shadcn ישירות ב-V0. אפשר לצפות ב-preview ולהתקין בפקודה אחת
• shadcn-table — קומפוננטת DataTable מתקדמת מעל shadcn Table עם server-side pagination, faceted filters, ו-column visibility
• origin-ui — אוסף של 250+ בלוקים קטנים (micro-blocks) שמתאימים ל-shadcn — כפתורים, inputs, cards בווריאציות שונות

שיחה עם AI על קומפוננטות — המונחים שעוזרים

עכשיו שאתם מכירים את shadcn/ui ואת האקוסיסטם — הנה איך לדבר עם AI כדי לקבל תוצאות טובות יותר. הכלל: ככל שתהיו ספציפיים יותר, התוצאה תהיה טובה יותר.

Prompt Template לקומפוננטות

// Template בסיסי:
"Build [COMPONENT_TYPE] using shadcn/ui [COMPONENT_NAMES].
Requirements:
- [FEATURE 1]
- [FEATURE 2]
- Theme: [PRIMARY_COLOR], border-radius [SIZE]
- RTL support with dir='rtl'
- Dark mode support
- Responsive: [MOBILE_BEHAVIOR] / [DESKTOP_BEHAVIOR]"

// דוגמה מלאה:
"Build a pricing section using shadcn Card, Badge, Button, and Tabs.
Requirements:
- 3 tiers: Basic, Pro, Enterprise
- Monthly/Yearly toggle with Tabs
- Most popular tier highlighted with Badge
- Theme: purple primary, rounded-lg
- RTL support with dir='rtl'
- Responsive: stacked on mobile, 3 columns on desktop"

מונחים שמשפרים תוצאות

Prompt Templates לתרחישים נפוצים בשוק הישראלי

הנה templates ספציפיים שמתאימים לפרויקטים נפוצים בישראל:

// דף נחיתה לעסק ישראלי:
"Build a Hebrew RTL landing page for an Israeli business using shadcn/ui.
Include:
- Hero section with Badge (מבצע), heading, and 2 Buttons (CTA primary + secondary)
- Features section with 4 Cards (icon + title + description)
- Pricing section with 3 Cards and Tabs (monthly/yearly), prices in NIS (₪)
- Testimonials with 3 Cards showing customer name, company, quote
- Contact form with Input (name, email, phone), Textarea, Select (subject), Button
- Footer with logo, links, social icons
- Theme: dir='rtl', Hebrew font (Heebo), blue primary
- Dark mode toggle with shadcn Toggle"

// טופס הרשמה עם שדות ישראליים:
"Build a registration form using shadcn/ui for Israeli users.
Fields:
- Input: שם מלא (full name)
- Input: אימייל (email) with validation
- Input: טלפון (phone) with +972 prefix and pattern validation
- Input: ת.ז. (ID number) with 9-digit validation
- Select: עיר (city) with Israeli cities list
- Checkbox: אישור תנאי שימוש
- Button: הרשמה (submit)
Layout: RTL, inside a Card with CardHeader, responsive (single column mobile, 2 columns desktop)"

// דשבורד ניהול ישראלי:
"Build an admin dashboard in Hebrew RTL using shadcn/ui.
Include:
- Sidebar with NavigationMenu (דף הבית, לקוחות, הזמנות, דוחות, הגדרות)
- Top bar with user DropdownMenu and notifications Badge
- 4 KPI Cards: הכנסות (₪), הזמנות חדשות, לקוחות פעילים, שיעור המרה
- DataTable for orders: מספר הזמנה, לקוח, סכום (₪), סטטוס (Badge), תאריך
- Tabs: סקירה כללית / ניתוח / דוחות
- Command palette (Ctrl+K) for quick navigation"

טיפים לעבודה עם AI בעברית וקומפוננטות

• כתבו prompts באנגלית — גם אם התוכן בעברית. AI מייצר קוד טוב יותר כשה-prompt באנגלית. התוכן עצמו (labels, headings) כתבו בעברית בתוך ה-prompt
• תמיד ציינו dir="rtl" — בלי זה, AI ייצר layout ל-LTR וה-layout יהיה הפוך
• ציינו פונט עברי — font-family: Heebo או font-family: Assistant. בלי זה, AI עלול להשתמש בפונט שלא תומך בעברית
• מחירים ב-NIS — כתבו "prices in NIS (₪)" כדי שה-AI ישתמש בסימן ₪ ולא $
• ציינו Sheet direction — ב-RTL, Sheet שנפתח "מימין" הוא בעצם מ-side="right". ב-LTR זה ימין, אבל ב-RTL זה צד ההתחלה — שימו לב לכיוון

תרגילים

שגרת עבודה — קומפוננטות ביום-יום

בדוק את עצמך