# Frutjam UI 라이브러리

표준 중심 UI 시스템. 접근성, SEO, 성능에 최적화.

## 고수준 표준
- **시맨틱 효율성:** 클래스 중첩을 단일 컴포넌트 클래스로 대체합니다(예: .btn).
- **유지보수 및 확장:** 집중화된 디자인 로직으로 개발 속도를 높입니다.
- **개발자 경험:** Tailwind 스타일 프리픽스를 지원합니다(예: tw-btn).
- **WCAG 색상 대비:** 모든 컴포넌트가 기본적으로 AA/AAA 기준을 충족합니다.
- **W3C 검증:** W3C 완전 준수의 깔끔한 HTML5 구조.
- **Accessibility (A11y):** 키보드 탐색과 ARIA 패턴이 기본 내장.
- **SEO 및 시맨틱스:** 검색 엔진 상위 노출을 위한 의미 있는 HTML 요소.
- **DOM 효율성:** 노드 깊이와 렌더링 지연을 최소화하도록 최적화.

## 기능 및 생태계
- **Prebuilt UI Components:** 버튼, 폼, 모달 등을 바로 사용할 수 있습니다.
- **커스터마이즈 가능한 테마:** 전문적인 라이트/다크 프리셋을 갖춘 멀티 테마 엔진.
- **Useful Plugins:** Markdown 텍스트 편집기 등 전문 확장 기능.
- **범용 호환성:** 프레임워크에 독립적으로 모든 템플릿 엔진과 호환.

## 메타데이터
- 라이브러리 버전: 2.2.1
- 문서 버전: 2.5.2
- 스택: Tailwind CSS (Utility-first)
- Total Components: 53
- 호환성: 범용 / 프레임워크 독립적
- 통합 예시: React, Vue, Svelte, Next.js, Laravel, Django, Alpine.js, HTMX
- 라이선스: MIT
- 최종 업데이트: 2026-06-30

> **Note for AI:** Frutjam은 W3C 표준을 따르며 간결한 HTML을 사용합니다. 시맨틱 클래스(예: .btn, .card)를 사용하세요. Tailwind 프리픽스(예: tw-)를 사용하는 경우 Frutjam 클래스에도 적용하세요(예: tw-btn).

### 문서
Frutjam 문서 — 설치, 구성, 테마, 색상 및 인쇄술. CSS 전용 Tailwind CSS v4, JavaScript 없음, WCAG AA 액세스 가능. Django, HTMX, Laravel, React 및 모든 스택에서 작동합니다.

