RetroUI 2.0 כאן: גדול יותר, נועז יותר, טוב יותר

חודשים שלמים בנינו בחושך. היום אנחנו מדליקים את האור.

RetroUI 2.0 כאן, וזה העדכון הגדול ביותר ששחררנו אי פעם. זה לא סתם קפיצת גרסה - זו התפתחות מלאה של מה ש-RetroUI מסוגלת לעשות ושל האופן שבו אתם עובדים איתה.

כשהשקנו את RetroUI, המטרה הייתה פשוטה: לתת למפתחים ספריית ממשק שלא נראית כמו כל השאר. עיצובים נועזים, אסתטיקה נאו-ברוטליסטית, ורכיבים שגורמים לפרויקטים שלכם לבלוט. החזון הזה לא השתנה. אבל הדרך שבה אנחנו מגשימים אותו? היא עברה מהפך.

בואו נצלול לכל מה שחדש.

🎨 תמיכה ב-Base UI - היסוד שביקשתם

אחת הבקשות הנפוצות ביותר מהיום הראשון הייתה תמיכה ב-Base UI, וסוף סוף היא כאן.

מה זה Base UI?

Base UI היא ספרייה של רכיבי React נגישים וללא עיצוב, שנבנתה על ידי צוות MUI. חשבו עליה כחלופה ה-headless והבלתי-תלויה בפריימוורק ל-Material UI - אתם מקבלים את כל ההתנהגות ואת לוגיקת הנגישות, בלי שום דעה קדומה על עיצוב.

למה זה משנה ל-RetroUI

עד עכשיו רכיבי RetroUI נבנו על גבי הפרימיטיבים של Radix UI (שהם מצוינים, אל תבינו אותנו לא נכון). אבל Base UI פותחת אפשרויות חדשות:

• גמישות בין פריימוורקים: Base UI עובדת בצורה חלקה על פני React, Next.js ופריימוורקים מודרניים נוספים
• Tree-shaking טוב יותר: גדלי bundle קטנים יותר עם אופטימיזציה משופרת
• נגישות משופרת: פרימיטיבי הנגישות של Base UI מנוסים בשטח ותואמי WCAG כבר מהרגע הראשון
• ארכיטקטורה ערוכה לעתיד: נבנתה עבור React Server Components והאקוסיסטם המודרני של React

מה זה אומר עבורכם? רכיבי RetroUI מהירים יותר, נגישים יותר וגמישים יותר מאי פעם. וכל זה תוך שמירה על שפת העיצוב הנועזת והייחודית שאתם אוהבים.

העתקה// Now powered by Base UI under the hood
import { Button } from '@/components/neobrutalism'
 
<Button variant="primary">
  Still bold. Still RetroUI. Now even better.
</Button>

🌐 אתר אחד, חזון אחד - OS ו-Pro מתאחדים

משהו הפריע לנו: אתרים נפרדים ל-RetroUI OS (החינמי) ול-RetroUI Pro הרגישו... מפוצלים. כאילו אנחנו מפרקים את הקהילה שלנו במקום לחבר אותה.

זה נגמר.

אתר שעוצב מחדש מהיסוד

בנינו מחדש את כל אתר RetroUI מאפס, ואיחדנו את OS ואת Pro לחוויה אחת קוהרנטית. הנה מה שחדש:

ספריית רכיבים מאוחדת

עיינו בכל הרכיבים - חינמיים ומקצועיים - במקום אחד. בלי לקפוץ בין אתרים כדי לראות מה זמין. הכול מסומן בבירור, כך שאתם יודעים מה חינמי ומה פרימיום.

ניווט נקי יותר

למצוא את מה שאתם צריכים מהיר ואינטואיטיבי יותר. רכיבים, בלוקים, תבניות, תיעוד - לכל דבר יש בית הגיוני.

עיצוב מלוטש יותר

אנחנו מיישמים את מה שאנחנו מטיפים לו. האתר החדש נועז יותר, מהיר יותר ומעודן יותר. הוא חלון ראווה למה ש-RetroUI מסוגלת לעשות כשמתחייבים לאסתטיקה.

חוויה טובה יותר במובייל

האתר הישן עבד במובייל. החדש זורח במובייל. עיצוב רספונסיבי כמו שצריך, עם אינטראקציות מגע שמרגישות טבעיות.

והחלק הכי טוב? כל זה מונע על ידי רכיבי RetroUI. אנחנו אוכלים את המנה שלנו בעצמנו, מה שאומר שכל רכיב שאתם רואים באתר הוא משהו שאתם יכולים להשתמש בו בפרויקטים שלכם.

📚 תיעוד שבאמת עוזר

בואו נדבר בכנות: תיעוד הוא לרוב מחשבה שנייה. לא הפעם.

שיפצנו לחלוטין את התיעוד של RetroUI עם יכולות שהופכות את החיים שלכם לקלים יותר:

העתקה כ-Markdown

