오픈소스 · MIT 라이선스 · 영구 무료
빠른 개발를 위한 액세스 가능한 CSS 전용 Tailwind CSS 구성 요소 라이브러리
Frutjam은 접근성, 웹 표준, Tailwind CSS와의 원활한 통합을 중시하는 개발자를 위한 초고속 오픈소스 UI 라이브러리입니다.
W3C 준수, SEO 친화적, 사용하기 쉬움.
높은 커스터마이징 가능성
Tailwind CSS 유틸리티 클래스 기반
Frutjam은 바로 사용할 수 있는 깔끔한 컴포넌트 클래스를 제공하면서, 모든 Tailwind 유틸리티를 커스터마이징에 활용할 수 있게 합니다. Frutjam 컴포넌트 위에 유틸리티 클래스를 추가해 간격, 색상, 레이아웃, 인터랙션을 쉽게 변경하세요.
맞춤형 구성요소
각 Frutjam 구성 요소는 Tailwind 유틸리티를 허용하도록 설계되었으므로 맞춤 CSS를 작성하지 않고도 스타일을 조정할 수 있습니다.
유틸리티 우선 제어
text-lg, px-6 및 bg-base-200와 같은 Tailwind 클래스를 사용하여 구성요소를 몇 분 만에 맞춤화하세요.
지금 바로 시작하세요
두 줄 import로 바로 개발 시작. 빌드 도구, 설정, 런타임 모두 불필요.
1단계
npm을 통해 설치
단일 명령으로 프로젝트에 Frutjam을 추가하세요.
npm install frutjam |
2단계
CSS로 가져오기
Tailwind와 Frutjam을 모두 스타일시트에 추가하세요.
1 2 | @import "tailwindcss"; @import "frutjam"; |
3단계
깨끗한 부품을 사용하세요
긴 유틸리티 체인 대신 의미 체계 클래스를 작성하세요.
1 2 3 | <button class="btn btn-primary"> Get Started </button> |
실제로 확인해보기
실제 구성 요소, 실제 코드 — 복사 및 배송.
버튼
1 2 3 4 5 6 | <div class="flex flex-wrap gap-2"> <button type="button" class="btn btn-primary">Primary</button> <button type="button" class="btn btn-outline">Outline</button> <button type="button" class="btn btn-soft btn-success">Success</button> <button type="button" class="btn btn-soft btn-error">Danger</button> </div> |
배지 및 라벨
1 2 3 4 5 6 7 | <div class="flex flex-wrap gap-2"> <span class="badge badge-primary">Primary</span> <span class="badge badge-success">Active</span> <span class="badge badge-warning">Pending</span> <span class="badge badge-error">Error</span> <span class="badge">Default</span> </div> |
버튼 크기
1 2 3 4 5 6 | <div class="flex flex-wrap items-center gap-2"> <button type="button" class="btn btn-primary btn-xs">XSmall</button> <button type="button" class="btn btn-primary btn-sm">Small</button> <button type="button" class="btn btn-primary">Base</button> <button type="button" class="btn btn-primary btn-lg">Large</button> </div> |
카드
1 2 3 4 5 6 7 8 9 10 | <div class="card card-sm card-outline"> <div class="card-content"> <h4 class="card-title">Card Title</h4> <p>A clean, accessible card component ready to use in any project.</p> <div class="flex gap-2 mt-3"> <button type="button" class="btn btn-primary btn-sm">Action</button> <button type="button" class="btn btn-outline btn-sm">Cancel</button> </div> </div> </div> |
Frutjam UI 라이브러리를 사용하는 이유는 무엇입니까?
Frutjam은 접근성과 빠른 개발에 중점을 둔 Tailwind CSS v4로 구축된 무료 오픈 소스 CSS 전용 UI 라이브러리입니다. 복잡한 JavaScript 구성이나 대규모 JS 번들이 필요하지 않으므로 JavaScript 오버헤드가 없는 WCAG 호환 구성 요소가 필요한 팀을 위한 가벼운 DaisyUI 대안이 됩니다.
시작하려면 스타일시트에 @import "frutjam"을 추가하세요. Frutjam을 사용하면 HTML에 긴 Tailwind CSS 클래스 목록이 필요하지 않습니다. 깨끗하고 의미론적인 클래스를 사용하여 구성요소를 쉽게 구축하세요. 간단한 CSS 변수를 사용하여 테마를 쉽게 사용자 정의하면 모든 구성 요소가 즉시 업데이트됩니다.
W3C 표준
최신 웹 앱을 위한 깔끔하고 유효한 HTML입니다.
접근성 우선
모든 구성 요소는 a11y를 염두에 두고 제작되었습니다.
색상 대비
구성 요소는 기본적으로 WCAG AA/AAA 색상 대비 검사를 통과합니다.
SEO 친화적
더 나은 검색 엔진 가시성을 위한 의미 체계 마크업입니다.
개발자 친화적
간단하고 직관적인 API와 쉬운 통합.
CSS & HTML 우선
JavaScript 잠금이 없습니다. 스타일과 구조가 우선입니다.
Tailwind CSS 지원
기존 Tailwind 워크플로와 완벽하게 작동합니다.
RTL 지원
오른쪽에서 왼쪽으로 쓰는 언어와 완벽하게 호환됩니다.
반응형
모든 장치, 모든 화면 크기에서 멋지게 보입니다.
적극적으로 유지 관리
새로운 구성 요소, 업데이트 및 커뮤니티 지원.
전문적인 테마
밝은 모드와 어두운 모드 사이를 전환하거나 자신만의 모드를 만드세요.
사전 구축된 레이아웃 및 구성 요소
모든 프로젝트에 바로 사용할 수 있는 빌딩 블록입니다.
오픈 소스
MIT 라이선스를 취득하고 커뮤니티 중심으로 운영됩니다.
플러그인 지원
Markdown Text Editor와 같은 유용한 플러그인으로 Frutjam을 확장하세요.
DOM 크기 줄이기
중첩되거나 불필요한 요소가 많으면 렌더링 속도가 느려질 수 있습니다. 구성 요소 구조를 단순화하고 성능과 유지 관리성을 향상시킵니다.
Google PageSpeed Insights의 100/100
Frutjam UI 라이브러리를 사용하여 성능, 접근성, 모범 사례 및 SEO에서 완벽한 100을 달성하세요. 이 웹사이트는 전적으로 Frutjam UI로 구축되었으며 Google PageSpeed Insights에서 전체 점수 100/100을 획득했습니다.
웹사이트는 더 빠르게 실행되고, 더 나은 사용자 경험을 제공하며, 더 높은 검색 순위를 갖습니다. 오늘날의 AI 기반 웹에서는 더 빠른 사이트가 우선시됩니다. AI 도구는 실시간으로 웹 사이트를 자주 검색하며 컴퓨팅 리소스를 낭비하지 않는 빠르고 효율적인 페이지를 선호합니다. 미래 지향적인 UI 라이브러리로 더욱 스마트하게 구축하세요.
순수 CSS, JavaScript가 필요하지 않습니다. 프레임워크에 구애받지 않으며 어디에서나 완벽하게 호환됩니다.
Frutjam UI 라이브러리는 순수 CSS로 작성되었기 때문에 거대한 JavaScript 번들이 필요하지 않습니다. 이를 통해 프로젝트를 가벼워지고 더 빠른 로드 시간과 더 원활한 성능을 위해 최적화할 수 있습니다. React, Vue, Angular, Next.js, Django, HTMX, Laravel 또는 일반 HTML을 사용하든 관계없이 모든 웹 프레임워크 또는 백엔드와 완벽하게 작동합니다.
최신 프레임워크용
귀하의 프레임워크는 빠릅니다. 그렇게 유지하세요.
Next.js, Svelte 및 Vue는 탁월한 성능과 SEO(서버 렌더링, 최소 JS, 즉각적인 수분 공급)를 위해 설계되었습니다. 그러나 모달처럼 단순한 것을 위해 비대해진 JavaScript로 가득 찬 무거운 구성 요소 라이브러리를 추가하는 순간 해당 프레임워크가 약속하는 모든 것을 포기하게 됩니다.
Frutjam은 디자인상 CSS 우선, 네이티브 우선입니다. JavaScript 번들이 없습니다. 런타임 오버헤드가 없습니다. 레이아웃 변경이 없습니다. 프레임워크의 성능 상한선은 단지 이론적인 성능이 아닌 실제 성능이 됩니다.
제로 레이아웃 전환
순수 CSS 구성 요소는 페이지와 함께 즉시 렌더링됩니다. UI를 그리는 데 JavaScript가 필요하지 않습니다. CLS(누적 레이아웃 변경)는 0으로 유지되어 완벽한 PageSpeed 점수를 유지합니다.
JS 오버헤드 없음
프레임워크가 번들 분할을 통해 저장하는 JavaScript의 모든 KB는 Frutjam이 다시 추가하지 않습니다. 버튼, 카드, 모달, 배지 등이 모두 CSS에 있습니다. 귀하의 대화 시간이 빠르게 유지됩니다.
제공하는 SEO
시맨틱 HTML, W3C 유효한 마크업 및 WCAG 색상 대비가 기본적으로 제공됩니다. 검색 엔진은 깨끗한 구조를 읽습니다. 최신 프레임워크를 Frutjam과 결합하면 페이지 순위와 성능이 향상됩니다.
더 이상 보기 흉한 HTML이 없습니다, 클래스 이름이 더 적고, 유지 관리가 쉽고, 개발 속도가 더 빠릅니다.
더 이상 지저분한 수업은 없습니다: 하나의 수업이 모든 것을 해결합니다. 모든 요소, 모든 페이지 및 모든 프로젝트에 대해 매번 복잡한 클래스를 작성하는 대신, Frutjam 구성 요소 클래스 이름을 사용하면 복잡한 클래스로 인한 문제 없이 손쉬운 유지 관리 및 확장과 빠른 개발이 가능합니다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | // Styling a simple button in Tailwind css clutter of utility class <button class="bg-gray-100 text-gray-900 text-sm px-3.5 border font-semibold duration-200 py-2 transition-all hover:border-gray-300 hover:bg-gray-200 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-900 inline-flex gap-2 rounded-sm active:border-gray-300 active:bg-gray-200 active:shadow-none text-center align-middle cursor-pointer border-gray-200 dark:border-gray-700 dark:bg-neutral-700 dark:text-gray-300 dark:hover:border-gray-950 dark:hover:bg-gray-950 dark:focus-visible:outline-gray-200 dark:active:border-gray-950 dark:active:bg-gray-900"> Button </button> // Styling a simple button in frutjam component class <button class="btn"> Button </button> |
<button type="button" class="btn">Button</button> |
테마 및 사용자 정의
Frutjam은 테마 지정을 위해 간단한 CSS 변수를 사용합니다. 하나의 변수를 변경하면 모든 구성 요소가 즉시 업데이트됩니다. 다시 빌드하거나 클래스를 변경할 필요가 없습니다.
1 2 3 4 5 6 7 8 9 10 11 12 13 | /* Override the default theme in your CSS */ :root { --color-primary: oklch(55% 0.2 250); --color-primary-content: #fff; --radius-base: 0.5rem; --font-base: "Inter", sans-serif; } /* Dark mode overrides */ [data-theme="dark"] { --color-base-100: oklch(15% 0.01 250); --color-base-content: oklch(90% 0.01 250); } |
맞춤설정할 수 있는 항목
그림 물감
기본, 보조, 악센트, 오류, 성공, 경고 및 모든 기본 음영 - 모두 각각 단일 CSS 변수를 통해 이루어집니다.
테두리 반경
--radius-base는 모든 구성 요소를 한 번에 확장합니다. 하나의 변수를 변경하면 모든 요소가 업데이트됩니다.
타이포그래피
글꼴 모음, 크기 척도 및 줄 높이 — 유형 시스템을 한 번 설정하면 모든 구성 요소가 이를 상속합니다.
간격 및 크기
구성요소 패딩 및 크기 변형 - 내장된 크기 수정자를 사용하거나 간격 토큰을 전체적으로 재정의합니다.
부품 라이브러리
모든 사용 사례에 맞게 사전 구축되고 액세스 가능한 구성 요소 컬렉션이 점점 늘어나고 있습니다.
버튼 및 양식
버튼 변형, 입력, 체크박스, 선택 및 전체 양식 레이아웃.
모달 및 대화 상자
액세스 가능한 모달 대화 상자, 서랍 및 확인 프롬프트.
항해
Navbar, 사이드바, 탐색경로 및 탭 탐색.
카드 및 레이아웃
카드 변형, 그리드 시스템 및 페이지 레이아웃 뼈대.
알림 및 토스트
상태 경고, 알림 배너 및 인라인 피드백 메시지.
배지 및 태그
상태 배지, 카테고리 태그, 라벨 구성요소.
목록 및 테이블
데이터 테이블, 정렬된/비정렬 목록 및 정의 목록.
플러그인
마크다운 편집기, 구문 강조 표시 및 더 유용한 확장 기능.
커뮤니티 플러그인
백엔드 개발자들에게 사랑받고 있습니다. 네이티브 우선 마크다운 편집기.
대부분의 편집자는 표준 웹 작업흐름을 깨뜨립니다. MarkdownEditor는 이를 수용합니다. <textarea> 바로 위에 위치하므로 백엔드는 변경된 내용을 전혀 알 수 없습니다. form method="POST", 표준 DOM 액세스 및 모든 서버 프레임워크와 즉시 작동합니다.
일반 <textarea>를 JS 한 줄로 바꾸면 Django, Laravel 또는 PHP 컨트롤러가 그대로 유지되면서 사용자는 10배 더 나은 경험을 얻을 수 있습니다.
-
데이터 바인딩이 필요하지 않음 — 기본적으로
form method="POST"와 함께 작동 -
Standard access — 다른 입력과 마찬가지로
element.value를 사용하여 읽고 쓰기 - Backend agnostic — PHP, Django, Node.js, Laravel, Rails — 모두 일반 문자열을 읽습니다.
- ~116 KB — 하이브리드 WYSIWYG + 일반 모드, RTL, 이미지 업로드, 실시간 미리보기, CSS 충돌 없음
라이브 데모 — 사용해 보세요:
드롭인 대체 — 하나의 클래스, 한 줄의 JS. 백엔드는 변경되지 않았습니다.
기본 양식 통합
표준 <textarea>를 향상합니다. 일반 <form>을 사용하여 제출하고 request.POST['name']을 통해 콘텐츠에 액세스하세요. preventDefault()도 없고 FormData 구성도 없습니다.
고급 이미지 업로드
API를 통해 서버 업로드를 구성합니다. 이미지가 CDN으로 직접 이동합니다. 데이터베이스에 Base64 팽창이 없고 SEO 페널티가 없으며 메모리를 많이 사용하는 페이로드가 없습니다.
고성능
디바운스된 미리보기 업데이트, 캐시된 스타일 계산 및 충돌 없는 키보드 처리. 입력 지연 없이 수천 줄을 처리하며 모든 편집기 스타일은 전체 범위를 지정하므로 모든 CSS 프레임워크와 함께 안전하게 작동합니다.
Frutjam은 어떻게 비교됩니까?
Frutjam이 무료로 액세스 가능한 대안으로 일반 Tailwind CSS, Bootstrap 및 DaisyUI와 어떻게 비교되는지 확인하세요.
| 특징 | Frutjam | 데이지UI | 일반 순풍 | 부트스트랩 |
|---|---|---|---|---|
| CSS 전용(JavaScript 필요 없음) | ✓ | ✓ | ✓ | 부분 |
| 의미 구성 요소 클래스 | ✓ | ✓ | ✗ | ✓ |
| 모든 구성 요소에서 WCAG AA 대비 보장 | ✓ | 수동 | 수동 | 부분 |
| Tailwind 유틸리티와 함께 작동 | ✓ | ✓ | ✓ | ✗ |
| CSS 변수 테마 | ✓ | ✓ | ✓ | 제한된 |
| 100/100 PageSpeed 달성 가능 | ✓ | ✓ | 다양함 | 다양함 |
| RTL 지원 | ✓ | 부분 | 부분 | ✓ |
| 프레임워크에 구애받지 않음(Django, HTMX, Laravel) | ✓ | ✓ | ✓ | ✓ |
| 일반 CSS 변수를 통한 테마, 구성 파일 없음 | ✓ | 부분 | 수동 | ✗ |
| AI 에디터 통합(MCP/컨텍스트) | ✓ 무료 | 유급의 | ✗ | ✗ |
AI 편집기 통합
Claude Code, Cursor 또는 Copilot을 사용하시나요?
Cherry MCP는 Frutjam을 AI 편집기에 직접 연결합니다. 브라우저에서 복사하여 붙여넣을 필요 없이 정확한 구성요소 코드, 올바른 클래스 이름, 최신 문서를 얻으세요.
Cherry MCP를 사용해 보세요자주 묻는 질문
Frutjam에 대해 알아야 할 모든 것.
Frutja는 무료로 사용할 수 있나요?
예 — Frutjam은 MIT 라이선스를 받았으며 완전 무료입니다. 제한이나 저작자 표시가 필요하지 않은 개인 프로젝트, 고객 작업 및 상업용 제품에 사용하세요.
Frutjam은 상업 프로젝트에 적합합니까?
예. Frutjam은 MIT 라이선스에 따른 오픈 소스로 로열티나 제한 없이 개인 및 상업용 제품 모두에서 무료로 사용할 수 있습니다.
Frutjam이 Tailwind CSS를 대체하나요?
아니요 — Frutjam은 Tailwind를 기반으로 구축됩니다. 모든 Tailwind 유틸리티 클래스를 함께 사용할 수 있도록 유지하면서 의미 체계 구성 요소 클래스(.btn, .card, .badge)를 추가하는 레이어로 생각하세요.
Frutjam을 사용하려면 JavaScript가 필요합니까?
JavaScript가 필요하지 않습니다. Frutjam은 순수한 CSS입니다. 버튼, 카드, 배지, 양식과 같은 구성 요소는 JS 런타임 없이도 완전히 작동합니다. 모달이나 드롭다운과 같은 대화형 패턴의 경우 Alpine.js 또는 HTMX와 같은 경량 라이브러리와 잘 어울립니다.
Frutjam을 React, Vue 또는 Angular와 함께 사용할 수 있나요?
예 — Frutjam은 프레임워크에 구애받지 않습니다. React, Vue, Angular, Svelte, Next.js, Nuxt, Laravel, Django 및 일반 HTML을 포함한 모든 템플릿 시스템 또는 JS 프레임워크에서 작동합니다. CSS를 가져오고 클래스를 사용하면 됩니다.
Frutjam은 스크린 리더로 접근할 수 있나요?
예. Frutjam은 적절한 역할, 키보드 탐색 지원 및 WCAG AA/AAA 색상 대비를 통해 WAI-ARIA 지침을 따르므로 추가 구성 없이 모든 사용자가 액세스할 수 있습니다.
Frutjam을 사용하면 PageSpeed가 향상되나요?
예. Frutjam의 CSS 우선 접근 방식은 렌더링 차단 JavaScript를 완전히 방지합니다. W3C 유효한 마크업, 적절한 색상 대비 및 기본 HTML 의미 체계와 결합되어 더 나은 Core Web Vitals 및 100/100 PageSpeed 점수에 직접적으로 기여합니다.
색상, 글꼴, 반경을 어떻게 맞춤설정하나요?
스타일시트에서 CSS 변수를 재정의합니다. --color-primary, --font-base, --radius-base 등을 설정하세요. 모든 구성 요소는 다시 빌드하거나 HTML의 클래스를 변경하지 않고도 즉시 변경 사항을 선택합니다.
블로그에서
Frutjam 구축과 UI에 대한 CSS 우선 접근 방식에 대한 생각입니다.
The Best DaisyUI Alternative: CSS-Only Tailwind Components Without JavaScript
Why developers are switching from DaisyUI to Frutjam — a CSS-only Tailwind CSS component library that passes WCAG AA by default and requires zero JavaScript.
Why I Stopped Using JavaScript-Heavy UI Libraries (And Built a CSS-First Tailwind Component Library)
Achieve 100% PageSpeed scores by default. A guide to building high-performance, RTL-ready platforms using native HTML5 and CSS-first components.
오픈 소스 및 영원히 무료
커뮤니티에 가입하세요
Frutjam은 오픈 소스이며 커뮤니티 중심입니다. 커뮤니티의 모든 구성 요소, 수정 사항 및 아이디어는 모든 사람에게 더 나은 결과를 제공합니다.
버그를 발견하셨나요? 기능 요청이 있으신가요? 구성요소를 제공하거나 문서를 개선하고 싶으십니까? 우리는 당신을 원합니다.