네오브루탈리즘React UI 컴포넌트
네오브루탈리즘 스타일의 오픈소스 React UI 컴포넌트입니다. 두꺼운 테두리, 선명한 그림자, 대담한 색. shadcn CLI로 설치하거나 MCP 서버를 통해 AI 에이전트로 가져올 수 있습니다. Radix UI, Base UI, React Aria와 함께 동작합니다. 코드는 여러분의 저장소에 들어가며 여러분의 것이 됩니다.
Shell command: npx shadcn add neobrutalism.com/r/base/button.json- 50+ 구성 요소
- 두꺼운 테두리, 강한 그림자
- shadcn CLI 설치
- Radix · Base UI · React Aria
- Radix · Base UI · React Aria
- 기본적으로 접근 가능
- 이 코드는 여러분의 것입니다
- MCP 서버 지원
- 다크 모드 및 RTL
- 소리가 큰 작은 라벨들
모든 컴포넌트
OTP 입력
2단계 인증(2FA), 로그인 확인 및 PIN 입력 화면용 일회용 코드 입력란 — 네오브루탈리즘 스타일의 테두리와 강한 그림자가 적용된, 붙여넣기 기능을 지원하는 입력란.
Sonner
저장 확인, 업로드, 실행 취소 창에 대한 중첩된 토스트 알림 — 네오브루탈리즘 스타일의 테두리와 그림자 효과를 적용했습니다.
경고 대화상자
삭제, 로그아웃, 취소와 같은 비가역적인 작업이 수행될 때 흐름을 중단시키는 모달로, 네오브루탈리즘 스타일의 테두리와 그림자 효과를 적용했습니다.
구분선
메뉴, 도구 모음, 목록을 구분하는 가로 또는 세로 선으로, 네오브루탈리즘 스타일의 테두리와 동일한 단색 테두리 색상으로 그려집니다.
날짜 선택기
양식 및 필터에서 특정 날짜, 기간, 생일을 선택할 수 있는 팝오버 캘린더로, 네오브루탈리즘 스타일의 테두리와 강렬한 그림자 효과가 적용되어 있습니다.
네이티브 선택
양식, 필터 및 국가 선택기를 위해 재설계된 기본 HTML 선택 요소 — 네오브루탈리즘 스타일의 테두리와 그림자가 적용된 OS 기반 드롭다운.
대화상자
확인, 간단한 양식, 그리고 영구적인 작업에 대한 안내를 위한 모달 창 — 두꺼운 테두리와 뚜렷한 그림자가 적용된 상태로 페이지 위에 겹쳐져 있습니다.
데이터 테이블
관리자 패널, 대시보드 및 주문 목록을 위한 정렬 및 필터링이 가능하고 페이지 단위로 표시되는 테이블 — 네오브루탈리즘 스타일의 테두리와 그림자 효과가 적용되었습니다.
드로어
모바일 메뉴, 필터, 빠른 입력 양식을 위해 화면의 어느 가장자리에서든 미끄러지듯 나타나는 제스처 기반 시트로, 네오브루탈리즘 스타일의 테두리와 그림자가 적용되어 있습니다.
드롭다운 메뉴
행별 작업, 계정 전환, 보기 옵션을 위한 버튼으로 호출되는 메뉴 — 네오브루탈리즘 스타일의 테두리와 그림자 효과가 적용되었습니다.
라디오 그룹
요금제, 배송 옵션 및 설정 양식을 위한 단일 선택형 라디오 버튼 세트 — 네오브루탈리즘 스타일의 테두리와 그림자 효과가 적용되었습니다.
레이블
입력란, 체크박스, 스위치 및 라디오 버튼 그룹에 대한 캡션 — 클릭 시 컨트롤이 활성화되며, 네오브루탈리즘 스타일의 제목용 서체로 표시됩니다.
메뉴 표시줄
앱 스타일의 툴바, 편집기 및 대시보드를 위한 드롭다운 메뉴가 포함된 수평 바 — 네오브루탈리즘 스타일의 테두리와 그림자 효과가 적용되었습니다.
방향
LTR(좌에서 우로)과 RTL(우에서 좌로) 방향 간에 컴포넌트를 전환하여, 아랍어, 히브리어, 페르시아어 환경에서 메뉴, 슬라이더, 탭이 올바르게 반전되도록 하는 컨텍스트 프로바이더입니다.
배지
카드, 표, 탐색 메뉴 항목에 표시되는 상태, 개수, 태그를 위한 작은 라벨로, 네오브루탈리즘 스타일의 테두리와 그림자 효과가 적용되어 있습니다.
버튼
양식 제출, 툴바, 취소 확인 버튼 등을 위한 클릭 가능한 트리거로, 두꺼운 테두리가 있으며 클릭 시 테두리 안쪽으로 그림자가 스며드는 효과가 있습니다.
버튼 그룹
퓨즈는 버튼, 도구 모음, 입력 애드온을 하나의 테두리가 있는 단위로 통합합니다. 두꺼운 테두리 하나, 강한 그림자 하나, 그리고 하나의 통합된 클릭 동작이 적용됩니다.
빈 상태
검색 결과 없음, 빈 대시보드, 첫 실행 화면 등을 위한 자리 표시자 — 네오브루탈리즘 스타일의 테두리로 둘러싸인 아이콘, 제목 및 동작.
사이드바
대시보드, 문서, 관리 도구를 위한 접이식 앱 셸 내비게이션 패널 — 네오브루탈리즘 스타일의 테두리와 그림자 효과를 적용했습니다.
셀렉트
국가 필드, 정렬 순서, 테마 설정 등 하나의 옵션을 선택하기 위한 드롭다운 메뉴로, 두꺼운 네오브루탈리즘 스타일의 테두리와 강한 그림자가 적용되어 있습니다.
스위치
알림, 다크 모드, 기능 플래그 등 설정을 즉시 켜거나 끌 수 있는 토글 버튼으로, 네오브루탈리즘 스타일의 테두리와 그림자 효과가 적용되어 있습니다.
스켈레톤
데이터가 로드되는 동안 카드, 아바타, 표를 표시하기 위한 깜빡이는 자리 표시자 블록으로, 네오브루탈리즘 스타일의 두꺼운 테두리 효과가 적용되어 있습니다.
스크롤 영역
채팅 창, 사이드바, 파일 트리를 위한 사용자 정의 크로스 브라우저 스크롤바가 적용된 스크롤 가능한 컨테이너로, 두툼한 네오브루탈리즘 스타일의 스크롤 손잡이가 특징입니다.
스피너
보류 중인 제출, 데이터 가져오기 및 인라인 바쁜 상태를 나타내는 애니메이션 로딩 표시기 — 모든 네오브루탈리스트 컨트롤에 바로 적용할 수 있는 아이콘입니다.
슬라이더
값이나 범위(볼륨, 가격 필터, 설정 등)를 선택할 수 있는 드래그 가능한 입력 요소로, 네오브루탈리즘 스타일의 테두리와 그림자 효과가 적용되어 있습니다.
시트
화면 가장자리에서 미끄러지듯 펼쳐지는 패널로, 내비게이션 드로어, 필터 및 편집 양식을 표시하며, 네오브루탈리즘 스타일의 테두리와 그림자 효과가 적용되어 있습니다.
아바타
프로필 메뉴, 댓글 스레드 및 팀 목록에 이니셜 대체 이미지가 적용되며, 네오브루탈리즘 스타일의 두꺼운 테두리 처리가 적용됩니다.
아코디언
FAQ, 설정, 그리고 콘텐츠가 많은 페이지를 위한 수직으로 쌓인 확장 가능한 섹션 세트로, 네오브루탈리즘 스타일의 테두리와 그림자 효과가 적용되어 있습니다.
알림
양식 오류, 경고 및 성공 확인을 위한 인라인 콜아웃 — 네오브루탈리즘 스타일의 테두리와 강한 그림자가 적용된 상태 색상의 패널.
이동 경로
해당 페이지가 사이트 계층 구조 내에서 어디에 위치하는지 — 문서, 스토어 카테고리, 대시보드의 링크 경로 — 를 굵은 네오브루탈리즘 서체로 표시합니다.
입력
로그인, 검색창, 결제 양식 등에 사용되는 단일 줄 텍스트 입력란으로, 네오브루탈리즘 스타일의 두꺼운 테두리와 강한 그림자 효과가 적용되어 있습니다.
입력 그룹
검색 창, URL 입력란, 채팅 작성창의 입력란에 아이콘, 버튼 및 키보드 힌트를 추가하세요. 네오브루탈리즘 스타일의 테두리와 그림자가 적용됩니다.
접기
파일 트리, 고급 설정 및 ‘더 보기’ 섹션을 위한 트리거-패널 쌍 — 네오브루탈리즘 스타일의 테두리와 그림자 효과가 적용되었습니다.
진행률
업로드, 설치, 여러 단계로 이루어진 온보딩 등 작업이 완료될 때마다 채워지는 얇은 막대로, 네오브루탈리즘 스타일의 테두리와 그림자 효과가 적용되어 있습니다.
체크박스
동의 체크박스, 다중 선택 필터, 일괄 행 선택을 위한 이진 토글 — 네오브루탈리즘 스타일의 테두리와 그림자 효과가 적용되었습니다.
카드
대시보드, 요금제, 제품 그리드용 테두리가 있는 박스 — 네오브루탈리즘 스타일의 강렬한 그림자 효과가 적용된 헤더, 콘텐츠, 푸터.
캐러셀
제품 갤러리, 고객 후기, 헤로 섹션을 위한 스와이프 가능한 슬라이드쇼 — 네오브루탈리즘 스타일의 테두리와 강렬한 그림자가 더해졌습니다.
캘린더
예약, 일정 관리 및 기간 선택을 위한 월 단위 그리드 날짜 선택기 — 네오브루탈리즘 스타일의 테두리와 그림자 효과가 적용되었습니다.
커맨드
⌘K 메뉴, 전체 검색 및 빠른 동작을 위한 키보드 기반 명령 팔레트 — 네오브루탈리즘 스타일의 테두리와 그림자 효과가 적용되었습니다.
컨텍스트 메뉴
파일 행, 캔버스 및 데이터 그리드에 대한 마우스 오른쪽 버튼 메뉴 — 네오브루탈리즘 스타일의 테두리와 그림자 효과를 적용한 상황에 맞는 작업들.
콤보박스
입력하는 대로 선택 항목을 필터링하는 자동 완성 입력 필드(국가 선택기, 태그 입력 필드, 긴 드롭다운 목록 등)로, 네오브루탈리즘 스타일의 테두리와 그림자가 적용되어 있습니다.
크기 조절
코드 편집기, 파일 트리, 대시보드 레이아웃을 위한 드래그 가능한 분할 패널 — 네오브루탈리즘 스타일의 테두리와 그림자 효과가 적용되었습니다.
키보드
메뉴, 툴팁 및 명령 팔레트에서 단축키 힌트를 표시하는 키보드 키 캡 — 네오브루탈리즘 스타일의 테두리와 그림자가 적용된 네이티브 kbd 요소.
타이포그래피
제목, 본문, 목록, 표, 인라인 코드 등을 위한 범용 스타일 레시피 — 네오브루탈리즘 스타일의 강렬한 디자인으로 조판되었습니다.
탐색 메뉴
사이트 헤더, 문서 탐색 메뉴, 앱 셸을 위한 링크와 드롭다운 패널이 포함된 가로 막대 — 네오브루탈리즘 스타일의 테두리와 강한 그림자가 적용되어 있습니다.
탭
네오브루탈리즘 스타일의 테두리와 그림자 효과를 적용하여 설정 페이지, 대시보드, 코드 미리보기 등 계층적으로 구성된 콘텐츠 패널 간을 자유롭게 전환할 수 있습니다.
테이블
청구서, 관리자 목록, 가격표 등을 위한 시맨틱 HTML 테이블 — 테두리가 있는 행, 굵은 헤더, 그리고 강렬한 네오브루탈리즘 스타일의 그림자.
텍스트 영역
댓글, 자기소개, 지원 메시지를 입력할 수 있는 다중 행 텍스트 입력란 — 네오브루탈리즘 스타일의 테두리와 그림자 효과가 적용되었습니다.
토글
도구 모음의 서식, 음소거 및 고정 제어 기능을 위한 2단계(켜기/끄기) 버튼 — 네오브루탈리즘 스타일의 테두리와 그림자 효과가 적용되었습니다.
토글 그룹
에디터 툴바, 뷰 전환기, 필터 바를 위한 2상태 버튼 그룹 — 네오브루탈리즘 스타일의 테두리와 그림자 효과를 적용했습니다.
툴팁
아이콘 버튼, 키보드 단축키 및 잘린 레이블에 대한 마우스 오버 및 포커스 힌트 — 네오브루탈리즘 스타일의 테두리와 그림자 효과를 적용했습니다.
팝오버
날짜 선택기, 필터 및 인라인 양식을 위한 트리거에 고정된 플로팅 패널로, 네오브루탈리즘 스타일의 테두리와 그림자 효과가 적용되어 있습니다.
페이지네이션
검색 결과, 표, 아카이브에 대한 페이지 번호 링크와 이전/다음 이동 버튼 — 네오브루탈리즘 스타일의 테두리와 그림자 효과를 적용했습니다.
필드
설정 패널, 결제 양식, 가입 절차에 사용되는 라벨, 컨트롤, 도움말 텍스트 및 오류 메시지 슬롯 — 네오브루탈리즘 양식의 디자인 기법을 적용했습니다.
항목
알림 피드, 설정 목록 및 파일 행을 위한 미디어, 제목, 설명 및 동작 슬롯이 포함된 유연한 레이아웃 — 네오브루탈리즘 스타일.
호버 카드
마우스를 올리면 나타나는 플로팅 미리보기 — 프로필 엿보기, 링크 미리보기, 용어집 용어 등 — 에 네오브루탈리즘 스타일의 테두리와 그림자 효과가 적용되어 있습니다.
화면비
이미지, 동영상 삽입 요소 및 지도가 크기가 조정될 때 고정된 비율을 유지하도록 제한합니다. 네오브루탈리즘 스타일의 카드가 그리드 내에서 정렬되도록 유지해 주는 레이아웃 유틸리티입니다.
사랑합니다. 개발자도, 디자이너도,
크리에이터도.
우연히 UI 키트를 발견하고 바로 받았어요. 새 프로젝트인데도 활발히 관리되고 계속 개선돼서 감탄했습니다. 정말 대단해요 🤘
Ziv Reich, 소프트웨어 개발자 neobrutalism.com 정말 잘 만들었다고 말하고 싶었어요. 너무 마음에 듭니다. 제가 디자인에 약한데 덕분에 큰 도움이 됐고, 개인 사이트에 바로 써봤어요.
Paul Bratslavsky, Coding With Paul 운영자 드디어 Neobrutalism.com으로 개인 웹사이트를 새로 만들었어요. 재미있는 라이브러리고 시작하기도 쉬워요!
Cameron Blackwood, 콘텐츠 크리에이터 Neobrutalism.com은 제가 제일 좋아하는 레트로 감성 UI 컴포넌트 라이브러리 중 하나예요. 정말 ship 할 수 있는 컴포넌트.
Zhengyang Hou, 인디 해커 웹에서 제일 좋아하는 UI 라이브러리 중 하나예요. 정말 잘했어요. 앞으로 더 크게 되길 바랍니다.
Taseen Tanvir, 창업자 & 디자이너 Neobrutalism.com Pro를 써봤는데, 다른 것과 안 닮은 UI 키트라 신선했어요. 네오브루탈리즘 블록 🔥 덕분에 재미있는 레이아웃 프로토타입이 훨씬 빨랐어요.
Nitesh Padghan, 고스트라이터 균형과 흐름이 완벽한 아름다운 랜딩 페이지 디자인입니다. 컬러 팔레트와 애니메이션이 결합되어 뛰어난 사용자 경험을 만듭니다.
Alan Obeng-Peprah, Senior Designer @ NativeXAI 그들이 전달한 디자인에 정말 감명받았습니다. 최종 결과물이 제가 상상했던 것과 정확히 일치했습니다.
Desmond, 공동 창업자 @ VectorlabsVentures 에이전시 운영자로서 보통 클라이언트 랜딩 레이아웃을 다듬는 데 몇 주를 씁니다. Neobrutalism.com에서는 템플릿을 끼워 넣고 카피만 다듬으면 바로 출시할 수 있습니다.
Duke Opoku Amankwah, 창업자 @ Midas 템플릿이 시각적으로만 뛰어난 게 아니라 구조도 매우 잘 잡혀 있습니다. 개발 시간을 몇 주나 아껴 줬습니다.
Abiola Braimah, 개발자 @ Studio IX 뛰어난 품질과 디테일. 반응형 디자인이 모든 기기에서 완벽하게 동작합니다.
Acromond X., 공동 창업자 @ VectorlabsVentures 이 템플릿을 워크플로에 통합하니 개발 주기가 크게 줄었습니다. 훌륭한 작업입니다.
Raquib S., 백엔드 개발자 이 템플릿은 우리의 기본 리소스가 되었습니다. 코드가 깔끔하고 문서화가 잘 되어 있으며 커스터마이즈도 쉽습니다.
Hallic M., 개발자 @ AtlasLabs Neobrutalism.com 템플릿은 미학과 기능 사이의 완벽한 균형을 잡습니다. 우리 프로젝트에 진정한 게임 체인저입니다.
Ibrahim S., Frontend Lead @ ScaleUp 뛰어난 지원과 프리미엄 품질 템플릿. 이 템플릿의 ROI는 놀랍습니다.
Kevin K., CEO @ WebCraft Neobrutalism.com 템플릿은 새 클라이언트 프로젝트를 접근하는 방식을 완전히 바꿨습니다. 코드 품질이 뛰어나고 디자인도 정말 월드클래스입니다.
Danny G., DevStack 창업자 많은 템플릿 라이브러리를 써 봤지만, Neobrutalism.com은 성능 최적화와 깔끔한 코드 아키텍처에 대한 관심으로 돋보입니다.
Ian D., Wavelength CTO 이 템플릿의 애니메이션과 마이크로 인터랙션은 정말 인상적입니다. 디자인 팀을 위한 최고의 투자입니다.
Ben S., PixelPerfect 리드 디자이너 비기술 창업자로서 Neobrutalism.com 템플릿 덕분에 디자인 품질을 포기하지 않고 MVP를 기록적인 시간에 출시할 수 있었습니다. 투자자들도 감탄했습니다.
Matthew I., 스타트업 창업자 이 컴포넌트가 얼마나 모듈화되어 있고 문서화가 잘 되어 있는지 마음에 듭니다. 서로 다른 템플릿 조각을 매끄럽게 섞을 수 있었습니다.
Garrett P., TechFusion 프론트엔드 리드 Neobrutalism.com 템플릿의 ROI는 놀랍습니다. 개발 시간을 크게 줄이면서도 더 높은 품질의 사이트를 고객에게 전달하고 있습니다.
Xavier C., 에이전시 대표
구성 요소
갤러리 FAQ
이 무료 기본 요소 그리드 — 각 문서 페이지의 백엔드, CLI 설치 방법, 그리고 갤러리가 /docs /components에 어떻게 매핑되는지.