Mantine extensions

Mantine extensions

Extensions는 새 컴포넌트, 훅 또는 다른 기능 같은 추가 기능을 제공하는 패키지예요. 이들은 @mantine/hooks와 @mantine/core 패키지 위에 만들어져요.

출처: 문서

본문

공식 extensions

공식 extensions는 Mantine의 관리자(maintainers)가 만든 것이에요. 이 extensions는 패키지 이름에 @mantine/ 스코프를 가져요. 예를 들어 @mantine/dates 또는 @mantine/carousel.

공식 extensions 목록:

  • @mantine/dates – 날짜·시간 선택기, 캘린더, 기타 날짜 관련 컴포넌트

  • @mantine/charts – recharts 기반 차트와 데이터 시각화 컴포넌트

  • @mantine/notifications – 알림 시스템

  • @mantine/code-highlight – Mantine 웹사이트에서 사용되는 코드 하이라이트 컴포넌트

  • @mantine/spotlight – 컨트롤 센터(Ctrl + K 검색 바), 검색에 사용할 수 있어요

  • @mantine/carousel – embla-carousel 기반 캐러셀 컴포넌트

  • @mantine/dropzone – 드래그 앤 드롭으로 파일을 받아요, react-dropzone 기반

  • @mantine/modals – modals 관리자

  • @mantine/tiptap – tiptap 기반 리치 텍스트 에디터

  • @mantine/nprogress – 내비게이션 진행률 컴포넌트

커뮤니티 extensions

커뮤니티 extensions는 커뮤니티 구성원이 만들었어요. 커뮤니티 구성원이 유지보수하며 코어 Mantine 패키지와 extensions와는 독립적으로 업데이트돼요.

커뮤니티 extensions 목록:

  • BlockNote – 블록 기반 리치 텍스트 에디터

  • ContextMenu – 컨텍스트 메뉴 컴포넌트

  • DataTable – 의존성이 없는 데이터 테이블 컴포넌트

  • MantineReactTable – TanStack table 패키지 기반 데이터 테이블 컴포넌트

  • Audio – Web Audio API로 만든, 파형 시각화와 실시간 스펙트럼 분석기가 있는 오디오 플레이어

  • BorderAnimate – 테두리 애니메이션 스타일(beam, glow 등)

  • Book – 드래그 가능한 페이지 컬이 있는 실제 iBooks 스타일 책 – 가장자리의 어느 지점이든 잡아 페이지를 넘길 수 있어요, 평평한 DOM fold 또는 실제 3D WebGL curl

  • Clock – 아날로그 시계 컴포넌트

  • Compare – 이미지 비교 슬라이더 컴포넌트

  • DepthSelect – macOS Time Machine에서 영감을 받은 3D 스택 선택 컴포넌트

  • Flip – 플립 애니메이션 컴포넌트

  • JsonTree – 문법 하이라이트가 있는 인터랙티브 JSON 트리 뷰어

  • Led – 상태 피드백용 LED 인디케이터 컴포넌트

  • LensSelect – count mode와 macOS Dock 효과가 있는 fisheye/렌즈 확대 선택기

  • ListViewTable – 열 재정렬과 크기 조절이 가능한 Finder 스타일 목록 뷰 테이블

  • Marquee – 마퀴 컴포넌트

  • Mask – 커서를 따라가는 스포트라이트 마스크 컴포넌트

  • Onboarding – 온보딩/투어 컴포넌트

  • Parallax – 패럴랙스 컴포넌트

  • Picker – 색상, 날짜, 이모지 및 기타 선택기를 위한 애니메이션 선택기

  • QrCode – 커스터마이즈 가능한 QR 코드 컴포넌트

  • Reflection – 반사 효과 컴포넌트

  • RingsProgress – 링 진행률 인디케이터 컴포넌트

  • Scene – 그라디언트, 점, 글로우, 노이즈가 있는 장식 배경 컴포넌트

  • SelectStepper – 옵션 순환 스테퍼 컴포넌트

  • Spinner – 여러 애니메이션 변형이 있는 SVG 기반 로딩 스피너

  • SplitPane – 크기 조절 가능한 분할 창 컴포넌트

  • TextAnimate – 텍스트 애니메이션 컴포넌트

  • Video – 복합 API, headless useVideo 훅, Picture-in-Picture, 라이브 타임라인 스크러빙, 히어로 섹션용 asBackground 모드가 있는 Mantine 네이티브 비디오 플레이어

  • Window – 드래그와 크기 조절 기능이 있는 창 컴포넌트

  • Mantine Form Builder – 폼 빌더와 뷰어 컴포넌트

  • Mantine Choropleth Map – GeoJson용 Choropleth Map 컴포넌트

  • Mantine Bites Lightbox – @mantine/carousel 위에 만든 커뮤니티 전체 화면 이미지 라이트박스, 공식 @mantine/lightbox 패키지도 참고하세요

  • Mantine Map – MapLibre GL로 구동되는 Mantine용 인터랙티브 지도

  • Mantine Gantt – 드래그로 일정을 바꾸고 크기 조절 가능한 작업, 의존성 링크, 가상화된 행, 제어/비제어 모드가 있는 인터랙티브 간트 차트

자신만의 extension 만들기

자신만의 extension을 만들어 위 목록에 커뮤니티와 공유하는 것을 환영해요. 이 페이지에 소개될 새 extension을 제출하려면:

  • npm에 extension을 만들고 게시해요. 패키지 이름은 원하는 대로 지을 수 있어요. 예: mantine-oklch-color-picker 또는 @rtivital/mantine-emoji-picker.

  • extension 개발을 어떻게 시작할지 확실하지 않다면 extension 템플릿을 사용해요. 테스트, 문서, 예시가 있는 완전한 개발 환경을 제공해요.

  • extension 링크와 짧은 설명과 함께 메인 Mantine 저장소에 pull request를 제출해 이 페이지에 소개되게 해요.

더 알아보기 (Learn more)