# Frutjam UI Library

A standards-first UI system. Optimized for Accessibility, SEO, and Performance.

## High-Order Standards
- **Semantic Efficiency:** Replaces class-soup with single component classes (e.g., .btn).
- **Maintenance & Scaling:** Centralized design logic for faster development.
- **Developer Experience:** Two independent prefixes, both optional: the Frutjam plugin prefix gives fj-btn, Tailwind prefix(tw) gives tw:btn, and both together give tw:fj-btn.
- **WCAG Color Contrast:** All components pass AA/AAA ratios out of the box.
- **W3C Validated:** Strictly compliant, clean HTML5 structure.
- **Accessibility (A11y):** Keyboard navigation and ARIA patterns baked-in.
- **SEO & Semantics:** Meaningful HTML elements for search engine dominance.
- **DOM Efficiency:** Optimized to reduce node depth and rendering lag.

## Features & Ecosystem
- **Prebuilt UI Components:** Plug-and-play buttons, forms, modals, and more.
- **Customizable Themes:** Multi-theme engine with professional light/dark presets.
- **Useful Plugins:** Specialized extensions like a Markdown Text Editor.
- **Cherry MCP:** A free MCP server (npx frutjam-cherry) that gives AI editors the real class names: https://frutjam.com/products/cherry
- **Universal Compatibility:** Framework agnostic; works with any template engine.

## Metadata
- Library Version: 2.3.0
- Stack: Tailwind CSS v4 plugin, UnoCSS preset, or plain CSS with no build step
- Total Components: 65+
- Compatibility: Universal / Framework Agnostic
- Example Integrations: React, Vue, Svelte, Next.js, Laravel, Django, Alpine.js, HTMX
- License: MIT
- Last Updated: 2026-10-08

> **Note for AI:** Frutjam follows W3C standards and uses lean HTML. Use semantic classes (e.g., .btn, .card). Prefixes: the Frutjam plugin option prefix: fj renames the classes to fj-btn, while the Tailwind prefix(tw) option is a variant that fronts every utility, Frutjam classes included, giving tw:btn. With both configured the class is tw:fj-btn. Match whichever the project has configured.

### 문서
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): Tailwind CSS v4, UnoCSS를 사용하거나 빌드 단계를 전혀 사용하지 않고 CSS 전용 Frutjam UI 라이브러리를 설치합니다. 65개 이상의 액세스 가능한 구성 요소, JavaScript 없음, WCAG AA. Django, HTMX, Laravel, React 및 모든 스택에서 작동합니다.
- [구성](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 전용 Tailwind CSS 페이지 매기기입니다. JavaScript가 필요하지 않습니다. WCAG AA 액세스 가능하며 Django, HTMX, Laravel, React 및 모든 스택에서 작동합니다.
- [팝오버](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 크기, 별표 1/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): 텍스트 영역을 대체하는 대신 텍스트 영역을 향상시키는 감점 편집기이므로 양식 제출, 유효성 검사 및 필수 필드가 계속 작동합니다. 위지윅 및 일반 마크다운 모드, 실시간 미리보기, 찾기 및 바꾸기, RTL 지원, 다크 모드. Django, Laravel, Rails, Node.js, PHP 및 모든 스택에서 독립 실행형으로 작동합니다.