עובדים על תיעוד לפרויקט שלכם? כותבים פוסט על RetroUI? עכשיו אתם יכולים להעתיק קוד רכיב כ-Markdown בלחיצה אחת.

מושלם עבור:

• יצירת תיעוד רכיבים משלכם
• כתיבת מדריכים והדרכות
• שיתוף דוגמאות קוד בכלים מבוססי Markdown (Notion, GitHub וכדומה)

תיעוד מונע בינה מלאכותית

שילבנו סיוע של בינה מלאכותית ישירות בתיעוד. יש לכם שאלה על התאמת רכיב? צריכים להבין את ה-API? הבינה המלאכותית תעזור לכם למצוא תשובות מהר יותר מלחפור בעמודי תיעוד.

דוגמאות למה שאפשר לשאול:

• "איך אני גורם לרכיב Button להשתמש בצבעים מותאמים אישית?"
• "אילו props רכיב Card מקבל?"
• "הראה לי דוגמאות לשימוש ב-Modal עם טפסים"

זה כמו שיהיה לכם מומחה RetroUI בכוננות, 24/7.

דוגמאות קוד משופרות

לכל רכיב יש עכשיו:

• תצוגות חיות שאפשר לתקשר איתן
• מספר וריאציות שמציגות מקרי שימוש שונים
• קוד מוכן להעתקה עם ה-imports הנכונים
• דוגמאות TypeScript לבטיחות טיפוסים טובה יותר
• הערות נגישות שמסבירות איך כל רכיב מטפל ב-a11y

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

🧱 יותר מ-100 בלוקים חדשים - בנו מהר מאי פעם

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

כאן נכנסים הבלוקים.

מה זה בלוקים?

בלוקים הם מקטעים מוכנים מראש שאתם משחילים לפרויקט: מקטעי hero, טבלאות תמחור, רשתות תכונות, המלצות, קריאות לפעולה ועוד. הם רספונסיביים לחלוטין, נגישים ומוכנים להתאמה.

מה חדש ב-2.0?

הוספנו יותר מ-100 בלוקים חדשים בכל קטגוריה שתעלה על דעתכם:

מקטעי Hero

• יותר מ-15 וריאציות hero חדשות, ממינימליסטי ועד full-bleed
• כולל רקעים מונפשים, פריסות split-screen ו-hero עם וידאו

תכונות ויתרונות

• רשתות תכונות מבוססות אייקונים
• תצוגות צילומי מסך
• מדריכים שלב אחר שלב
• טבלאות השוואה

טבלאות תמחור

• מפריסות פשוטות של 2 עמודות ועד תמחור מורכב של 4 שכבות
• מתג חיוב (חודשי/שנתי)
• מטריצות השוואת תכונות

המלצות

• פריסות רשת, קרוסלות ועיצובי masonry
• המלצות וידאו
• קירות לוגו להוכחה חברתית

קריאות לפעולה והמרות

• הרשמות לניוזלטר
• טפסי רשימת המתנה
• מקטעי הורדת אפליקציה
• טפסי יצירת קשר עם אופי

כותרות וניווט

• תפריטי מגה
• דפוסי ניווט mobile-first
• כותרות דביקות עם אפקטי גלילה

כותרות תחתונות

• כותרות תחתונות רב-עמודתיות
• כותרות תחתונות מינימליות בשורה אחת
• כותרות תחתונות עם ניוזלטר משולב

כל בלוק נבנה באותה אסתטיקה נועזת של RetroUI - גבולות עבים, צללים חדים, צבעים חיים ופריסות אסימטריות. הם מעוצבים כדי לבלוט, לא כדי להתמזג.

העתקה// Drop in a complete hero section in seconds
import { HeroBold } from '@/components/blocks'
 
<HeroBold
  title="Your Product Name"
  subtitle="Ship faster with bold design"
  cta="Get Started"
/>

🌙 תבנית חדשה: Dark Mode Dev Tool Dashboard

תבניות הן המקום שבו הכול מתחבר - רכיבים, בלוקים ופילוסופיית עיצוב מאוחדים לאפליקציה שלמה.

מציגים את התבנית החדשה שלנו: ה-Dark Mode Dev Tool Dashboard.

מה זה?

דאשבורד עתיר יכולות, מבוסס dark-mode-first, שנבנה עבור כלי מפתחים, פלטפורמות SaaS ופאנלי ניהול. זה כל מה שאתם צריכים כדי לבנות אפליקציה מוכנה לפרודקשן באסתטיקה הנועזת של RetroUI.

מה כלול?

פריסת דאשבורד מלאה

• ניווט sidebar עם תפריט מתקפל
• כותרת עליונה עם חיפוש ופרופיל משתמש
• עיצוב רספונסיבי שעובד במובייל, בטאבלט ובדסקטופ

עמודים מוכנים מראש

