Frutjam은 무료 CSS 전용 Tailwind CSS v4 UI 라이브러리입니다. 제로 JavaScript, WCAG AA/AAA 액세스 가능, 프레임워크에 구애받지 않음. Django, HTMX, Laravel, React 및 모든 스택에서 작동하는 의미 체계 구성 요소를 사용하여 최신 인터페이스를 구축하세요.
복잡한 설정이 없습니다. Tailwind CSS와 동일한 구성을 사용하므로 이미 알고 있는 내용을 계속 사용할 수 있습니다. Bootstrap에 익숙하다면 구성 요소 이름이 직관적이고 기억하기 쉬울 것입니다.
dark:, sm:, lg:, xl:, rtl: 및 ltr:와 같은 Tailwind CSS 변형 접두사를 모든 유틸리티 클래스에 사용할 수 있습니다.
속도 우선 프레임워크를 갖춘 최신 UI 엔지니어링
Frutjam은 오픈 소스 Tailwind CSS v4 UI 라이브러리로, 신속한 웹 개발을 촉진하도록 설계된 높은 수준의 추상화입니다. 원시 유틸리티 클래스를 의미 있고 생산 가능한 구성 요소로 변환하는 툴킷으로 생각하면 훨씬 적은 코드로 최신 인터페이스를 구축할 수 있습니다.
어떤 문제를 해결합니까?
대부분의 개발자는 버튼 및 입력과 같은 기본 요소에 대한 긴 클래스 체인을 작성하는 데 몇 시간을 소비하는 유틸리티 피로
에 직면합니다. Frutjam은 플러그 앤 플레이
생태계를 제공하여 이러한 마찰을 제거합니다.
- 중복 상용구: 모든 프로젝트에 대해 바퀴를 다시 만드는 대신 초점 상태, 마우스 오버 전환 및 반응형 동작을 즉시 처리하는 사전 구축된 구성요소를 얻을 수 있습니다.
- 성능 부풀림: 무거운 JavaScript 프레임워크와 달리 Frutjam은 "순수한 CSS" 접근 방식을 우선시하여 애플리케이션이 가볍고 빠르게 유지되도록 합니다.
- 규정 준수 장애물: 접근성이 뛰어나고 SEO 친화적인 인터페이스를 구축하는 것은 복잡합니다. 라이브러리는 의미 체계 마크업과 깔끔한 HTML을 사용하여 사이트가 본질적으로 W3C를 준수하는지 확인합니다.
Frutjam은 다음과 같은 경우에 적합합니다.
- 수천 개의 유틸리티 클래스 이름을 반복적으로 작성하는 데 지쳤습니다.
- 접근 가능하고 SEO 친화적인 랜딩 페이지와 SaaS 앱을 기록적인 시간 내에 출시해야 합니다.
- 모든 환경에서 완벽하게 호환되는 일관된 디자인 시스템을 원하십니까?
- 필수 JavaScript 종속성이 없는 경량의 프레임워크 독립적 솔루션을 선호합니다.
신속한 개발을 위한 핵심 기능
이 툴킷은 복사, 붙여넣기 및 빌드
철학을 따르며 전문가 수준의 프런트엔드 엔지니어링에 필요한 모든 것을 제공합니다.
- 광범위한 구성 요소 라이브러리: Navbar, 모달, 아코디언 및 세련된 데이터 테이블과 같은 필수 요소가 포함되어 있습니다.
- 사전 조립된 블록: 가격 섹션, 헤더 및 히어로 영역의 레이아웃 블록을 사용하여 시간을 절약하세요.
Berry
테마 시스템: Snowberry(밝음) 및 Darkberry(어두움)와 같은 내장 테마 간에 전환하거나 OKLCH CSS 변수를 사용하여 나만의 테마를 만듭니다.- 접근성 우선 디자인: 모든 구성 요소는 ARIA 역할 및 키보드 탐색에 대한 모범 사례를 따릅니다. 모든 색상 쌍은 자동 계산된 추측이 아닌 WCAG AA 대비를 통과한 것으로 확인된 수동으로 조정된 OKLCH 값입니다.
- 프레임워크 불가지론: React, Next.js, Vue, Django, HTMX, Laravel 또는 간단한 정적 HTML을 사용하든 원활하게 작동합니다.
기술적 효율성
의미 체계 클래스 이름을 사용하면 표준 유틸리티 우선 작업 흐름에 비해 HTML 크기를 크게 줄일 수 있습니다. 그 결과 팀이 장기적으로 더 쉽게 관리할 수 있는 더 깨끗하고 유지 관리하기 쉬운 코드베이스가 생성됩니다. 라이브러리는 Tailwind CSS 위에 엄격하게 구축되어 구성 요소 기반 시스템의 속도를 높이면서 유틸리티 엔진의 모든 사용자 정의 기능을 유지하도록 보장합니다.
시작할 준비가 되셨나요? 설치 시작하기 →