구성요소
WCAG AA/AAA 접근성이 내장된 무료 CSS 전용 Tailwind CSS 구성 요소입니다. JavaScript가 필요하지 않으며 프레임워크에 구애받지 않으며 Django, HTMX, Laravel, React, Vue 및 모든 스택과 호환됩니다. 바로 사용할 수 있고 쉽게 사용자 정의할 수 있습니다.
Frutjam은 Tailwind CSS v4용으로 제작된 52개 이상의 CSS 전용 Tailwind CSS 구성 요소(버튼, 모달, 양식, 탐색, 데이터 표시 등)를 제공합니다. 모든 구성 요소는 Tailwind 유틸리티 클래스와 함께 작동하는 의미 체계 클래스 이름(.btn, .card, .badge)을 사용합니다. JavaScript가 번들로 제공되지 않고 React 컨텍스트가 필요하지 않으며 Tailwind 자체 외에 PostCSS 플러그인이 필요하지 않습니다. 모든 구성 요소는 모든 표면에서 판독 가능한 대비를 보장하는 손으로 조정된 OKLCH 색상 쌍을 사용하여 즉시 사용 가능한 WCAG AA입니다. Frutjam은 CSS 전용이고 프레임워크에 구애받지 않기 때문에 동일한 HTML 마크업이 Django 템플릿, HTMX 응답, Laravel Blade, Rails ERB, React JSX 또는 일반 정적 HTML에서 수정 없이 작동합니다.
Frutjam을 처음 사용하시나요?
몇 초 만에 시작하세요. 가져오기를 두 번만 하면 빌드 준비가 완료됩니다.
아코디언
기본 `<details>`/`<summary>`를 사용하는 CSS 전용 Tailwind CSS 아코디언. JavaScript가 전혀 없는 콘텐츠 섹션을 확장하고 축소합니다. WCAG AA 액세스 가능하며 Django, HTMX, Laravel, React 및 모든 스택에서 작동합니다.
알리다
정보, 성공, 경고 및 오류 변형이 포함된 CSS 전용 Tailwind CSS 경고입니다. 부드러운 스타일, 아이콘 슬롯 및 무시할 수 있는 패턴입니다. WCAG AA 액세스 가능하며 Django, HTMX, Laravel, React 및 모든 스택에서 작동합니다.
화신
프로필 이미지용 CSS 전용 Tailwind CSS 아바타입니다. xs-xl 크기, 그룹 스태킹 및 온라인/오프라인 상태 표시기. WCAG AA 액세스 가능하며 Django, HTMX, Laravel, React 및 모든 스택에서 작동합니다.
배지
기본, 보조, 악센트, 정보, 성공, 경고 및 오류 변형이 포함된 CSS 전용 Tailwind CSS 배지입니다. 소프트, 아웃라인 및 고스트 스타일, 크기 xs-lg. WCAG AA 액세스 가능하며 Django, HTMX, Laravel, React 및 모든 스택에서 작동합니다.
탐색경로
사용자 정의 구분 기호 및 접근 가능한 랜드마크 마크업이 포함된 CSS 전용 Tailwind CSS 탐색경로 탐색입니다. WCAG AA는 Django, HTMX, Laravel, React 및 모든 Tailwind CSS v4 프로젝트에서 작동합니다.
단추
기본, 보조, 악센트, 고스트, 윤곽선 및 소프트 변형이 포함된 CSS 전용 Tailwind CSS 버튼입니다. 크기는 xs-xl, 로드 상태, 비활성화 및 아이콘 버튼입니다. CSS 전용 WCAG AA는 Django, HTMX, Laravel, React에서 작동합니다.
카드
윤곽선, 그림자 및 평면 스타일이 포함된 CSS 전용 Tailwind CSS 카드입니다. 소형, 기본 및 대형 크기입니다. 카드 내용, 카드 제목, 카드 바닥글 슬롯. WCAG AA는 Django, HTMX, Laravel, React 및 모든 스택에서 작동합니다.
회전목마
스크롤-스냅을 사용하는 CSS 전용 Tailwind CSS 캐러셀. 탐색 컨트롤이 있고 JavaScript가 필요하지 않은 가로 슬라이드 레이아웃입니다. WCAG AA 액세스 가능하며 Django, HTMX, Laravel, React 및 모든 스택에서 작동합니다.
채팅
CSS 전용 Tailwind CSS 채팅 풍선 구성요소입니다. 아바타 및 타임스탬프 슬롯이 포함된 전송 및 수신 메시지의 시작 및 종료 위치입니다. WCAG AA는 Django, HTMX, Laravel, React 및 모든 스택에서 작동합니다.
체크박스
기본, 보조, 악센트 및 의미 색상 변형이 포함된 CSS 전용 Tailwind CSS 확인란입니다. 크기 xs-xl, 불확정 상태. WCAG AA 액세스 가능하며 Django, HTMX, Laravel, React 및 모든 스택에서 작동합니다.
접을 수 있는
기본 `<details>` 요소를 사용하는 CSS 전용 Tailwind CSS 축소 가능 패널. JavaScript 없이 콘텐츠 섹션을 표시하고 숨깁니다. WCAG AA 액세스 가능하며 Django, HTMX, Laravel, React 및 모든 스택에서 작동합니다.
콤보박스
실시간 검색 필터링 및 액세스 가능한 드롭다운 목록이 포함된 CSS 전용 Tailwind CSS 콤보박스입니다. 키보드 탐색, 색상 변형. WCAG AA 액세스 가능하며 Django, HTMX, Laravel, React 및 모든 스택에서 작동합니다.
카운트다운
CSS 전용 Tailwind CSS 카운트다운 타이머. 일, 시간, 분, 초에 대한 애니메이션 숫자 표시. WCAG AA 액세스 가능하며 Django, HTMX, Laravel, React 및 모든 스택에서 작동합니다.
차이점
드래그 가능한 구분선을 사용하여 콘텐츠를 나란히 비교할 수 있는 CSS 전용 Tailwind CSS diff 뷰어입니다. JavaScript가 필요하지 않습니다. WCAG AA 액세스 가능하며 Django, HTMX, Laravel, React 및 모든 스택에서 작동합니다.
분할기
CSS 전용 Tailwind CSS 구분선 — 선택 사항인 중앙 라벨이 있는 가로 및 세로입니다. 색상 및 크기 변형. WCAG AA 액세스 가능하며 Django, HTMX, Laravel, React 및 모든 스택에서 작동합니다.
서랍
기본 체크박스 토글을 사용하는 CSS 전용 Tailwind CSS 서랍입니다. JavaScript 없이 탐색 또는 필터를 위한 슬라이드인 측면 패널입니다. WCAG AA 액세스 가능하며 Django, HTMX, Laravel, React 및 모든 스택에서 작동합니다.
보행인
다중 열 레이아웃, 로고, 링크 및 저작권 슬롯이 포함된 CSS 전용 Tailwind CSS 바닥글입니다. WCAG AA에 액세스할 수 있으며 Django, HTMX, Laravel, React 및 모든 Tailwind CSS v4 프로젝트에서 작동합니다.
헤더
CSS 전용 Tailwind CSS 페이지 헤더 — 브랜드, 탐색 및 작업 슬롯이 있는 상단 표시줄 레이아웃입니다. WCAG AA 액세스 가능하며 Django, HTMX, Laravel, React 및 모든 스택에서 작동합니다.
영웅
랜딩 페이지용 CSS 전용 Tailwind CSS 히어로 섹션입니다. 제목, 설명, CTA가 중앙에 배치된 전체 너비 레이아웃입니다. WCAG AA 액세스 가능하며 Django, HTMX, Laravel, React 및 모든 스택에서 작동합니다.
지시자
모든 요소 모서리에 배지나 점을 오버레이하기 위한 CSS 전용 Tailwind CSS 표시기입니다. 색상 변형 및 위치 지정. WCAG AA 액세스 가능하며 Django, HTMX, Laravel, React 및 모든 스택에서 작동합니다.
입력
기본, 보조, 악센트 및 의미 색상 변형이 포함된 CSS 전용 Tailwind CSS 입력입니다. xs-xl 크기, 접두사 및 접미사 애드온 슬롯, 고스트 스타일. WCAG AA 액세스 가능하며 Django, HTMX, Laravel, React 및 모든 스택에서 작동합니다.
가입하다
버튼, 입력 또는 선택 항목을 연결된 단위로 그룹화하기 위한 CSS 전용 Tailwind CSS 조인입니다. 수평 및 수직. WCAG AA 액세스 가능하며 Django, HTMX, Laravel, React 및 모든 스택에서 작동합니다.
KBD
키보드 단축키 및 키 조합을 표시하기 위한 CSS 전용 Tailwind CSS kbd 구성 요소입니다. 크기 변형. WCAG AA 액세스 가능하며 Django, HTMX, Laravel, React 및 모든 스택에서 작동합니다.
링크
기본, 보조, 강조 및 중립 색상 변형이 포함된 CSS 전용 Tailwind CSS 링크입니다. 밑줄 및 일반 스타일을 가리킵니다. WCAG AA 액세스 가능하며 Django, HTMX, Laravel, React 및 모든 스택에서 작동합니다.
로드 중
스피너, 점, 링 및 막대 애니메이션이 포함된 CSS 전용 Tailwind CSS 로딩 표시기입니다. 색상 및 크기 변형이 가능하며 JavaScript가 필요하지 않습니다. WCAG AA 액세스 가능하며 Django, HTMX, Laravel, React 및 모든 스택에서 작동합니다.
큰 천막
콘텐츠와 로고를 가로로 스크롤하기 위한 CSS 전용 Tailwind CSS 선택 윤곽입니다. CSS를 통한 속도 및 방향 제어, JavaScript 없음. WCAG AA 액세스 가능하며 Django, HTMX, Laravel, React 및 모든 스택에서 작동합니다.
마스크
이미지를 원, 물결 모양, 하트, 육각형 등의 모양으로 자르기 위한 CSS 전용 Tailwind CSS 마스크입니다. WCAG AA 액세스 가능하며 Django, HTMX, Laravel, React 및 모든 스택에서 작동합니다.
메뉴
탐색 목록을 위한 CSS 전용 Tailwind CSS 수직 메뉴입니다. 활성, 비활성화 및 아이콘 항목 상태. 크기 변형. WCAG AA 액세스 가능하며 Django, HTMX, Laravel, React 및 모든 스택에서 작동합니다.
모달
기본 `<dialog>` 요소를 사용하는 CSS 전용 Tailwind CSS 모달입니다. 반응형 크기 조정, 배경 및 초점 트랩. 기본 사용법에는 JavaScript가 없습니다. WCAG AA 액세스 가능하며 Django, HTMX, Laravel, React 및 모든 스택에서 작동합니다.
Navbar
브랜드, 탐색 링크 및 작업 슬롯이 포함된 CSS 전용 Tailwind CSS 탐색 모음입니다. 끈적하고 투명한 변형. WCAG AA 액세스 가능하며 Django, HTMX, Laravel, React 및 모든 스택에서 작동합니다.
쪽수 매기기
번호가 매겨진 페이지, 이전/다음 화살표, 줄임표 간격, 액세스 가능한 라디오 입력 및 페이지 점프 선택을 위한 CSS 전용 Tailwind CSS 페이지 매기기입니다. JavaScript가 필요하지 않습니다. WCAG AA 액세스 가능하며 Django, HTMX, Laravel, React 및 모든 스택에서 작동합니다.
팝오버
기본 팝오버 API를 사용하는 CSS 전용 Tailwind CSS 팝오버입니다. 도구 설명 및 드롭다운을 위한 부동 콘텐츠 패널입니다. WCAG AA 액세스 가능하며 Django, HTMX, Laravel, React 및 모든 스택에서 작동합니다.
진전
기본, 보조, 악센트 및 의미 색상 변형이 포함된 CSS 전용 Tailwind CSS 진행 표시줄입니다. 크기 xs-xl. WCAG AA 액세스 가능하며 Django, HTMX, Laravel, React 및 모든 스택에서 작동합니다.
방사형 진행
CSS 전용 Tailwind CSS 방사형 진행 — 백분율 표시가 있는 원형 진행 링입니다. 색상 및 크기 변형, JavaScript 없음. WCAG AA 액세스 가능하며 Django, HTMX, Laravel, React 및 모든 스택에서 작동합니다.
라디오
기본, 보조, 악센트 및 의미 색상 변형이 포함된 CSS 전용 Tailwind CSS 라디오 버튼입니다. 크기 xs-xl. WCAG AA 액세스 가능하며 Django, HTMX, Laravel, React 및 모든 스택에서 작동합니다.
범위
기본, 보조, 악센트 및 의미 색상 변형이 포함된 CSS 전용 Tailwind CSS 범위 슬라이더입니다. 크기 xs-xl. WCAG AA 액세스 가능하며 Django, HTMX, Laravel, React 및 모든 스택에서 작동합니다.
평가
CSS 전용 Tailwind CSS 별표 및 심박수 구성 요소입니다. xs-xl 크기, 별표 1/2개 지원, JavaScript가 필요하지 않습니다. WCAG AA 액세스 가능하며 Django, HTMX, Laravel, React 및 모든 스택에서 작동합니다.
선택하다
기본, 보조, 악센트 및 의미 색상 변형이 포함된 CSS 전용 Tailwind CSS 선택 드롭다운입니다. 크기 xs-xl, 고스트 스타일. WCAG AA 액세스 가능하며 Django, HTMX, Laravel, React 및 모든 스택에서 작동합니다.
사이드바
측면 탐색 패널을 위한 CSS 전용 Tailwind CSS 사이드바입니다. 탐색 항목 상태 및 섹션 제목이 포함된 접을 수 있습니다. WCAG AA 액세스 가능하며 Django, HTMX, Laravel, React 및 모든 스택에서 작동합니다.
해골
자리 표시자 UI를 위한 CSS 전용 Tailwind CSS 스켈레톤 로더입니다. 펄스 애니메이션이 포함된 원, 직사각형 및 텍스트 선 모양. WCAG AA 액세스 가능하며 Django, HTMX, Laravel, React 및 모든 스택에서 작동합니다.
통계
측정항목 표시를 위한 CSS 전용 Tailwind CSS 통계입니다. 값, 레이블, 설명 및 아이콘 슬롯입니다. 반응형 그리드 레이아웃. WCAG AA 액세스 가능하며 Django, HTMX, Laravel, React 및 모든 스택에서 작동합니다.
상태
기본, 성공, 경고 및 오류 색상 변형이 포함된 CSS 전용 Tailwind CSS 상태 점 표시기입니다. 크기 xs-xl. WCAG AA 액세스 가능하며 Django, HTMX, Laravel, React 및 모든 스택에서 작동합니다.
단계
다단계 마법사 및 진행률 표시기를 위한 CSS 전용 Tailwind CSS 단계입니다. 수평 및 수직 레이아웃, 단계당 색상 변형. WCAG AA 액세스 가능하며 Django, HTMX, Laravel, React 및 모든 스택에서 작동합니다.
표면
테마가 있는 배경 및 텍스트 색상을 컨테이너에 적용하기 위한 CSS 전용 Tailwind CSS 표면입니다. 모든 색상 변형. WCAG AA 액세스 가능하며 Django, HTMX, Laravel, React 및 모든 스택에서 작동합니다.
교환
두 요소 간 전환을 위한 CSS 전용 Tailwind CSS 스왑입니다. 뒤집기, 회전 및 페이드 애니메이션, JavaScript 없음. WCAG AA 액세스 가능하며 Django, HTMX, Laravel, React 및 모든 스택에서 작동합니다.
테이블
얼룩말 줄무늬, 컴팩트 및 기본 크기, 고정된 열 및 행 가리키기 상태가 포함된 CSS 전용 Tailwind CSS 테이블입니다. WCAG AA 액세스 가능하며 Django, HTMX, Laravel, React 및 모든 스택에서 작동합니다.
탭
테두리, 리프트, 박스형 및 알약 스타일 변형이 포함된 CSS 전용 Tailwind CSS 탭입니다. 활성 상태 및 크기, JavaScript가 필요하지 않습니다. WCAG AA 액세스 가능하며 Django, HTMX, Laravel, React 및 모든 스택에서 작동합니다.
꼬리표
색상 변형, 부드러운 스타일 및 제거 가능한 버튼이 포함된 CSS 전용 Tailwind CSS 태그(칩)입니다. 크기는 xs-lg입니다. WCAG AA 액세스 가능하며 Django, HTMX, Laravel, React 및 모든 스택에서 작동합니다.
텍스트 영역
기본, 보조, 악센트 및 의미 색상 변형이 포함된 CSS 전용 Tailwind CSS 텍스트 영역입니다. 크기 xs-xl, 고스트 스타일. WCAG AA 액세스 가능하며 Django, HTMX, Laravel, React 및 모든 스택에서 작동합니다.
타임라인
시간순 이벤트 목록을 위한 CSS 전용 Tailwind CSS 타임라인입니다. 아이콘, 콘텐츠, 연결선 슬롯이 있는 세로 레이아웃입니다. WCAG AA 액세스 가능하며 Django, HTMX, Laravel, React 및 모든 스택에서 작동합니다.
토스트
알림 위치 지정(상단, 하단, 시작, 끝 및 중앙 배치)을 위한 CSS 전용 Tailwind CSS 토스트입니다. 레이아웃에 JavaScript가 없습니다. WCAG AA 액세스 가능하며 Django, HTMX, Laravel, React 및 모든 스택에서 작동합니다.
비녀장
기본, 보조, 강조 및 의미 색상 변형이 포함된 CSS 전용 Tailwind CSS 토글 스위치입니다. 크기 xs-xl. WCAG AA 액세스 가능하며 Django, HTMX, Laravel, React 및 모든 스택에서 작동합니다.
툴팁
상단, 하단, 왼쪽 및 오른쪽 배치가 포함된 CSS 전용 Tailwind CSS 도구 설명입니다. 색상 변형, JavaScript가 필요하지 않습니다. WCAG AA 액세스 가능하며 Django, HTMX, Laravel, React 및 모든 스택에서 작동합니다.
자주 묻는 질문
모든 Frutjam 구성요소는 CSS 전용인가요?
그렇습니다. 대부분의 구성 요소는 JavaScript가 전혀 포함되지 않은 순수한 CSS입니다. 버튼, 배지, 카드, 양식, 경고, 모달, 서랍, 탭 등은 모두 일반 HTML 및 CSS에서 작동합니다. 기본 HTML과 동등한 기능(토스트 위치 지정, 콤보 상자 필터링, 캐러셀 컨트롤)이 없는 소수의 구성 요소는 선택적 경량 JS 도우미를 제공하지만 CSS 레이아웃 및 스타일에는 JavaScript가 전혀 필요하지 않습니다.
Frutjam 구성 요소는 Django, HTMX 및 Laravel에서 작동합니까?
예 — Frutjam은 프레임워크에 구애받지 않습니다. 모든 구성 요소는 CSS 전용이므로 서버에서 렌더링되는 모든 스택에서 작동합니다. Django 템플릿, HTMX, Laravel Blade, Rails ERB, 일반 HTML — HTML을 출력할 수 있으면 Frutjam이 작동합니다. React, 빌드 파이프라인, JavaScript 프레임워크가 필요하지 않습니다.
구성 요소 WCAG에 액세스할 수 있습니까?
예 - 모든 구성 요소에서 WCAG AA 대비가 보장됩니다. 모든 색상 쌍(--color-primary / --color-on-primary 등)은 WCAG AA 대비 요구 사항을 충족하기 위해 OKLCH에서 수동으로 조정됩니다. 시맨틱 HTML 요소는 모달의 경우 기본 <dialog>, 아코디언의 경우 <details>, 필요한 경우 적절한 ARIA 속성 등 전체적으로 사용됩니다.
Frutjam 구성 요소는 DaisyUI와 어떻게 비교됩니까?
둘 다 CSS 전용 Tailwind CSS 구성 요소 라이브러리이지만 Frutjam은 Tailwind CSS v4용으로 특별히 제작되었으며 WCAG AA 대비 쌍이 보장된 OKLCH 색상 토큰을 사용하고 AI 편집기 통합을 위한 무료 MCP 서버(Cherry)를 제공합니다. DaisyUI에 해당하는 서버(Blueprint)는 유료입니다. Frutjam은 또한 런타임에 전경색을 계산하는 대신 명시적인 on-{color} 토큰 쌍을 제공합니다.
Tailwind CSS 외에 다른 것도 설치해야 하나요?
한 줄만 더 추가하세요. CSS 파일의 @import "tailwindcss"; 뒤에 @plugin "frutjam";을 추가하고 npm i -D frutjam을 통해 설치하세요. 그게 전부입니다. PostCSS 플러그인도 없고, JavaScript 구성도 없고, 가져올 별도의 스타일시트도 없습니다. 모든 구성요소는 즉시 사용할 수 있으며 Tailwind에 의해 자동으로 트리쉐이킹됩니다.
React 또는 Next.js와 함께 Frutjam 구성 요소를 사용할 수 있나요?
예. Frutjam은 CSS 전용이므로 모든 스택에서 동일한 방식으로 구성 요소를 사용합니다. 클래스 이름만 적용하면 됩니다. JavaScript 제어(모달 열기/닫기, 토스트, 캐러셀)의 이점을 얻는 몇 가지 구성 요소의 경우 Frutjam은 추가 종속성 없이 기본 DOM 호출을 래핑하는 선택적 React 후크(frutjam/react)를 제공합니다.