بلاک‌ها
۲۲۶ صفحهٔ کاملِ آماده که فقط از کامپوننت‌های دیگ ساخته شده‌اند و بازبینی و تایپ‌چک شده‌اند. کدشان را کپی کنید یا بگذارید ایجنت با ابزارِ get_block در MCP دیگ از همین‌ها شروع کند.
ورود و ثبت‌نام
تأیید کد پیامکی
همان ساختارِ ورود و ثبت‌نام: کدِ ۶ رقمی با خطای کدِ نادرست، شمارشِ معکوسِ ارسالِ دوباره و ویرایشِ شماره؛ پنلِ برند کنارش.
۷ کامپوننت: avatar, button, control-size, icons, input-otp, link, persian
فراموشی رمز
همان ساختارِ ورود و ثبت‌نام: سه قدمِ شماره، کدِ پیامکی و رمزِ تازه با مراحل، در ستونِ فرم؛ پنلِ برند کنارش و پیامِ موفقیت.
۱۰ کامپوننت: avatar, button, control-size, icons, input-otp, link, password-field, persian, stepper, text-field
بانکی و پرداخت
کارت به کارت
انتقال وجه: حساب مبدأ، شماره کارت مقصد، مبلغ با کنترل موجودی، تأیید خلاصه و رمز پویا.
۱۴ کامپوننت: alert-dialog, avatar, bank-logo, button, control-size, dialog, icons, input-otp, label, persian, select, separator, text-field, toast
پرداخت قبض
پرداخت قبض با نوع قبض، شناسهٔ قبض و پرداخت، و خلاصهٔ مبلغ.
۹ کامپوننت: button, card, control-size, label, persian, separator, text-field, toast, toggle-group
محاسبهٔ وام
مبلغ وام، تعداد اقساط و نرخ سود با محاسبهٔ قسط ماهانه و جمع بازپرداخت.
۶ کامپوننت: button, control-size, label, persian, slider, toggle-group
مدیریت کارت‌ها
کارت‌های بانکی با شمارهٔ پوشیده، کارت اصلی، مسدودسازی موقت و حذف با تأیید.
۱۴ کامپوننت: alert-dialog, badge, bank-logo, button, card, control-size, dialog, dropdown-menu, icons, label, persian, switch, text-field, toast
فروشگاهی
فهرست محصولات
کارت‌های محصول با فیلتر دسته، بازهٔ قیمت و امتیاز، فیلترهای فعال و مرتب‌سازی.
۲۰ کامپوننت: accordion, add-to-cart, badge, breadcrumb, button, checkbox, chip, control-size, empty-state, icons, input, label, pagination, persian, product-card, rating, search-field, slider, toast, toggle-group
صفحهٔ برند
صفحهٔ برند یا فروشنده: کاورِ عکس، نشانِ برند روی لبه با تیکِ تأیید، آمار (امتیاز، کالا، دنبال‌کننده)، دنبال‌کردن، معرفیِ کوتاه و کالاهای برند با مرتب‌سازیِ سگمنت.
۷ کامپوننت: add-to-cart, button, control-size, icons, persian, product-card, toggle-group
جزئیات محصول
گالری تصاویر، امتیاز، قیمت، انتخاب رنگ و تعداد، افزودن به سبد، مشخصات و معرفی.
۱۲ کامپوننت: add-to-cart, badge, button, chip, color-swatch-picker, control-size, icons, label, persian, product-card, tabs, toggle-group
رسید سفارش
بعد از پرداخت: تیکِ موفقیت و شمارهٔ سفارش با کپی، زمانِ تحویل و مراحلِ ارسال، اقلام با عکس، ریزِ مبلغ روی سطحِ subtle، نشانیِ تحویل و کنش‌های پیگیری، ادامهٔ خرید و دانلودِ فاکتور.
۶ کامپوننت: button, control-size, icons, persian, stepper, toast
مرجوعیِ کالا
مرجوعی در سه قدم: انتخابِ اقلام با عکس، دلیل (و عکسِ آسیب در صورتِ نیاز) و روشِ برگشت؛ مبلغِ بازگشتی در ستونِ کنار و پایان با کدِ پیگیری.
۱۱ کامپوننت: button, checkbox, control-size, file-upload, icons, label, persian, radio-group, select, stepper, textarea
مقایسهٔ کالا
هر ستون یک کالا با عکس، قیمت، امتیاز و افزودن به سبد؛ ردیف‌های مشخصات با تیک و خط؛ «فقط تفاوت‌ها» با سوییچ و حذفِ هر ستون تا حداقل دو کالا.
۱۰ کامپوننت: add-to-cart, badge, button, control-size, icons, label, persian, rating, switch, table
علاقه‌مندی‌ها
گریدِ کارتِ محصول با عکس، تبِ همه/تخفیف‌دار/موجود، برداشتن با امکانِ برگرداندن، افزودن به سبد و «موجود شد خبرم کن» برای ناموجودها، و حالتِ خالی.
۱۰ کامپوننت: add-to-cart, badge, button, control-size, empty-state, icons, persian, product-card, toast, toggle-group
تسویه حساب
مراحل خرید، روش ارسال، روش پرداخت و خلاصهٔ سفارش.
۱۱ کامپوننت: button, card, control-size, icons, label, persian, radio-group, separator, stepper, text-field, toast
آدرس ارسال
فرم آدرس با استان و شهر، نشانی، پلاک و واحد، کد پستی و مشخصات گیرنده.
۱۴ کامپوننت: autocomplete, badge, button, card, checkbox, control-size, icons, iran-locations, label, persian, radio-group, text-field, textarea, toast
پیگیری سفارش
استعلام با کد پیگیری و مراحل ارسال سفارش.
۱۰ کامپوننت: avatar, badge, button, card, control-size, icons, persian, progress, stepper, text-field
نظرات و امتیاز
میانگین و توزیع امتیاز، فرم ثبت نظر با امتیاز و فهرست نظرات.
۱۲ کامپوننت: avatar, badge, button, control-size, icons, label, persian, rating, stat-tile, textarea, toast, toggle-group
حساب کاربری
دعوت از دوستان
کد و لینک دعوت با دکمهٔ کپی و آمار دعوت‌ها و اعتبار.
۸ کامپوننت: avatar, badge, button, card, control-size, icons, persian, progress
راه‌اندازی حساب
آن‌بوردینگِ سه‌قدمی: مراحلِ عمودی روی سطحِ subtle (موبایل: افقی)، نام و نشانیِ فضای کار، هدف با کارت‌های رادیویی، دعوتِ تیم با چیپِ ایمیل و «فعلاً نه»، و صفحهٔ پایانی با عکس و رفتن به داشبورد.
۱۰ کامپوننت: button, chip, control-size, icons, input, label, persian, radio-group, stepper, text-field
صورتحساب و اشتراک
پلنِ فعلی روی کارتِ برند با تمدید، ارتقا و لغو با تأیید؛ مصرفِ هر سهمیه با هشدارِ نزدیک به سقف؛ کارتِ بانکیِ ماسک‌شده و تاریخچهٔ فاکتورها با وضعیت، پرداختِ دوباره و دانلود.
۱۰ کامپوننت: alert-dialog, badge, button, card, control-size, icons, persian, progress, table, toast
حالت‌های خالی
چهار حالتِ خالی با دلیل و قدمِ بعدیِ روشن: اولین بار (ساختن)، جست‌وجوی بی‌نتیجه (پاک‌کردنِ فیلتر)، خطای بارگذاری (تلاشِ دوباره) و نبودِ دسترسی (درخواست از مدیر).
۴ کامپوننت: button, control-size, empty-state, icons
رزرو و خدمات
دورهٔ آموزشی
صفحهٔ دوره: پخش‌کنندهٔ درسِ فعلی، مدرس با عکس و آمار، ستونِ پیشرفت و سرفصل‌ها در آکاردئون با تیکِ انجام‌شده، درسِ فعلی و زمانِ هر درس.
۷ کامپوننت: accordion, avatar, button, control-size, icons, persian, progress
اطلاعات مسافران
گامِ دومِ خریدِ بلیت: مراحل، یادآوریِ «مثل کارت ملی»، فرمِ هر مسافر (نام، کد ملی، تاریخ تولد شمسی، جنسیت)، اطلاعاتِ تماس و خلاصهٔ چسبانِ پرواز با ریزِ مبلغ.
۱۱ کامپوننت: badge, button, card, control-size, date-picker, icons, persian, stepper, text-field, toast, toggle-group
جست‌وجوی بلیط
مبدأ و مقصد، یک‌طرفه یا رفت و برگشت، تاریخ شمسی و تعداد مسافر.
۱۱ کامپوننت: autocomplete, button, control-size, date-picker, date-range-picker, label, number-field, persian, popover, toast, toggle-group
خلافی خودرو
استعلام خلافی با پلاک و کد ملی، جدول تخلفات و پرداخت.
۹ کامپوننت: button, checkbox, control-size, empty-state, label, license-plate, persian, text-field, toast
پشتیبانی و محتوا
تیکت پشتیبانی
ثبت تیکت با بخش، پیام، توضیح صوتی و پیوست، و فهرست تیکت‌های قبلی.
۱۲ کامپوننت: badge, button, control-size, file-upload, icons, label, persian, radio-group, text-field, textarea, toast, voice-recorder
پرسش‌های متداول
معرفی با جست‌وجوی بزرگ، دسته‌ها کنارِ فهرست (موبایل: نوارِ افقی)، آکاردئونِ نرم با نشانگرِ به‌علاوه، حالتِ خالی و کارتِ «هنوز سؤال دارید؟».
۱۰ کامپوننت: accordion, avatar, badge, button, control-size, empty-state, icons, persian, search-field, toggle-group
جزئیات تیکت
نمای کارشناس: کنش‌های تیکت، پیامِ درخواست‌دهنده با پیوست‌های نوع‌دار، پاسخ‌نویس، و پنلِ جزئیات، درخواست‌دهنده و ویژگی‌های قابل‌ویرایش با دکمهٔ به‌روزرسانی.
۱۴ کامپوننت: avatar, badge, breadcrumb, button, card, control-size, dropdown-menu, file-upload, icons, label, persian, select, textarea, toast
نتایجِ جست‌وجو
صفحهٔ نتایج: جست‌وجو با تعدادِ نتیجه، زبانه‌های نوع با شمار، نتایجِ ترکیبی (کالا، مقاله، راهنما) با برجسته‌شدنِ واژه، جست‌وجوهای مرتبط و حالتِ بی‌نتیجه.
۷ کامپوننت: button, control-size, empty-state, icons, persian, search-field, toggle-group
چتِ پشتیبانیِ زنده
ویجتِ گفت‌وگو با پشتیبان: سربرگِ تیره با عکس و وضعیتِ آنلاین، پیام‌ها با ساعت، پاسخ‌های آماده، در حالِ نوشتن و ورودیِ پیام با پیوست.
۶ کامپوننت: avatar, button, chat-message, control-size, icons, prompt-input
تماس با ما
معرفی، راه‌های ارتباطی با آیکون و نقشه، فرمِ کارتی با موضوعِ چیپی، نام و ایمیل با آیکون، اندازهٔ کسب‌وکار، موافقت با حریم خصوصی و پیامِ موفقیت.
۱۱ کامپوننت: badge, button, checkbox, control-size, icons, label, persian, select, text-field, textarea, toggle-group
چت با دستیار
دستیارِ هوشمند: تاریخچهٔ روزبه‌روز در کنار، خوشامدِ شخصی با پیشنهادهای آماده، گفت‌وگو با فکرکردن، کنش‌های کپی و تلاشِ دوباره و بازخورد، و ورودی با پیوست و انتخابِ مدل.
۹ کامپوننت: button, chat-message, control-size, icons, prompt-input, scroll-area, sheet, thinking, toast
پنل مدیریت
نوشتن ایمیل
ایمیلِ تازه با کمکِ هوش مصنوعی: موضوع، متن با درجِ متغیر در محلِ مکان‌نما، نوارِ قالب‌بندی، گیرنده‌ها با افزودن و حذف، نامِ قالب و کارتِ تولیدِ متن.
۱۴ کامپوننت: avatar, button, card, chip, control-size, icons, input, label, persian, rich-text-editor, select, text-field, textarea, toast
اشتراک‌گذاری و نظرها
دعوت با ایمیل به‌صورت چیپ، لینک عمومی با سطح دسترسی، فهرست اعضا و پنل نظرها با پاسخ و نوشتن نظر.
۱۱ کامپوننت: avatar, button, chip, control-size, dropdown-menu, icons, input, persian, select, textarea, toast
فهرست سفارش‌ها
جست‌وجو و فیلتر وضعیت، جدول با برچسب وضعیت و منوی عملیات هر ردیف، حالت خالی و صفحه‌بندی.
۱۱ کامپوننت: badge, button, control-size, dropdown-menu, empty-state, icons, pagination, persian, search-field, select, table
مدیریت کاربران
جست‌وجو و فیلتر نقش، جدول کاربران با وضعیت، دعوت عضو و منوی عملیات.
۱۷ کامپوننت: action-bar, avatar, badge, button, control-size, dialog, dropdown-menu, empty-state, icons, label, pagination, persian, search-field, select, table, text-field, toast
نقش‌ها و دسترسی‌ها
ماتریس نقش و دسترسی (سطر نقش، ستون دسترسی) با چک‌باکس، بازنشانی و ذخیره.
۵ کامپوننت: button, checkbox, control-size, table, toast
جزئیات مشتری
پروندهٔ مشتری (CRM): سرِ صفحه با عکس، برچسب‌ها و تماس و فاکتورِ تازه؛ سه آمارِ کلیدی؛ تبِ فاکتورها و یادداشت‌ها با ثبتِ یادداشت؛ کارت‌های اطلاعاتِ تماس و مسئولِ حساب.
۱۳ کامپوننت: avatar, badge, breadcrumb, button, card, control-size, icons, persian, stat-tile, table, textarea, toast, toggle-group
کلیدهای API
جدولِ کلیدها با پیشوندِ ماسک‌شده، دسترسی و آخرین استفاده؛ ساختِ کلید با نام و دسترسی‌ها، نمایشِ یک‌بارهٔ کلید با کپی و هشدار، و باطل‌کردن با تأییدِ دوباره.
۱۳ کامپوننت: alert-dialog, badge, button, checkbox, control-size, dialog, dropdown-menu, icons, label, persian, table, text-field, toast
گزارش فعالیت
خطِ زمانیِ روزبه‌روز با عکسِ فرد و آیکونِ رنگیِ نوعِ کار، «چه کسی، چه کاری، روی چه چیزی» با جزئیاتِ تغییر، فیلترِ نوع با تب، جست‌وجو و خروجیِ اکسل.
۷ کامپوننت: avatar, button, control-size, icons, persian, search-field, toggle-group
صندوق پیام
سه ستون: پوشه‌ها با شمارش، فهرستِ نامه‌ها با جست‌وجو و تبِ همه/خوانده‌نشده و نقطهٔ خوانده‌نشده، خواندنِ نامه با برچسب، پیوست‌های نوع‌دار و پاسخ با ویرایشگرِ قالب‌دار؛ در موبایل فهرست و خواندن جای هم را می‌گیرند.
۱۱ کامپوننت: avatar, badge, button, control-size, file-upload, icons, persian, rich-text-editor, search-field, toast, toggle-group
تقویم رویدادها
ماهِ شمسی (شنبه‌اول) با رویدادهای رنگیِ هر روز و «+n»، امروز و روزِ انتخاب‌شده متمایز، جابه‌جاییِ ماه، برنامهٔ روزِ انتخاب‌شده با عکسِ افراد و فهرستِ رویدادهای پیشِ رو.
۶ کامپوننت: avatar, button, card, control-size, icons, persian
بردِ کانبان
مدیریتِ کار با چهار ستون و شمارش، کارتِ هر کار با برچسب، چک‌لیست، پیوست، سررسید و عکسِ افراد؛ جابه‌جایی با کشیدن‌ورهاکردن یا منوی «انتقال به»، جست‌وجو و حالتِ ستونِ خالی.
۱۰ کامپوننت: avatar, badge, button, control-size, dropdown-menu, icons, persian, progress, search-field, toast
مدیریت فایل‌ها
بارگذاری، فضای مصرفی، جست‌وجو و جدول فایل‌ها با عملیات.
۱۱ کامپوننت: button, control-size, dropdown-menu, empty-state, file-upload, icons, persian, progress, search-field, table, toast
معرفی محصول
فرصت‌های شغلی
هیرو با عکس‌های تیم، مزایا با آیکون، موقعیت‌های باز با فیلترِ تیم (تب) و ردیفِ کلیک‌پذیر با تیم و محل و نوعِ همکاری، حالتِ خالی و ارسالِ رزومهٔ آزاد.
۸ کامپوننت: badge, button, control-size, empty-state, icons, persian, reveal, toggle-group
تغییرات نسخه‌ها
خطِ زمانیِ نسخه‌ها با نسخه و تاریخِ چسبان، عنوان و خلاصه، عکسِ قابلیتِ اصلی، تغییرات با برچسبِ تازه/بهبود/رفعِ خطا، فیلترِ نوع با تب و عضویت در خبرنامهٔ نسخه‌ها.
۹ کامپوننت: avatar, badge, button, control-size, icons, input, persian, toast, toggle-group
وبینار و رویداد
صفحهٔ رویداد: هیروی تیره با تاریخ، ساعت، محل و شمارشِ معکوس، فرمِ ثبت‌نامِ کوتاه با ظرفیتِ باقی‌مانده و پیامِ موفقیتِ درجا، سخنران‌ها با عکس و برنامهٔ زمانی.
۷ کامپوننت: avatar, badge, button, control-size, icons, persian, text-field
صفحهٔ فرود
اعلان بالای صفحه، معرفی، ویژگی‌ها، نظر مشتریان، سؤالات متداول و فوتر.
۱۳ کامپوننت: accordion, avatar, badge, button, control-size, count-up, footer, icons, persian, reveal, stat-tile, switch, tabs
بخش‌های صفحه
هیروی دوستونه
بخشِ هیرو: برچسبِ تازه، تیترِ جسور، توضیح، دکمهٔ اصلی و دمو، اعتمادِ اجتماعی با عکسِ آدم‌ها؛ عکسِ واقعی در ستونِ دیگر با کارتِ شناورِ یک عدد.
۶ کامپوننت: avatar, badge, button, control-size, icons, persian
ویژگی‌ها در گرید
بخشِ ویژگی‌ها: سرِ بخش با برچسب، تیتر و توضیحِ وسط‌چین، شش کارت با آیکونِ رنگی، تیتر و یک جمله؛ کارت‌ها پله‌پله نرم وارد می‌شوند.
۳ کامپوننت: control-size, icons, reveal
نظرِ مشتری‌ها در گریدِ آجری
بخشِ نظرِ مشتری: کارت‌ها در ستون‌های آجری با طولِ متنِ متفاوت، هر کدام امتیاز، نقل‌قول و عکسِ واقعیِ گوینده با نقشش؛ روی سطحِ subtle.
۴ کامپوننت: avatar, control-size, reveal, testimonial
فراخوانِ پایانی
بخشِ فراخوان: کارتِ بنفشِ جسور با پترنِ نقطه‌ای و دایره‌های تزئینی، تیتر و توضیحِ وسط‌چین و دو دکمه.
۳ کامپوننت: background-pattern, button, control-size
نوارِ بالای سایت
بخشِ هدر: برند، منوی محصول با پنلِ کشویی (آیکون، عنوان، توضیح)، لینک‌های اصلی، ورود و شروعِ رایگان؛ در موبایل همه در کشوی کناری.
۵ کامپوننت: button, control-size, icons, navigation-menu, sheet
فوترِ تیره
بخشِ فوتر: برند با شبکه‌های اجتماعی، سه ستونِ لینک، خبرنامه و ردیفِ کپی‌رایت و لینک‌های حقوقی؛ روی سطحِ تیره.
۷ کامپوننت: button, control-size, footer, icons, persian, text-field, toast
ریلِ عکس‌های هم‌پوشان
بخشِ گالری: کارت‌های عکس روی هم می‌نشینند و کارتِ فعال با هاور، فوکوس یا لمس باز می‌شود تا عکس و اسمِ داستان دیده شود؛ خودکار جلو می‌رود و در موبایل ریلِ افقی است.
۴ کامپوننت: button, control-size, icons, reveal
مراحلِ کار، آکاردئونی
بخشِ روندِ کار: مراحلِ شماره‌دار که هر بار یکی باز است با توضیح و اقدام، و عکسِ همان مرحله کنارش با محوشدن عوض می‌شود.
۵ کامپوننت: accordion, button, control-size, icons, persian
تیم، قرص‌های اسم
بخشِ تیم روی سطحِ تیره: هر نفر قرصِ کوچکِ عکس و اسم است و با انتخاب به کارتِ کامل باز می‌شود (عکس، نقش، ایمیل، شهر، معرفی و دکمهٔ پیام).
۴ کامپوننت: button, chip, control-size, icons
خدمات در بنتوی تیره
بخشِ خدمات: قابِ تیره با تیترِ نقره‌ای و شش کاشیِ بنتو در اندازه‌های مختلف، هر کدام نمادِ براقِ بزرگ، تیتر و یک جمله.
۳ کامپوننت: control-size, icons, reveal
موبایل
آن‌بوردینگ موبایل
آشنایی در سه قدم با نوارِ پیشرفت: معرفی روی عکسِ تمام‌صفحه با تیترِ درشت، انتخابِ علاقه‌ها با چیپ‌های بزرگ (حداقل سه، شمارنده روی دکمه)، و پیشنهادِ دنبال‌کردن با دکمهٔ دنبال کن/دنبال شد؛ «رد کردن» همیشه و دکمهٔ اصلیِ چسبان.
۶ کامپوننت: avatar, button, control-size, icons, persian, toggle-group
خانهٔ اپ سلامت
کارت‌های رنگی با حلقهٔ پیشرفت، میله‌های خواب و نمودار وزن، برنامهٔ روز و نوار ناوبری پایین.
۸ کامپوننت: app-bar, avatar, bottom-navigation, button, control-size, icons, persian, stat-tile
فروشگاه موبایل
کارت محصول موبایل با علاقه‌مندی و افزودن به سبد، چیپ‌های دسته و باتم‌شیتِ فیلتر و مرتب‌سازی.
۱۴ کامپوننت: add-to-cart, app-bar, badge, bottom-navigation, button, checkbox, control-size, drawer, icons, label, persian, product-card, radio-group, rating
جست‌وجوی موبایل
نوار جست‌وجوی تمام‌عرض، جست‌وجوهای اخیر و پرطرفدار، نتیجه‌ها و حالت بی‌نتیجه.
۶ کامپوننت: button, control-size, empty-state, icons, persian, search-field
خانهٔ اپ خبری
سلام و جست‌وجو و اعلان، دسته‌ها با چیپ‌های اسکرول‌خور، خبرِ ویژه با عکسِ تمام‌عرض و تیترِ سفید (اسکرولِ قفل‌شونده با نشانگر)، تازه‌ترین‌ها در ردیف‌های جمع‌وجور با ذخیره، بحثِ روز و ناوبریِ پایین.
۷ کامپوننت: avatar, bottom-navigation, button, control-size, icons, persian, toggle-group
جدول در موبایل
ردیف‌های جدول به شکل کارت در موبایل و جدولِ کامل در تبلت، با باتم‌شیتِ عملیاتِ هر ردیف.
۱۱ کامپوننت: app-bar, avatar, badge, button, control-size, drawer, icons, persian, table, toast, toggle-group
منوی کناری اپ
کشوی منو از لبهٔ شروع با پروفایل، موجودی کیف پول، پیوندها با شمارنده، حالت شب و خروج.
۱۰ کامپوننت: app-bar, avatar, badge, button, control-size, icons, persian, separator, sheet, switch
خانهٔ کیف پول (اپ)
خانهٔ اپِ بانکی: نوارِ بالا با عکس و اعلان، کارتِ تیرهٔ موجودی با نمایش/پنهان، چهار اقدامِ سریع، تراکنش‌های اخیر با ردیف‌های لمسی و نوارِ تبِ پایین.
۸ کامپوننت: app-bar, avatar, badge, bottom-navigation, button, control-size, icons, persian
ورودِ اپ با کد
ورودِ تمام‌صفحهٔ اپ: شماره و کدِ ۶ رقمی در دو قدم، شمارشِ معکوسِ ارسالِ دوباره، خطای کد و دکمهٔ اصلیِ چسبیده به پایین بالای ناحیهٔ امن.
۸ کامپوننت: app-bar, button, control-size, icons, input-otp, link, persian, text-field
حساب و تنظیماتِ اپ
پروفایلِ اپ: سربرگ با عکس و ویرایش، گروه‌های فهرستیِ ردیف‌کامل‌لمسی با فلش، سوییچِ اعلان و حالتِ شب، و خروج.
۷ کامپوننت: app-bar, avatar, button, control-size, icons, persian, switch
جزئیاتِ کالا (اپ)
جزئیاتِ کالا در اپ: عکس‌های تمام‌عرض با اسکرولِ افقی و نشانگر، بازگشت/پسند/اشتراک روی عکس، رنگ با سگمنت و نوارِ پایینیِ چسبان با تعداد و افزودن به سبد.
۷ کامپوننت: add-to-cart, app-bar, button, color-swatch-picker, control-size, icons, persian
سبد و پرداخت (اپ)
سبد و پرداخت در اپ: اقلام با عکس و تعداد، نشانی به‌صورتِ ردیفِ لمسی، روشِ پرداخت با کارت‌های رادیویی و نوارِ پایینیِ چسبان با جمع و پرداخت.
۹ کامپوننت: app-bar, button, control-size, icons, label, number-field, persian, radio-group, toast
اعلان‌های اپ
اعلان‌ها در اپ: سگمنتِ همه/خوانده‌نشده، گروه‌بندیِ زمانی، ردیف‌های لمسی با عکس یا آیکون، نقطه و زمینهٔ خوانده‌نشده و «همه خوانده شد».
۷ کامپوننت: app-bar, avatar, button, control-size, empty-state, icons, toggle-group
پیام‌های اپ
پیام‌رسانِ اپ: فهرستِ گفت‌وگوها با جست‌وجو، عکس، آنلاین، آخرین پیام و شمارِ خوانده‌نشده؛ صفحهٔ گفت‌وگو با بازگشت و ورودیِ پیامِ چسبان.
۱۰ کامپوننت: app-bar, avatar, badge, button, chat-message, control-size, icons, persian, prompt-input, search-field
رسیدِ تراکنش (اپ)
جزئیاتِ تراکنش در اپ: وضعیتِ موفق با مبلغِ درشت، کارتِ رسید با لبهٔ پاره، مقصد با لوگوی بانک، کدِ پیگیری با کپی و اشتراک‌گذاریِ چسبان.
۷ کامپوننت: app-bar, bank-logo, button, control-size, icons, persian, toast
فیلتر در باتم‌شیت
فیلتر و مرتب‌سازی در شیتِ پایینیِ اپ: مرتب‌سازیِ سگمنت، دسته‌ها، بازهٔ قیمت، فقط موجود، پاک کردن و نمایشِ نتایجِ چسبان؛ شمارِ فیلترهای فعال روی دکمه.
۱۲ کامپوننت: app-bar, badge, button, checkbox, control-size, drawer, icons, label, persian, slider, switch, toggle-group