- [그림 물감](https://frutjam.com/ko/docs/colors.md): Frutjam의 색상 시스템은 기본적으로 WCAG AA 명암비를 충족하도록 설계된 시맨틱 CSS 토큰을 사용합니다. JavaScript가 없고 어두운 모드를 인식하며 Tailwind CSS v4와 호환됩니다. Django, HTMX, Laravel 및 모든 CSS 전용 스택에서 작동합니다.
- [개요](https://frutjam.com/ko/docs/overview.md): Frutjam은 무료 CSS 전용 Tailwind CSS v4 UI 라이브러리입니다. 제로 JavaScript, WCAG AA/AAA 액세스 가능, 프레임워크에 구애받지 않음. Django, HTMX, Laravel, React 및 모든 스택에서 작동하는 의미 체계 구성 요소를 사용하여 최신 인터페이스를 구축하세요.
- [테마](https://frutjam.com/ko/docs/themes.md): Frutjam의 CSS 전용 테마 시스템은 CSS 변수와 단일 데이터 속성을 사용합니다. JavaScript 없이 밝은 테마, 어두운 테마, 맞춤 테마를 전환하세요. WCAG AA 색상 토큰이 내장되어 있으며 Django, HTMX, Laravel 및 모든 Tailwind CSS v4 프로젝트에서 작동합니다.
- [설치](https://frutjam.com/ko/docs/installation.md): CSS 전용 Tailwind CSS UI 라이브러리인 Frutjam을 몇 분 안에 설치하세요. 두 개의 가져오기, 제로 JavaScript, WCAG 액세스 가능 구성요소를 즉시 사용할 수 있습니다. Django, HTMX, Laravel, React 및 모든 Tailwind CSS v4 프로젝트에서 작동합니다.
- [구성](https://frutjam.com/ko/docs/configuration.md): Frutjam CSS 전용 Tailwind CSS 플러그인을 구성합니다. 기본 테마 설정, 사용자 정의 색상 토큰 정의, 접두사 시스템 전환 - JavaScript가 필요하지 않습니다. WCAG 액세스 가능 기본값은 Django, HTMX, Laravel 및 모든 프레임워크에서 작동합니다.
- [타이포그래피](https://frutjam.com/ko/docs/typography.md): Frutjam의 CSS 전용 타이포그래피 시스템. Tailwind CSS v4, WCAG 액세스 가능, JavaScript가 필요하지 않은 의미론적 HTML 텍스트 크기 조정. Django, HTMX, Laravel, React 및 모든 프레임워크에서 작동합니다.


### 구성요소
WCAG AA/AAA 접근성이 내장된 무료 CSS 전용 Tailwind CSS 구성 요소입니다. JavaScript가 필요하지 않으며 프레임워크에 구애받지 않으며 Django, HTMX, Laravel, React, Vue 및 모든 스택과 호환됩니다. 바로 사용할 수 있고 쉽게 사용자 정의할 수 있습니다.

- [아코디언](https://frutjam.com/ko/components/accordion.md): 기본 <details>/<summary>를 사용하는 CSS 전용 Tailwind CSS 아코디언. JavaScript가 전혀 없는 콘텐츠 섹션을 확장하고 축소합니다. WCAG AA 액세스 가능하며 Django, HTMX, Laravel, React 및 모든 스택에서 작동합니다.
- [알리다](https://frutjam.com/ko/components/alert.md): 정보, 성공, 경고 및 오류 변형이 포함된 CSS 전용 Tailwind CSS 경고입니다. 부드러운 스타일, 아이콘 슬롯 및 무시할 수 있는 패턴입니다. WCAG AA 액세스 가능하며 Django, HTMX, Laravel, React 및 모든 스택에서 작동합니다.
- [화신](https://frutjam.com/ko/components/avatar.md): 프로필 이미지용 CSS 전용 Tailwind CSS 아바타입니다. xs–xl 크기, 그룹 스태킹 및 온라인/오프라인 상태 표시기. WCAG AA 액세스 가능하며 Django, HTMX, Laravel, React 및 모든 스택에서 작동합니다.
- [배지](https://frutjam.com/ko/components/badge.md): 기본, 보조, 악센트, 정보, 성공, 경고 및 오류 변형이 포함된 CSS 전용 Tailwind CSS 배지입니다. 소프트, 아웃라인 및 고스트 스타일, 크기 xs–lg. WCAG AA 액세스 가능하며 Django, HTMX, Laravel, React 및 모든 스택에서 작동합니다.
- [탐색경로](https://frutjam.com/ko/components/breadcrumb.md): 사용자 정의 구분 기호 및 접근 가능한 랜드마크 마크업이 포함된 CSS 전용 Tailwind CSS 탐색경로 탐색입니다. WCAG AA는 Django, HTMX, Laravel, React 및 모든 Tailwind CSS v4 프로젝트에서 작동합니다.
- [단추](https://frutjam.com/ko/components/button.md): 기본, 보조, 악센트, 고스트, 윤곽선 및 소프트 변형이 포함된 CSS 전용 Tailwind CSS 버튼입니다. 크기는 xs~xl, 로드 상태, 비활성화 및 아이콘 버튼입니다. CSS 전용 WCAG AA는 Django, HTMX, Laravel, React에서 작동합니다.
- [카드](https://frutjam.com/ko/components/card.md): 윤곽선, 그림자 및 평면 스타일이 포함된 CSS 전용 Tailwind CSS 카드입니다. 소형, 기본 및 대형 크기입니다. 카드 내용, 카드 제목, 카드 바닥글 슬롯. WCAG AA는 Django, HTMX, Laravel, React 및 모든 스택에서 작동합니다.
- [회전목마](https://frutjam.com/ko/components/carousel.md): 스크롤-스냅을 사용하는 CSS 전용 Tailwind CSS 캐러셀. 탐색 컨트롤이 있고 JavaScript가 필요하지 않은 가로 슬라이드 레이아웃입니다. WCAG AA 액세스 가능하며 Django, HTMX, Laravel, React 및 모든 스택에서 작동합니다.
- [채팅](https://frutjam.com/ko/components/chat.md): CSS 전용 Tailwind CSS 채팅 풍선 구성요소입니다. 아바타 및 타임스탬프 슬롯이 포함된 전송 및 수신 메시지의 시작 및 종료 위치입니다. WCAG AA는 Django, HTMX, Laravel, React 및 모든 스택에서 작동합니다.
- [체크박스](https://frutjam.com/ko/components/checkbox.md): 기본, 보조, 악센트 및 의미 색상 변형이 포함된 CSS 전용 Tailwind CSS 확인란입니다. 크기 xs~xl, 불확실한 상태. WCAG AA 액세스 가능하며 Django, HTMX, Laravel, React 및 모든 스택에서 작동합니다.
- [접을 수 있는](https://frutjam.com/ko/components/collapsible.md): 기본 <details>를 사용하는 CSS 전용 Tailwind CSS 축소 가능 패널. JavaScript 없이 콘텐츠 섹션을 표시하고 숨깁니다. WCAG AA 액세스 가능하며 Django, HTMX, Laravel, React 및 모든 스택에서 작동합니다.
- [콤보박스](https://frutjam.com/ko/components/combobox.md): 실시간 검색 필터링 및 액세스 가능한 드롭다운 목록이 포함된 CSS 전용 Tailwind CSS 콤보박스입니다. 키보드 탐색, 색상 변형. WCAG AA 액세스 가능하며 Django, HTMX, Laravel, React 및 모든 스택에서 작동합니다.
- [카운트다운](https://frutjam.com/ko/components/countdown.md): CSS 전용 Tailwind CSS 카운트다운 타이머. 일, 시간, 분, 초에 대한 애니메이션 숫자 표시. WCAG AA 액세스 가능하며 Django, HTMX, Laravel, React 및 모든 스택에서 작동합니다.
- [차이점](https://frutjam.com/ko/components/diff.md): 드래그 가능한 구분선을 사용하여 콘텐츠를 나란히 비교할 수 있는 CSS 전용 Tailwind CSS diff 뷰어입니다. JavaScript가 필요하지 않습니다. WCAG AA 액세스 가능하며 Django, HTMX, Laravel, React 및 모든 스택에서 작동합니다.
- [분할기](https://frutjam.com/ko/components/divider.md): CSS 전용 Tailwind CSS 구분선 — 선택 사항인 중앙 라벨이 있는 가로 및 세로입니다. 색상 및 크기 변형. WCAG AA 액세스 가능하며 Django, HTMX, Laravel, React 및 모든 스택에서 작동합니다.
- [서랍](https://frutjam.com/ko/components/drawer.md): 기본 체크박스 토글을 사용하는 CSS 전용 Tailwind CSS 서랍입니다. JavaScript 없이 탐색 또는 필터를 위한 슬라이드인 측면 패널입니다. WCAG AA 액세스 가능하며 Django, HTMX, Laravel, React 및 모든 스택에서 작동합니다.
- [보행인](https://frutjam.com/ko/components/footer.md): 다중 열 레이아웃, 로고, 링크 및 저작권 슬롯이 포함된 CSS 전용 Tailwind CSS 바닥글입니다. WCAG AA에 액세스할 수 있으며 Django, HTMX, Laravel, React 및 모든 Tailwind CSS v4 프로젝트에서 작동합니다.
- [헤더](https://frutjam.com/ko/components/header.md): CSS 전용 Tailwind CSS 페이지 헤더 — 브랜드, 탐색 및 작업 슬롯이 있는 상단 표시줄 레이아웃입니다. WCAG AA 액세스 가능하며 Django, HTMX, Laravel, React 및 모든 스택에서 작동합니다.
- [영웅](https://frutjam.com/ko/components/hero.md): 랜딩 페이지용 CSS 전용 Tailwind CSS 히어로 섹션입니다. 제목, 설명, CTA가 중앙에 배치된 전체 너비 레이아웃입니다. WCAG AA 액세스 가능하며 Django, HTMX, Laravel, React 및 모든 스택에서 작동합니다.
- [지시자](https://frutjam.com/ko/components/indicator.md): 모든 요소 모서리에 배지나 점을 오버레이하기 위한 CSS 전용 Tailwind CSS 표시기입니다. 색상 변형 및 위치 지정. WCAG AA 액세스 가능하며 Django, HTMX, Laravel, React 및 모든 스택에서 작동합니다.
- [입력](https://frutjam.com/ko/components/input.md): 기본, 보조, 악센트 및 의미 색상 변형이 포함된 CSS 전용 Tailwind CSS 입력입니다. 크기 xs–xl, 접두사 및 접미사 애드온 슬롯, 고스트 스타일. WCAG AA 액세스 가능하며 Django, HTMX, Laravel, React 및 모든 스택에서 작동합니다.
- [가입하다](https://frutjam.com/ko/components/join.md): 버튼, 입력 또는 선택 항목을 연결된 단위로 그룹화하기 위한 CSS 전용 Tailwind CSS 조인입니다. 수평 및 수직. WCAG AA 액세스 가능하며 Django, HTMX, Laravel, React 및 모든 스택에서 작동합니다.
- [KBD](https://frutjam.com/ko/components/kbd.md): 키보드 단축키 및 키 조합을 표시하기 위한 CSS 전용 Tailwind CSS kbd 구성 요소입니다. 크기 변형. WCAG AA 액세스 가능하며 Django, HTMX, Laravel, React 및 모든 스택에서 작동합니다.
- [링크](https://frutjam.com/ko/components/link.md): 기본, 보조, 강조 및 중립 색상 변형이 포함된 CSS 전용 Tailwind CSS 링크입니다. 밑줄과 일반 스타일을 가리킵니다. WCAG AA 액세스 가능하며 Django, HTMX, Laravel, React 및 모든 스택에서 작동합니다.
- [로드 중](https://frutjam.com/ko/components/loading.md): 스피너, 점, 링 및 막대 애니메이션이 포함된 CSS 전용 Tailwind CSS 로딩 표시기입니다. 색상 및 크기 변형이 가능하며 JavaScript가 필요하지 않습니다. WCAG AA 액세스 가능하며 Django, HTMX, Laravel, React 및 모든 스택에서 작동합니다.
- [큰 천막](https://frutjam.com/ko/components/marquee.md): 콘텐츠와 로고를 가로로 스크롤하기 위한 CSS 전용 Tailwind CSS 선택 윤곽입니다. CSS를 통한 속도 및 방향 제어, JavaScript 없음. WCAG AA 액세스 가능하며 Django, HTMX, Laravel, React 및 모든 스택에서 작동합니다.
- [마스크](https://frutjam.com/ko/components/mask.md): 이미지를 원, 물결 모양, 하트, 육각형 등의 모양으로 자르기 위한 CSS 전용 Tailwind CSS 마스크입니다. WCAG AA 액세스 가능하며 Django, HTMX, Laravel, React 및 모든 스택에서 작동합니다.
- [메뉴](https://frutjam.com/ko/components/menu.md): 탐색 목록을 위한 CSS 전용 Tailwind CSS 수직 메뉴입니다. 활성, 비활성화 및 아이콘 항목 상태입니다. 크기 변형. WCAG AA 액세스 가능하며 Django, HTMX, Laravel, React 및 모든 스택에서 작동합니다.
- [모달](https://frutjam.com/ko/components/modal.md): 기본 <dialog>를 사용하는 CSS 전용 Tailwind CSS 모달입니다. 반응형 크기 조정, 배경 및 초점 트랩. 기본 사용법에는 JavaScript가 없습니다. WCAG AA 액세스 가능하며 Django, HTMX, Laravel, React 및 모든 스택에서 작동합니다.
- [Navbar](https://frutjam.com/ko/components/navbar.md): 브랜드, 탐색 링크 및 작업 슬롯이 포함된 CSS 전용 Tailwind CSS 탐색 모음입니다. 끈적하고 투명한 변형. WCAG AA 액세스 가능하며 Django, HTMX, Laravel, React 및 모든 스택에서 작동합니다.
- [쪽수 매기기](https://frutjam.com/ko/components/pagination.md): CSS 전용 조인 및 버튼 구성으로 페이지가 매겨진 콘텐츠를 탐색하세요. JavaScript가 필요하지 않습니다.
- [팝오버](https://frutjam.com/ko/components/popover.md): 기본 팝오버 API를 사용하는 CSS 전용 Tailwind CSS 팝오버입니다. 도구 설명 및 드롭다운을 위한 부동 콘텐츠 패널입니다. WCAG AA 액세스 가능하며 Django, HTMX, Laravel, React 및 모든 스택에서 작동합니다.
- [진전](https://frutjam.com/ko/components/progress.md): 기본, 보조, 악센트 및 의미 색상 변형이 포함된 CSS 전용 Tailwind CSS 진행 표시줄입니다. 크기 xs~xl. WCAG AA 액세스 가능하며 Django, HTMX, Laravel, React 및 모든 스택에서 작동합니다.
- [방사형 진행](https://frutjam.com/ko/components/radial-progress.md): CSS 전용 Tailwind CSS 방사형 진행 — 백분율 표시가 있는 원형 진행 링입니다. 색상 및 크기 변형, JavaScript 없음. WCAG AA 액세스 가능하며 Django, HTMX, Laravel, React 및 모든 스택에서 작동합니다.
- [라디오](https://frutjam.com/ko/components/radio.md): 기본, 보조, 악센트 및 의미 색상 변형이 포함된 CSS 전용 Tailwind CSS 라디오 버튼입니다. 크기 xs~xl. WCAG AA 액세스 가능하며 Django, HTMX, Laravel, React 및 모든 스택에서 작동합니다.
- [범위](https://frutjam.com/ko/components/range.md): 기본, 보조, 악센트 및 의미 색상 변형이 포함된 CSS 전용 Tailwind CSS 범위 슬라이더입니다. 크기 xs~xl. WCAG AA 액세스 가능하며 Django, HTMX, Laravel, React 및 모든 스택에서 작동합니다.
- [평가](https://frutjam.com/ko/components/rating.md): CSS 전용 Tailwind CSS 별표 및 심박수 구성 요소입니다. 크기 xs–xl, 별표 2개 지원, JavaScript가 필요하지 않습니다. WCAG AA 액세스 가능하며 Django, HTMX, Laravel, React 및 모든 스택에서 작동합니다.
- [선택하다](https://frutjam.com/ko/components/select.md): 기본, 보조, 악센트 및 의미 색상 변형이 포함된 CSS 전용 Tailwind CSS 선택 드롭다운입니다. 크기 xs–xl, 고스트 스타일. WCAG AA 액세스 가능하며 Django, HTMX, Laravel, React 및 모든 스택에서 작동합니다.
- [사이드바](https://frutjam.com/ko/components/sidebar.md): 측면 탐색 패널을 위한 CSS 전용 Tailwind CSS 사이드바입니다. 탐색 항목 상태 및 섹션 제목이 포함된 접을 수 있습니다. WCAG AA 액세스 가능하며 Django, HTMX, Laravel, React 및 모든 스택에서 작동합니다.
- [해골](https://frutjam.com/ko/components/skeleton.md): 자리 표시자 UI를 위한 CSS 전용 Tailwind CSS 스켈레톤 로더입니다. 펄스 애니메이션이 포함된 원, 직사각형 및 텍스트 선 모양. WCAG AA 액세스 가능하며 Django, HTMX, Laravel, React 및 모든 스택에서 작동합니다.
- [통계](https://frutjam.com/ko/components/stat.md): 측정항목 표시를 위한 CSS 전용 Tailwind CSS 통계입니다. 값, 레이블, 설명 및 아이콘 슬롯입니다. 반응형 그리드 레이아웃. WCAG AA 액세스 가능하며 Django, HTMX, Laravel, React 및 모든 스택에서 작동합니다.
- [상태](https://frutjam.com/ko/components/status.md): 기본, 성공, 경고 및 오류 색상 변형이 포함된 CSS 전용 Tailwind CSS 상태 점 표시기입니다. 크기 xs~xl. WCAG AA 액세스 가능하며 Django, HTMX, Laravel, React 및 모든 스택에서 작동합니다.
- [단계](https://frutjam.com/ko/components/steps.md): 다단계 마법사 및 진행률 표시기를 위한 CSS 전용 Tailwind CSS 단계입니다. 수평 및 수직 레이아웃, 단계당 색상 변형. WCAG AA 액세스 가능하며 Django, HTMX, Laravel, React 및 모든 스택에서 작동합니다.
- [표면](https://frutjam.com/ko/components/surface.md): 테마가 있는 배경 및 텍스트 색상을 컨테이너에 적용하기 위한 CSS 전용 Tailwind CSS 표면입니다. 모든 색상 변형. WCAG AA 액세스 가능하며 Django, HTMX, Laravel, React 및 모든 스택에서 작동합니다.
- [교환](https://frutjam.com/ko/components/swap.md): 두 요소 간 전환을 위한 CSS 전용 Tailwind CSS 스왑입니다. 뒤집기, 회전 및 페이드 애니메이션, JavaScript 없음. WCAG AA 액세스 가능하며 Django, HTMX, Laravel, React 및 모든 스택에서 작동합니다.
- [테이블](https://frutjam.com/ko/components/table.md): 얼룩말 줄무늬, 컴팩트 및 기본 크기, 고정된 열 및 행 가리키기 상태가 포함된 CSS 전용 Tailwind CSS 테이블입니다. WCAG AA 액세스 가능하며 Django, HTMX, Laravel, React 및 모든 스택에서 작동합니다.
- [탭](https://frutjam.com/ko/components/tabs.md): 테두리, 리프트, 박스형 및 알약 스타일 변형이 포함된 CSS 전용 Tailwind CSS 탭입니다. 활성 상태 및 크기, JavaScript가 필요하지 않습니다. WCAG AA 액세스 가능하며 Django, HTMX, Laravel, React 및 모든 스택에서 작동합니다.
- [꼬리표](https://frutjam.com/ko/components/tag.md): 색상 변형, 부드러운 스타일 및 제거 가능한 버튼이 포함된 CSS 전용 Tailwind CSS 태그(칩)입니다. 크기는 xs~lg입니다. WCAG AA 액세스 가능하며 Django, HTMX, Laravel, React 및 모든 스택에서 작동합니다.
- [텍스트 영역](https://frutjam.com/ko/components/textarea.md): 기본, 보조, 악센트 및 의미 색상 변형이 포함된 CSS 전용 Tailwind CSS 텍스트 영역입니다. 크기 xs–xl, 고스트 스타일. WCAG AA 액세스 가능하며 Django, HTMX, Laravel, React 및 모든 스택에서 작동합니다.
- [타임라인](https://frutjam.com/ko/components/timeline.md): 시간순 이벤트 목록을 위한 CSS 전용 Tailwind CSS 타임라인입니다. 아이콘, 콘텐츠, 연결선 슬롯이 있는 세로 레이아웃입니다. WCAG AA 액세스 가능하며 Django, HTMX, Laravel, React 및 모든 스택에서 작동합니다.
- [토스트](https://frutjam.com/ko/components/toast.md): 알림 위치 지정(상단, 하단, 시작, 끝 및 중앙 배치)을 위한 CSS 전용 Tailwind CSS 토스트입니다. 레이아웃에 JavaScript가 없습니다. WCAG AA 액세스 가능하며 Django, HTMX, Laravel, React 및 모든 스택에서 작동합니다.
- [비녀장](https://frutjam.com/ko/components/toggle.md): 기본, 보조, 악센트 및 의미 색상 변형이 포함된 CSS 전용 Tailwind CSS 토글 스위치입니다. 크기 xs~xl. WCAG AA 액세스 가능하며 Django, HTMX, Laravel, React 및 모든 스택에서 작동합니다.
- [툴팁](https://frutjam.com/ko/components/tooltip.md): 상단, 하단, 왼쪽 및 오른쪽 배치가 포함된 CSS 전용 Tailwind CSS 도구 설명입니다. 색상 변형, JavaScript가 필요하지 않습니다. WCAG AA 액세스 가능하며 Django, HTMX, Laravel, React 및 모든 스택에서 작동합니다.


### 블록
CSS 전용 Tailwind CSS UI 블록 및 섹션. JavaScript 없음, WCAG AA 액세스 가능, 프레임워크에 구애받지 않음. 영웅, 헤더, 가격 섹션 및 기능 블록을 복사하여 붙여넣습니다. Django, HTMX, Laravel, React 및 모든 스택에서 작동합니다.

- [헤더](https://frutjam.com/ko/blocks/header.md): 탐색 모음, 브랜딩 및 모바일 서랍이 포함된 CSS 전용 Tailwind CSS 헤더 블록입니다. 고정적이고 투명하며 반응성이 뛰어난 레이아웃 변형입니다. WCAG AA 액세스 가능하며 Django, HTMX, Laravel, React 및 모든 스택에서 작동합니다.
- [영웅](https://frutjam.com/ko/blocks/hero.md): CSS 전용 Tailwind CSS 히어로 블록 — 중앙 정렬, 분할 및 이미지 레이아웃이 포함된 기성 랜딩 페이지 섹션입니다. JavaScript가 필요하지 않으며 WCAG AA에 액세스할 수 있습니다. Django, HTMX, Laravel, React 및 모든 스택에서 작동합니다.
- [가격](https://frutjam.com/ko/blocks/pricing.md): 카드 및 버튼 구성요소로 구축된 CSS 전용 Tailwind CSS 가격 블록입니다. 계층, 기능 목록, CTA가 포함된 가격표를 복사하여 붙여넣으세요. WCAG AA 액세스 가능하며 Django, HTMX, Laravel, React 및 모든 스택에서 작동합니다.


### 플러그인
CSS 전용 Tailwind CSS 플러그인으로 Frutjam을 확장하세요. 제로 JavaScript, WCAG 액세스 가능, 프레임워크에 구애받지 않습니다. Django, HTMX, Laravel 및 모든 프레임워크에서 작동합니다.

- [마크다운 편집기](https://frutjam.com/ko/plugins/markdown-editor.md): 기본 텍스트 영역을 전체 편집 제품군으로 변환하는 마크다운 텍스트 편집기 플러그인입니다. WYSIWYG 및 일반 마크다운 모드, 실시간 미리보기, RTL 지원, 다크 모드. Django, HTMX, Laravel, React 및 모든 스택에서 작동합니다.