구성요소
WCAG AA/AAA 접근성이 내장된 무료 CSS 전용 Tailwind CSS 구성 요소입니다. JavaScript가 필요하지 않으며 프레임워크에 구애받지 않으며 Django, HTMX, Laravel, React, Vue 및 모든 스택과 호환됩니다. 바로 사용할 수 있고 쉽게 사용자 정의할 수 있습니다.
Frutjam ships 52+ CSS-only Tailwind CSS components — buttons, modals, forms, navigation, data display, and more — built for Tailwind CSS v4. Every component uses semantic class names (.btn, .card, .badge) that work alongside any Tailwind utility class. No JavaScript is bundled, no React context required, and no PostCSS plugins needed beyond Tailwind itself. Every component is WCAG AA accessible out of the box, with hand-tuned OKLCH color pairs that guarantee readable contrast on every surface. Because Frutjam is CSS-only and framework-agnostic, the same HTML markup works in Django templates, HTMX responses, Laravel Blade, Rails ERB, React JSX, or plain static HTML — without modification.
New to Frutjam?
Get started in seconds — two imports and you're ready to build.
아코디언
기본 <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 및 모든 스택에서 작동합니다.
팝오버
기본 팝오버 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, 별표 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 및 모든 스택에서 작동합니다.
Frequently asked questions
Are all Frutjam components CSS-only?
Yes — the vast majority of components are pure CSS with zero JavaScript. Buttons, badges, cards, forms, alerts, modals, drawers, tabs, and more all work with plain HTML and CSS. A small number of components that have no native HTML equivalent (toast positioning, combobox filtering, carousel controls) offer optional lightweight JS helpers, but the CSS layout and styling requires no JavaScript at all.
Do Frutjam components work with Django, HTMX, and Laravel?
Yes — Frutjam is framework-agnostic. Because every component is CSS-only, it works with any server-rendered stack. Django templates, HTMX, Laravel Blade, Rails ERB, plain HTML — if you can output HTML, Frutjam works. No React, no build pipeline, no JavaScript framework required.
Are the components WCAG accessible?
Yes — WCAG AA contrast is guaranteed on every component. Every color pair (--color-primary / --color-on-primary, etc.) is hand-tuned in OKLCH to meet WCAG AA contrast requirements. Semantic HTML elements are used throughout — native <dialog> for modals, <details> for accordions, and proper ARIA attributes where needed.
How do Frutjam components compare to DaisyUI?
Both are CSS-only Tailwind CSS component libraries, but Frutjam is built specifically for Tailwind CSS v4, uses OKLCH color tokens with guaranteed WCAG AA contrast pairs, and ships a free MCP server (Cherry) for AI editor integration — DaisyUI's equivalent (Blueprint) is paid. Frutjam also provides explicit on-{color} token pairs rather than computing foreground colors at runtime.
Do I need to install anything besides Tailwind CSS?
Just one extra line. Add @plugin "frutjam"; to your CSS file after @import "tailwindcss"; and install via npm i -D frutjam. That's it — no PostCSS plugins, no JavaScript config, no separate stylesheet to import. All components are available immediately and treeshaken automatically by Tailwind.
Can I use Frutjam components with React or Next.js?
Yes. Since Frutjam is CSS-only, you use components the same way in any stack — just apply the class names. For the few components that benefit from JavaScript control (modal open/close, toast, carousel), Frutjam ships optional React hooks (frutjam/react) that wrap native DOM calls with no extra dependencies.