mojtaba hassanzadeh
mojtaba hassanzadeh
خواندن ۲ دقیقه·۷ ماه پیش

Mantine ui : کتابخانه


Mantine With Nextjs 13
Mantine With Nextjs 13


من مجتبی حسن زاده هستم و میخوام با یه مثال درک ساده ای از mantine بهت بدم .فرض کن یه جعبه ابزار پر از قطعات Lego داری که باهاش می‌تونی هرچیزی که تو ذهنت داری بسازی! Mantine UI هم یه جوریه. یه جعبه ابزار پر از کامپوننت‌های React که باهاش می‌تونی رابط‌های کاربری شیک و مدرن بسازی . دکمه‌ها، فرم‌ها، منوها، نمودارها و یه عالمه چیز دیگه... همه چی تو این جعبه ابزاره .

چرا Mantine UI؟

سرعت ⚡️: با Mantine UI رابط کاربری‌تو سریع‌تر بساز و بارگذاری صفحه‌تو به حداقل برسون.

قابلیت انعطاف‌پذیری ‍♀️: رابط کاربری‌تو جوری که دوست داری بساز. Mantine UI دستتو تو همه چی باز می‌ذاره.

دسترسی ♿️: همه، حتی کسایی که مشکل بینایی دارن، می‌تونن از رابط کاربری که با Mantine UI می‌سازی استفاده کنن.

جامعه : یه عالمه آدم مهربون و باحال هستن که تو Mantine UI کار می‌کنن و همیشه حاضرن کمکت کنن.


نکس جی اس یه جور چارچوب قدرتمنده که بهت کمک می‌کنه وب‌سایت و اپلیکیشن‌های جذاب بسازی. Mantine UI هم باهاش دوست صمیمی‌ه! BFF . با Mantine UI می‌تونی رابط‌های کاربری شیک و مدرن برای وب‌سایت و اپلیکیشن‌های Next.js 14 خودت بسازی.

چطوری Mantine UI رو با Next.js 14 استفاده کنیم؟

خیلی ساده‌ست! فقط کافیه این مراحل رو دنبال کنی:

  1. Mantine UI رو نصب کن:
npm install @mantine/core

2 .یه Provider Mantine UI به پروژه Next.js خودت اضافه کن:

import { createTheme, MantineProvider } from '@mantine/core ' ; import '@mantine/core/styles.css'; const theme = createTheme({ تنظیمات مربوط به تم }); function Demo() { return ( <MantineProvider theme={theme}> {/* Your app here */} </MantineProvider> ); }


از کامپوننت‌های Mantine UI تو صفحات و کامپوننت‌های Next.js خودت استفاده کن.

خیلی ساده‌ست! فقط کافیه این مراحل رو دنبال کنی:

از کامپوننت‌های Mantine UI تو صفحات و کامپوننت‌های Next.js خودت استفاده کن.

**حالا برو و یه رابط کاربری خفن بساز! **

موفق باشی! ✨


mantine uinext js 14reactnextjsui
شاید از این پست‌ها خوشتان بیاید