프론트엔드 프레임워크 & UI 컴포넌트: 2026년 추천

웹, 서버, 네이티브 플랫폼에서 사용할 수 있으며 조합 가능한 컴포넌트로 인터랙티브 UI를 만드는 JavaScript 라이브러리입니다.

Angular는 CLI, 라우팅, 폼, SSR, Material 컴포넌트를 제공하는 TypeScript 기반 웹 애플리케이션 개발 플랫폼입니다.

코딩 에이전트가 아트 디렉션과 실제 사진, 브라우저 자체 점검으로 개성 있는 프런트엔드를 만들도록 돕는 Agent Skills입니다.

Google Material Design을 구현한 React 컴포넌트 라이브러리로, 바로 사용할 수 있는 다양한 UI 컴포넌트를 제공합니다.

작고 단일 목적을 가진 클래스를 사용해 HTML과 JSX에서 바로 사용자 지정 UI를 만드는 유틸리티 우선 CSS 프레임워크입니다.

React, Vue, Angular, Svelte 등을 지원하며 UI 컴포넌트를 격리된 환경에서 만들고 문서화하고 테스트하는 프런트엔드 워크숍입니다.

AI 코딩 에이전트를 위한 디자인 가이드: 디자인 스킬, 24개 명령어, 브라우저 실시간 반복 작업, AI 생성 프런트엔드 UI를 검사하는 61개의 결정론적 탐지 규칙을 제공합니다.

AI 모델을 사용해 스크린샷, 목업, Figma 디자인, 화면 녹화 영상을 HTML, Tailwind, React, Vue 등의 프런트엔드 코드로 변환합니다.

JavaScript 모듈과 에셋을 몇 개의 번들로 묶고, 코드 분할과 비-JS 파일용 로더를 지원하는 모듈 번들러입니다.

주제별로 정리한 Flutter 라이브러리, 플러그인, 튜토리얼, 아티클, 예제 앱 모음입니다.

Provider 없이 사용할 수 있는 React용 경량 훅 기반 상태 관리 라이브러리입니다.

JavaScript/TypeScript 코드베이스 하나로 크로스 플랫폼 iOS, Android, PWA 앱을 만들 수 있는 Web Components 기반 오픈 소스 UI 툴킷입니다.

shadcn 또는 jsrepo로 설치할 수 있는 무료 애니메이션·커스터마이징 가능한 React 및 Next.js 컴포넌트와 배경 215개 이상을 제공하는 라이브러리입니다.

Vercel과 Linear에서 쌓은 경험을 바탕으로 AI 코딩 어시스턴트에게 애니메이션, UI 디자인, 프론트엔드 제작 원칙을 알려주는 에이전트 스킬 모음입니다.

인기 프로그래밍 언어, 프레임워크, 개발 도구를 다루는 단일 파일 치트시트 모음입니다.

React 핵심, Router, Redux, 테스트, React Native를 다루는 오랜 역사의 ReactJS 면접 질문과 답변 모음입니다.

Tailwind CSS에 클래스 이름으로 바로 사용할 수 있는 UI 컴포넌트를 추가하는 무료 오픈소스 라이브러리입니다.

웹 애플리케이션 구축을 위한 수작업으로 제작된 반응형 컴포넌트를 제공하는 Vue용 Material Design UI 컴포넌트 프레임워크입니다.

다크 모드와 Next.js RSC를 지원해 웹 앱을 빠르게 만들 수 있는 접근성 중심의 React 컴포넌트 라이브러리이자 디자인 시스템입니다.

React Native 앱 개발에 유용한 라이브러리, 도구, 뉴스 출처와 학습 자료를 모아 정리한 목록입니다.

HTML 마크업에 반응형 동작을 바로 추가할 수 있는 간결하고 탄탄한 JavaScript 프레임워크입니다.

React Aria와 Tailwind CSS v4를 기반으로 한 React UI 컴포넌트 라이브러리로, 이전 이름은 NextUI입니다.

하나의 코드베이스로 SPA, SSR/SSG 사이트, PWA, 브라우저 확장 프로그램, 모바일 앱과 Electron 앱을 만드는 Vue.js 프레임워크입니다.

Next.js 또는 shadcn/ui 앱에 복사해 넣어 사용할 수 있는 애니메이션 UI 컴포넌트와 효과 모음입니다.

라우팅, 서버 렌더링, 다양한 호스팅 플랫폼용 배포 어댑터를 제공해 Svelte 풀스택 웹 앱을 만드는 프레임워크입니다.

GPUI 프레임워크에서 크로스 플랫폼 앱을 만들 수 있는 75개 이상의 스타일 지정 컴포넌트를 제공하는 Rust 데스크톱 GUI 키트입니다.

AI 에이전트와 사용자 대면 프런트엔드 애플리케이션의 연결 방식을 표준화하는 개방형 이벤트 기반 프로토콜입니다.

HTML, CSS, JavaScript를 작성하지 않고 Python으로 브라우저 기반 웹 UI와 소규모 앱을 만드는 프레임워크입니다.

React 19과 StyleX 기반의 오픈 소스 React 디자인 시스템으로, 접근성 높은 컴포넌트 150개 이상과 테마, CLI를 제공합니다.

조합 가능한 프리미티브와 백엔드 연동을 제공하는 프로덕션급 AI 채팅 UI 구축용 TypeScript/React 라이브러리입니다.

맞춤형 디자인 시스템 구축을 위한 접근성 높은 UI 기본 요소를 제공하는 스타일 없는 React 컴포넌트 라이브러리입니다.

장면 외부에서 내부로 컷 없이 비행하는 스크롤 연동 3D 랜딩 페이지를 만드는 에이전트 스킬입니다.

앱에 직접 복사해 넣어 사용하는, 접근성과 커스터마이징을 고려한 shadcn/ui의 비공식 Svelte 포트입니다.

로그인 없이 이용할 수 있는 Three.js/WebGL UI 컴포넌트 카탈로그로, 라이브 렌더러와 전체 React 소스를 제공합니다.

shadcn/ui 프로젝트에 설치할 수 있도록 설계된 Tailwind CSS와 Motion 기반의 MIT 라이선스 애니메이션 React 컴포넌트 모음입니다.

클래스 없이 네이티브 요소에 스타일을 적용하는 약 10KB 용량의 무의존성 시맨틱 HTML, CSS, JS UI 라이브러리입니다.

MCP 도구가 반환하고 호스트가 렌더링할 수 있는 대화형 UI 리소스를 만들기 위한 TypeScript, Ruby, Python SDK

독창적인 아이콘, 일러스트, 애니메이션을 갖춘 아늑한 아일랜드풍 React 및 TypeScript UI 컴포넌트 라이브러리입니다.

Claude Code와 Codex에서 AI 생성 모션을 입력에 반응하는 웹 애니메이션으로 변환하는 에이전트 스킬

Tailwind CSS와 motion 기반의 React 및 Next.js용 재사용 가능한 커서 애니메이션 라이브러리입니다.

여러 디자인 방향을 비교하고 실제 스크린샷을 바탕으로 다듬는 AI 에이전트용 인터페이스 디자인 스킬입니다.

한 줄 브리프만으로 수상작 스타일의 웹사이트를 만드는 AI 코딩 에이전트용 스킬과 사이트 평가용 /jury 스킬

브라우저에서 실행되는 오픈소스 AI 코딩 에이전트로, 실행 중인 앱의 요소를 클릭하면 해당 소스 코드를 수정할 수 있습니다.

동영상을 최적화된 WebP 프레임 시퀀스로 변환하고, 스크롤로 제어하는 캔버스 웹사이트를 만드는 Agent Skill입니다.