UI 块和部分 - 构建速度更快
仅 CSS Tailwind CSS UI 块和部分。没有 JavaScript,可访问 WCAG AA,与框架无关。复制粘贴英雄、标题、定价部分和功能块。适用于 Django、HTMX、Laravel、React 和任何堆栈。
块是由 Frutjam 组件组装而成的可用于生产的页面部分。每个块都是独立的 HTML - 将其放入任何 Django 模板、Laravel Blade 文件、HTMX 页面或 React 组件中,它会立即运行。块会自动继承您的活动 Frutjam 主题,因此在浅色、深色或自定义主题之间切换不需要更改块 HTML。所有块均仅支持 CSS,可访问 WCAG AA,并为 Tailwind CSS v4 构建 - 没有 JavaScript,没有超出 Tailwind 本身的构建管道。
标头
仅 CSS Tailwind CSS 标题块,带有导航栏、品牌和移动抽屉。粘性、透明和响应式布局变体。 WCAG AA 可访问,可与 Django、HTMX、Laravel、React 和任何堆栈配合使用。
英雄
仅 CSS Tailwind CSS 英雄块 — 具有居中、分割和图像布局的现成着陆页部分。无需 JavaScript,可访问 WCAG AA。适用于 Django、HTMX、Laravel、React 和任何堆栈。
定价
仅 CSS Tailwind CSS 定价块使用卡片和按钮组件构建。复制粘贴带有等级、功能列表和 CTA 的定价表。 WCAG AA 可访问,可与 Django、HTMX、Laravel、React 和任何堆栈配合使用。
什么是块?
块是通过将 Frutjam 组件组合在一起构建的较大的现成页面部分。组件是单个 UI 元素(按钮、卡片、徽章),块是完整的布局部分(英雄、定价表、站点标题),可以复制并粘贴到您的项目中。
仅 CSS
每个块都是使用 Frutjam 组件和 Tailwind CSS 实用程序构建的 - 零 JavaScript,没有额外的依赖项。
复制粘贴准备就绪
每个块都是独立的 HTML。将其粘贴到任何 Django 模板、Laravel Blade、HTMX 页面或 React 组件中。
主题感知
块会自动继承您的活动 Frutjam 主题 - 切换主题并且所有块都会更新,无需进行任何更改。
块和组件有什么区别?
组件是单个可重用的 UI 元素——按钮、卡片、徽章。块是一个完整的页面部分,它将多个组件组合成一个布局 - 英雄部分、定价表、带有导航栏的网站标题和移动抽屉。使用组件构建自定义布局;使用块进行快速页面组装。
块可以与 Django、HTMX 和 Laravel 一起使用吗?
是的——块是使用 Frutjam 组件类的纯 HTML。它们适用于任何模板系统:Django、HTMX、Laravel Blade、Rails ERB、Jinja2 或静态 HTML。没有 JavaScript 框架,没有超出 Tailwind CSS 本身的构建步骤。
是否添加了更多块?
是的——定期添加新块。专业版和团队版计划包括访问高级版块,包括功能部分、推荐、CTA 和整页模板。