컴포넌트 · Needless UI

아바타
사람의 사진을 보여 주거나, 그 사람만의 고유한 색 위에 이니셜을 표시합니다.
브레드크럼
현재 페이지까지 이어지는 페이지 경로를 보여 줍니다.
Button
작업과 링크를 위한 버튼으로, 네이티브 button 요소와 a 요소에 스타일을 적용합니다.
캘린더
날짜 하나나 기간, 여러 날짜를 키보드로도 선택할 수 있습니다.
캐러셀
슬라이드를 한 줄로 늘어놓고 스크롤과 스냅으로 넘기며, 버튼, 점, 자동 재생을 지원합니다.
채팅
모델과 대화하는 UI로, 스트리밍 응답, 도구, 버전, 파일을 지원합니다.
색상 선택기
영역이나 색상환에서 OKLCH로 색상을 고르며, 색상 견본, 스포이트, 명도 대비 검사를 제공합니다.
콤보박스
입력하는 대로 옵션을 제안하는 텍스트 필드입니다.
명령 팔레트
앱의 모든 명령을 키 입력 한 번으로 불러옵니다.
날짜 선택기
날짜나 시간을 세그먼트별로 입력하거나, 캘린더에서 선택합니다.
Dialog
네이티브 dialog 요소를 기반으로 한 모달 창으로, 포커스는 브라우저가 관리합니다.
드롭존
파일을 끌어다 놓거나 선택합니다. 검사, 미리 보기, 진행률이 표시되는 업로드를 지원합니다.
리치 텍스트 편집기
제목, 목록, 링크, 서식을 툴바로 넣거나, 입력하면서 Markdown으로 바로 쓸 수 있습니다.
빈 상태
보여 줄 것이 없을 때 무엇을 보여 주고 어떻게 하면 되는지 알려 줍니다.
데이터 그리드
행이 아무리 많아도 정렬, 필터링, 그룹화, 편집, 내보내기를 할 수 있습니다.
Markdown
스트리밍 중에도 Markdown을 안전하게 렌더링합니다.
입력 마스크
입력하는 대로 서식이 맞춰지는 텍스트 필드로, 날짜, 카드 번호, IBAN, 각종 코드에 씁니다.
Menu
작업 목록을 팝업으로 보여 주는 메뉴로, 하위 메뉴와 체크 가능한 항목을 지원하며 키보드로 모든 조작이 가능합니다.
숫자 필드
증감 버튼이 있는 숫자 입력으로, 모든 로케일에 맞는 서식으로 표시됩니다.
OTP 입력
인증 코드를 칸마다 나눠 보여 주지만, 실제로는 진짜 입력 필드 하나입니다.
전화번호 필드
국가 선택기와 번호로 이루어지며, 번호는 그 나라의 표기 방식대로 묶입니다.
팝오버
버튼 옆에 뜨는 패널과, 마우스를 올리면 나타나는 리치 툴팁입니다.
별점
진짜 라디오 버튼으로 만든, 별로 평가하는 컴포넌트입니다.
스케줄러
일정을 월, 주, 일, 일정 목록, 또는 회의실과 사람의 타임라인으로 보여 주고, 드래그로 원하는 자리에 옮깁니다.
셀렉트
짧은 목록이든 아주 긴 목록이든, 옵션을 하나 또는 여러 개 고를 수 있습니다.
스켈레톤
콘텐츠를 불러오는 동안 레이아웃을 유지하는 자리 표시자입니다.
스플리터
나란히 놓거나 위아래로 쌓은 패널의 크기를 핸들로 조절합니다.
토스트
쌓이고, 스와이프로 치울 수 있으며, 포커스를 빼앗지 않는 짧은 메시지입니다.
가이드 투어
단계마다 설명하는 대상 옆에 카드를 띄우고, 주변 페이지를 어둡게 합니다.