상호작용·폼·테이블·상태
각 항목을 클릭하면 시각 예시·비교·원문을 볼 수 있습니다.
Floating UI Floating UI
기준 요소 주변에 툴팁·메뉴 등 부유 요소를 배치하는 도구.
오버플로를 피하는 팝오버·드롭다운.
도입 전 공식 문서에서 지원 버전·배포 플랫폼·라이선스·유지보수 상태를 확인한다.
dnd-kit dnd-kit
드래그·정렬 인터랙션을 구성하는 도구 모음.
칸반·순서 편집·드래그 UI.
도입 전 공식 문서에서 지원 버전·배포 플랫폼·라이선스·유지보수 상태를 확인한다.
SortableJS SortableJS
목록 항목의 드래그 재정렬을 구현하는 라이브러리.
정렬 가능한 목록·카드.
도입 전 공식 문서에서 지원 버전·배포 플랫폼·라이선스·유지보수 상태를 확인한다.
interact.js interact.js
드래그·크기 변경·제스처·스냅 상호작용을 제공하는 도구.
편집기·캔버스 도구·자유 배치 UI.
도입 전 공식 문서에서 지원 버전·배포 플랫폼·라이선스·유지보수 상태를 확인한다.
Swiper Swiper
터치·슬라이드 인터랙션을 제공하는 캐러셀 도구.
상품 이미지·슬라이드 콘텐츠.
도입 전 공식 문서에서 지원 버전·배포 플랫폼·라이선스·유지보수 상태를 확인한다.
Embla Carousel Embla Carousel
동작 중심의 캐러셀 기반을 제공하는 라이브러리.
맞춤 스타일의 슬라이더.
도입 전 공식 문서에서 지원 버전·배포 플랫폼·라이선스·유지보수 상태를 확인한다.
React Hook Form React Hook Form
입력 등록·검증·폼 상태를 관리하는 라이브러리.
복합 폼과 유효성 검사.
도입 전 공식 문서에서 지원 버전·배포 플랫폼·라이선스·유지보수 상태를 확인한다.
Formik Formik
폼 값·오류·제출 상태를 관리하는 라이브러리.
Formik 기반 React 입력 화면.
도입 전 공식 문서에서 지원 버전·배포 플랫폼·라이선스·유지보수 상태를 확인한다.
Zod Zod
스키마로 데이터 구조를 정의하고 런타임 검증하는 라이브러리.
폼·API 입력의 구조 검증.
UI를 그리는 도구가 아니라 UI에 들어가는 데이터 검증 도구다.
Valibot Valibot
조합형 스키마와 데이터 검증을 제공하는 라이브러리.
폼·외부 데이터의 유효성 확인.
도입 전 공식 문서에서 지원 버전·배포 플랫폼·라이선스·유지보수 상태를 확인한다.
TanStack Table TanStack Table
테이블 상태와 로직을 제공하는 헤드리스 테이블 도구.
직접 디자인하는 데이터 표.
도입 전 공식 문서에서 지원 버전·배포 플랫폼·라이선스·유지보수 상태를 확인한다.
AG Grid AG Grid
정렬·편집·그룹 등 데이터 그리드 기능을 제공하는 도구.
대규모 업무 데이터 화면.
Community와 Enterprise 기능·라이선스를 구분한다.
Handsontable Handsontable
스프레드시트형 셀 편집 인터페이스를 제공하는 데이터 그리드.
웹 기반 표 편집·입력 업무.
실제 용도에 맞는 라이선스 조건을 확인한다.
Tabulator Tabulator
대화형 표·편집·정렬·필터 기능을 제공하는 라이브러리.
프레임워크 비종속 데이터 테이블.
도입 전 공식 문서에서 지원 버전·배포 플랫폼·라이선스·유지보수 상태를 확인한다.
TanStack Virtual TanStack Virtual
긴 목록의 가상화 로직을 제공하는 도구.
대량 리스트·그리드의 렌더 비용 조정.
도입 전 공식 문서에서 지원 버전·배포 플랫폼·라이선스·유지보수 상태를 확인한다.
React Virtuoso React Virtuoso
리스트·표 등 가상화된 화면 표시를 제공하는 라이브러리.
가변 높이 피드·긴 대화 목록.
도입 전 공식 문서에서 지원 버전·배포 플랫폼·라이선스·유지보수 상태를 확인한다.
TanStack Query TanStack Query
서버 데이터 요청·캐시·재조회 상태를 관리하는 도구.
로딩·오류·갱신 상태가 있는 앱.
도입 전 공식 문서에서 지원 버전·배포 플랫폼·라이선스·유지보수 상태를 확인한다.
Zustand Zustand
스토어 기반의 상태 관리 도구.
UI 공유 상태·간결한 앱 상태 모델.
도입 전 공식 문서에서 지원 버전·배포 플랫폼·라이선스·유지보수 상태를 확인한다.
XState XState
상태 기계·상태 차트·액터로 앱 동작을 모델링하는 도구.
복잡한 워크플로·상태 전이.
도입 전 공식 문서에서 지원 버전·배포 플랫폼·라이선스·유지보수 상태를 확인한다.
Redux Toolkit Redux Toolkit
Redux 상태 관리를 위한 표준화된 유틸리티 묶음.
예측 가능한 전역 상태 처리.
도입 전 공식 문서에서 지원 버전·배포 플랫폼·라이선스·유지보수 상태를 확인한다.
FullCalendar FullCalendar
일·주·월 등 일정 표시와 상호작용을 제공하는 캘린더 도구.
예약·업무 일정 UI.
일부 플러그인은 별도 제공 조건이 적용될 수 있다.
Interaction, Forms, Tables & State
Open an entry for its visual reference, comparisons and source-language text.
Floating UI Floating UI
A toolkit positioning floating elements, such as tooltips and menus, around an anchor.
Popovers and dropdowns that avoid overflowing the viewport.
Before adoption, check official documentation for supported versions, distribution platforms, licensing, and maintenance status.
dnd-kit dnd-kit
A toolkit for building dragging and sorting interactions.
Kanban boards, order editors, and drag interfaces.
Before adoption, check official documentation for supported versions, distribution platforms, licensing, and maintenance status.
SortableJS SortableJS
A library implementing drag-to-reorder lists.
Sortable lists and cards.
Before adoption, check official documentation for supported versions, distribution platforms, licensing, and maintenance status.
interact.js interact.js
A toolkit providing drag, resize, gesture, and snapping interactions.
Editors, canvas tools, and free-placement interfaces.
Before adoption, check official documentation for supported versions, distribution platforms, licensing, and maintenance status.
Swiper Swiper
A carousel toolkit providing touch and sliding interactions.
Product imagery and slide-based content.
Before adoption, check official documentation for supported versions, distribution platforms, licensing, and maintenance status.
Embla Carousel Embla Carousel
A library providing behavior-focused foundations for carousels.
Custom-styled sliders.
Before adoption, check official documentation for supported versions, distribution platforms, licensing, and maintenance status.
React Hook Form React Hook Form
A library managing input registration, validation, and form state.
Complex forms and validation.
Before adoption, check official documentation for supported versions, distribution platforms, licensing, and maintenance status.
Formik Formik
A library managing form values, errors, and submission state.
Formik-based React forms.
Before adoption, check official documentation for supported versions, distribution platforms, licensing, and maintenance status.
Zod Zod
A library defining data structures with schemas and validating them at runtime.
Validating form and API input structures.
This validates data used by interfaces; it does not render the interface itself.
Valibot Valibot
A library providing composable schemas and data validation.
Validating forms and external data.
Before adoption, check official documentation for supported versions, distribution platforms, licensing, and maintenance status.
TanStack Table TanStack Table
A headless table toolkit supplying table state and logic.
Custom-designed data tables.
Before adoption, check official documentation for supported versions, distribution platforms, licensing, and maintenance status.
AG Grid AG Grid
A toolkit providing data-grid features such as sorting, editing, and grouping.
Large business-data interfaces.
Distinguish Community and Enterprise features and licenses.
Handsontable Handsontable
A data grid providing spreadsheet-like cell editing.
Web-based table editing and data entry.
Check licensing conditions for the intended use.
Tabulator Tabulator
A library providing interactive tables, editing, sorting, and filtering.
Framework-independent data tables.
Before adoption, check official documentation for supported versions, distribution platforms, licensing, and maintenance status.
TanStack Virtual TanStack Virtual
A toolkit providing virtualization logic for long lists.
Managing rendering cost in large lists and grids.
Before adoption, check official documentation for supported versions, distribution platforms, licensing, and maintenance status.
React Virtuoso React Virtuoso
A library displaying virtualized lists, tables, and related views.
Variable-height feeds and long conversations.
Before adoption, check official documentation for supported versions, distribution platforms, licensing, and maintenance status.
TanStack Query TanStack Query
A toolkit managing server-data requests, caching, and refetch state.
Applications with loading, error, and refresh states.
Before adoption, check official documentation for supported versions, distribution platforms, licensing, and maintenance status.
Zustand Zustand
A store-based state-management toolkit.
Shared interface state and concise application-state models.
Before adoption, check official documentation for supported versions, distribution platforms, licensing, and maintenance status.
XState XState
A toolkit modeling application behavior through state machines, statecharts, and actors.
Complex workflows and state transitions.
Before adoption, check official documentation for supported versions, distribution platforms, licensing, and maintenance status.
Redux Toolkit Redux Toolkit
A standardized collection of utilities for Redux state management.
Predictable global-state handling.
Before adoption, check official documentation for supported versions, distribution platforms, licensing, and maintenance status.
FullCalendar FullCalendar
A calendar toolkit providing day, week, month, and other interactive schedule views.
Booking and work-schedule interfaces.
Some plugins may have separate terms.