- Jelly UI v1.1은 실제 폼 컨트롤과 말랑한 소프트 바디 물리 효과를 결합한 의존성 없는 웹 컴포넌트 라이브러리로, 40개 커스텀 엘리먼트를 제공함
- 하나의 모듈 스크립트로 설치하며 다크 모드, 운영체제 테마 자동 추적, 강조색 변경, 오른쪽에서 왼쪽으로 쓰는 RTL 배치를 지원함
- 버튼은 네이티브
<button>, 슬라이더는 숨겨진range입력을 이용해 키보드 조작·스크린 리더·폼 참여를 위한 네이티브 의미 구조를 유지함 - 체크박스와 입력창부터 토스트·탭·다이얼로그까지 다양한 요소에 눌림·늘어남·물결·튕김 같은 촉각적 애니메이션을 적용함
- WCAG AA 색상 토큰과 ARIA 패턴을 내장해 부드러운 시각 효과를 살리면서도 접근 가능한 제품 인터페이스를 구성할 수 있음
설치와 테마
- Jelly UI는 의존성 없이, 40개 커스텀 엘리먼트와 하나의
<script type="module">태그만으로 사용할 수 있음<script type="module" src="https://jelly-ui.com/package.js"></script>; <jelly-theme mode="auto"> <jelly-button variant="mint">Publish</jelly-button> </jelly-theme> <jelly-theme>는 하위 트리에 디자인 토큰을 한정 적용하는 테마 공급자임mode는auto,light,dark를 지원해 운영체제 설정을 따르거나 특정 테마를 강제할 수 있음accent로 강조색을 다시 지정할 수 있음
- 공통 색상 변형은
azure,rose,amber,mint,graphite,platinum,white이며, 크기는 주로small,medium,large로 구성됨
버튼과 동작 요소
<jelly-button>은 내부에 실제 네이티브<button>을 넣어 키보드와 스크린 리더를 지원하는 캡슐형 버튼임- 색상·크기와
pill·square형태, 비활성화 및 블록 배치를 설정할 수 있음
- 색상·크기와
<jelly-icon-button>은 아이콘 하나에 맞춘 사각형 또는 원형 버튼임label속성으로 스크린 리더가 인식할 이름을 지정함
폼 입력 컨트롤
<jelly-checkbox>는 폼에 참여하며checked와 불확정 상태(indeterminate)를 지원하고, 상태가 바뀔 때 젤리 사각형이 튀어 오름<jelly-input>은text,email,password용 한 줄 입력 필드임- 포커스를 받으면 표면이 들리고 테두리가 나타나며, 입력할 때마다 캐럿 위치에서 물결이 번짐
disabled와readonly를 지원함
<jelly-label>은for로 컨트롤과 연결됨- 클릭하면 대상에 포커스하고 라벨 텍스트가 접근 가능한 이름이 되며, 필수 여부와 크기를 지정할 수 있음
<jelly-otp>는 숫자마다 상자 하나를 제공하는 일회용 코드 입력기임- 입력, 백스페이스, 화살표 키, 붙여넣기를 처리하며 길이·색상·크기·비활성화를 설정할 수 있음
<jelly-radio>는 같은 루트에서 동일한name을 공유하는 항목끼리 그룹을 형성함- 이동식
tabindex와 문서 방향을 고려한 화살표 키 탐색을 지원함
- 이동식
<jelly-radio-group>은jelly-radio를 위한 라벨 있는radiogroup컨테이너임- 범례, 가로·세로 흐름 배치, 자식 요소로의 크기 전달을 제공함
<jelly-range>는 최솟값과 최댓값 구간을 고르는 이중 핸들 슬라이더임- 두 손잡이에
role="slider", 포커스, ARIA를 적용하며 드래그할 때 젤리 손잡이가 눌림
- 두 손잡이에
<jelly-segmented>는 상호 배타적인 선택지를 담은 캡슐형 트랙임- 선택 표시는 구간 사이를 이동하면서 기울고 늘어나는 젤리 알약 형태로 동작함
<jelly-select>는 ARIAcombobox·listbox패턴을 사용하는 폼 연동 드롭다운임- 트리거와 옵션 패널 모두 소프트 바디 표면으로 구성됨
- 패널은 필드에서 펼쳐지며 아래 공간이 부족하면 위쪽으로 전환됨
<jelly-slider>는 단일 값을 선택하는 슬라이더임- 숨겨진 네이티브
range입력이 의미 구조와 폼 참여를 담당하고, 화면에는 눌리는 젤리 손잡이가 표시됨
- 숨겨진 네이티브
<jelly-switch>는 드래그 가능한 스위치로, 손잡이가 액체 방울처럼 늘어나고 꺼짐·켜짐 색상이 교차 전환됨<jelly-textarea>는 여러 줄 입력에 따라 최소·최대 높이 사이에서 자동으로 커짐- 표면도 높이에 맞춰 늘어나며 입력 시 캐럿 위치에서 물결이 발생하고,
disabled와readonly를 지원함
- 표면도 높이에 맞춰 늘어나며 입력 시 캐럿 위치에서 물결이 발생하고,
상태와 피드백
<jelly-alert>는info,success,warning,danger네 가지 톤과 선택적인 닫기 버튼을 제공하는 배너임<jelly-badge>는 배지·태그·상태 표시에 쓰는 작은 요소로, 텍스트가 바뀔 때 튀어 오름- 채움·외곽선, 알약·사각형 형태와
live,instant동작을 설정할 수 있음
- 채움·외곽선, 알약·사각형 형태와
<jelly-progress>는 진행에 따라 채움의 앞부분이 흔들리는 진행 표시줄임- 불확정 모드에서는 덩어리가 양쪽 벽 사이를 튕김
<jelly-skeleton>은 반짝임 대신 부드럽게 호흡하듯 흔들리는 로딩 자리표시자임line,rect,circle형태를 지원함
<jelly-spinner>는 세 점 사이를 이동하는 점액 덩어리형dots와 형태를 바꾸며 회전하는blob표시기를 제공함<jelly-toaster>는 인라인 끝 방향에서 나타났다가 사라지는 토스트 알림을 관리함- 일반적으로
jellyToast('Saved!', { tone: 'success' })헬퍼로 호출함 - 배치된 요소에
position="bottom"을 주면 알림 스택이 위로 자라남
- 일반적으로
콘텐츠 표면
<jelly-accordion>은 여러<jelly-collapsible>항목을 묶음single모드에서는 하나가 열릴 때 나머지가 튕기듯 닫힘
<jelly-card>는 콘텐츠 아래에 놓이는 젤리 표면 컨테이너임squish를 추가하면 부드러운 쿠션처럼 눌리면서 버튼 역할을 함
<jelly-chip>은 정적 라벨, 전환 가능한 필터 또는 제거 가능한 태그로 사용할 수 있음- 선택 가능·선택 상태·제거 가능·비활성화 여부를 설정함
<jelly-collapsible>은 헤더 버튼으로 패널을 튕기듯 열고 닫는 펼침·접기 영역임- 텍스트가 아니라 표면이 움직이도록 구성됨
<jelly-divider>는 가로·세로 또는 라벨이 있는 가는 구분선임<jelly-kbd>는 눌러 볼 수 있는 젤리 키캡임key로 실제 키와 연결하면 페이지 어디서든 해당 키를 누르는 동안 키캡도 내려감
탐색과 레이아웃
<jelly-resizable>은 젤리 구분선을 드래그하거나 키보드로 크기를 조절하는 패널 그리드임row,vertical,both방향을 지원함
<jelly-tabs>는 실제tablist의미 구조를 사용하는 탭 보기임- 젤리 알약 형태의 선택 표시가 이동하고 탭 패널이 튕기며 나타남
오버레이
<jelly-dialog>는 젤리처럼 튀며 나타나는 모달 대화상자임- 페이지를 잠그고 닫힌 뒤 이전 위치로 포커스를 반환함
- Escape 키, 닫기 버튼 또는 배경 클릭으로 닫을 수 있음
<jelly-drawer>는 끝에서 약간 넘어갔다 돌아오는 스프링 효과로 나타나는 플로팅 시트임- 인라인 시작·끝 또는 아래쪽에서 열 수 있음
<jelly-popover>는 클릭으로 여는 비모달 패널임- 트리거에 고정되며 Escape 키나 외부 클릭으로 닫힘
top,bottom,start,end배치를 지원함
<jelly-tooltip>은 마우스를 올리거나 키보드 포커스를 받을 때 트리거 위에 테마가 적용된 말풍선을 표시함- 네 방향 배치와 세 가지 크기를 지원함