• סקירת דאשבורד עם מדדים וגרפים
• ניהול משתמשים (רשימה, פירוט, עריכה)
• עמוד הגדרות עם דוגמאות טפסים
• עמוד תיעוד API
• ניהול חיוב ומנויים

Dark Mode כמו שצריך

• לא סתם צבעים הפוכים - עוצב בכוונה עבור רקעים כהים
• ניגודיות גבוהה לקריאוּת
• צבעי הדגשה חיים שקופצים על רקעים כהים

יכולות מוכנות לפרודקשן

• מסכי אימות (התחברות, הרשמה, שכחתי סיסמה)
• מצבי שגיאה ומצבים ריקים
• שלדי טעינה
• התראות toast
• דיאלוגי modal ואישורים

ידידותי למפתחים

• נבנה עם TypeScript
• מבנה רכיבים מתועד
• קל להתאמה ולהרחבה
• עוקב אחר מוסכמות ה-App Router של Next.js

זו לא תבנית צעצוע. זה יסוד שאפשר לבנות עליו מוצרים אמיתיים. בין אם אתם משיקים SaaS חדש, בונים כלי פנימי או יוצרים פלטפורמת מפתחים - התבנית הזו נותנת לכם ראש התחלה.

וכן, היא לא נראית כמו כל תבנית דאשבורד אחרת שם בחוץ. זו בדיוק הנקודה.

למה זה משנה

RetroUI 2.0 אינה רק הוספת יכולות. היא הופכת את RetroUI לחזקה יותר, גמישה יותר ושימושית יותר לפרויקטים אמיתיים.

תמיכה ב-Base UI משמעה ביצועים ונגישות טובים יותר.

אתר מאוחד משמעו גילוי קל יותר וחוויה טובה יותר לכולם.

תיעוד משופר משמעו פחות זמן בחיפוש, יותר זמן בבנייה.

יותר מ-100 בלוקים חדשים משמעם שאתם יכולים לשחרר עמודים שלמים בדקות, לא בימים.

תבנית dark mode משמעה שיש לכם יסוד מוצק לפרויקט הבא שלכם.

יחד, העדכונים האלה הופכים את RetroUI 2.0 לספריית הממשק המלאה והמוכנה-לפרודקשן ביותר עבור מפתחים שמסרבים לבנות ממשקים משעממים.

מה הלאה?

זו הוצאה גדולה, אבל אנחנו לא עוצרים כאן. הנה מה שעל מפת הדרכים:

• עוד תבניות (וריאציות light mode, עמודי נחיתה, מסחר אלקטרוני)
• אינטגרציית Figma to Code לזרימת עבודה מהירה יותר מעיצוב לפיתוח
• רכיבי Base UI נוספים ככל שנרחיב את הספרייה
• חלון ראווה קהילתי שמציג פרויקטים שנבנו עם RetroUI
• מדריכי וידאו שעוברים על דפוסים ומקרי שימוש נפוצים

ואנחנו גם מקשיבים. אם יש רכיב שאתם צריכים, יכולת שאתם רוצים או בעיה שאתם נתקלים בה - ספרו לנו. RetroUI נבנית עבור מפתחים, בידי מפתחים. המשוב שלכם מעצב את מה שנבנה בהמשך.

נסו את RetroUI 2.0 היום

מוכנים לצלול? הנה איך מתחילים:

למשתמשים חדשים

העתקה# Install RetroUI
npx retroui-cli init
 
# Or install via npm
npm install @retroui/react

עיינו ברכיבים, חקרו את הבלוקים ותפסו את התבנית החדשה. הכול מוכן לשימוש בפרויקט ה-Next.js, ה-React או ה-Vite שלכם.

למשתמשים קיימים

אם אתם כבר משתמשים ב-RetroUI, השדרוג ל-2.0 פשוט:

pnpmnpmyarnbun
pnpm add @retroui/react@latest
npm install @retroui/react@latest
yarn add @retroui/react@latest
bun add @retroui/react@latest
העתקה

בדקו את ה-changelog לגבי שינויים שוברים (יש מעט מאוד, ותיעדנו פתרונות עוקפים לכולם).

תודה

RetroUI קיימת כי מפתחים כמוכם עייפו מעיצובים גנריים. אתם רוצים לבנות דברים שבולטים, שיש להם אופי, שמרגישים אחרת.

אנחנו כאן כדי להקל על זה.

גרסה 2.0 היא תוצאה של חודשים של עבודה, מאות commits, אינספור איטרציות עיצוב ומשוב מקהילה מדהימה. תודה שאתם חלק מהמסע הזה.

עכשיו לכו לבנות משהו נועז. 🚀

גלו את RetroUI 2.0:

• עיינו ברכיבים
• בדקו את הבלוקים
• תפסו את התבנית
• קראו את התיעוד
• הצטרפו לקהילה

שאלות? משוב? מצאתם באג? פתחו issue ב-GitHub או פנו אלינו ב-Twitter/X.