frutjam 2.3.0-beta.1 โ 2.3.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +1 -1
- package/README.github.md +382 -0
- package/README.md +90 -42
- package/README.npm.md +124 -0
- package/dist/base/reboot/index.js +5 -0
- package/dist/base/reboot/object.js +1 -0
- package/dist/base/tokens/index.js +5 -0
- package/dist/base/tokens/object.js +1 -0
- package/dist/base.css +62 -0
- package/dist/base.css.d.ts +1 -0
- package/dist/components/accordion/index.js +7 -0
- package/dist/components/accordion/object.js +1 -0
- package/dist/components/accordion.css +2 -0
- package/dist/components/accordion.css.d.ts +1 -0
- package/dist/components/alert/index.js +7 -0
- package/dist/components/alert/object.js +1 -0
- package/dist/components/alert.css +2 -0
- package/dist/components/alert.css.d.ts +1 -0
- package/dist/components/avatar/index.js +7 -0
- package/dist/components/avatar/object.js +1 -0
- package/dist/components/avatar.css +2 -0
- package/dist/components/avatar.css.d.ts +1 -0
- package/dist/components/badge/index.js +7 -0
- package/dist/components/badge/object.js +1 -0
- package/dist/components/badge.css +2 -0
- package/dist/components/badge.css.d.ts +1 -0
- package/dist/components/breadcrumb/index.js +7 -0
- package/dist/components/breadcrumb/object.js +1 -0
- package/dist/components/breadcrumb.css +2 -0
- package/dist/components/breadcrumb.css.d.ts +1 -0
- package/dist/components/button/index.js +7 -0
- package/dist/components/button/object.js +1 -0
- package/dist/components/button.css +2 -0
- package/dist/components/button.css.d.ts +1 -0
- package/dist/components/card/index.js +7 -0
- package/dist/components/card/object.js +1 -0
- package/dist/components/card.css +2 -0
- package/dist/components/card.css.d.ts +1 -0
- package/dist/components/carousel/index.js +7 -0
- package/dist/components/carousel/object.js +1 -0
- package/dist/components/carousel.css +2 -0
- package/dist/components/carousel.css.d.ts +1 -0
- package/dist/components/chat/index.js +7 -0
- package/dist/components/chat/object.js +1 -0
- package/dist/components/chat.css +2 -0
- package/dist/components/chat.css.d.ts +1 -0
- package/dist/components/checkbox/index.js +7 -0
- package/dist/components/checkbox/object.js +1 -0
- package/dist/components/checkbox.css +2 -0
- package/dist/components/checkbox.css.d.ts +1 -0
- package/dist/components/collapsible/index.js +7 -0
- package/dist/components/collapsible/object.js +1 -0
- package/dist/components/collapsible.css +2 -0
- package/dist/components/collapsible.css.d.ts +1 -0
- package/dist/components/combobox/index.js +7 -0
- package/dist/components/combobox/object.js +1 -0
- package/dist/components/combobox.css +2 -0
- package/dist/components/combobox.css.d.ts +1 -0
- package/dist/components/countdown/index.js +7 -0
- package/dist/components/countdown/object.js +1 -0
- package/dist/components/countdown.css +2 -0
- package/dist/components/countdown.css.d.ts +1 -0
- package/dist/components/diff/index.js +7 -0
- package/dist/components/diff/object.js +1 -0
- package/dist/components/diff.css +2 -0
- package/dist/components/diff.css.d.ts +1 -0
- package/dist/components/divider/index.js +7 -0
- package/dist/components/divider/object.js +1 -0
- package/dist/components/divider.css +2 -0
- package/dist/components/divider.css.d.ts +1 -0
- package/dist/components/drawer/index.js +7 -0
- package/dist/components/drawer/object.js +1 -0
- package/dist/components/drawer.css +2 -0
- package/dist/components/drawer.css.d.ts +1 -0
- package/dist/components/footer/index.js +7 -0
- package/dist/components/footer/object.js +1 -0
- package/dist/components/footer.css +2 -0
- package/dist/components/footer.css.d.ts +1 -0
- package/dist/components/header/index.js +7 -0
- package/dist/components/header/object.js +1 -0
- package/dist/components/header.css +2 -0
- package/dist/components/header.css.d.ts +1 -0
- package/dist/components/hero/index.js +7 -0
- package/dist/components/hero/object.js +1 -0
- package/dist/components/hero.css +2 -0
- package/dist/components/hero.css.d.ts +1 -0
- package/dist/components/indicator/index.js +7 -0
- package/dist/components/indicator/object.js +1 -0
- package/dist/components/indicator.css +2 -0
- package/dist/components/indicator.css.d.ts +1 -0
- package/dist/components/input/index.js +7 -0
- package/dist/components/input/object.js +1 -0
- package/dist/components/input.css +2 -0
- package/dist/components/input.css.d.ts +1 -0
- package/dist/components/join/index.js +7 -0
- package/dist/components/join/object.js +1 -0
- package/dist/components/join.css +2 -0
- package/dist/components/join.css.d.ts +1 -0
- package/dist/components/kbd/index.js +7 -0
- package/dist/components/kbd/object.js +1 -0
- package/dist/components/kbd.css +2 -0
- package/dist/components/kbd.css.d.ts +1 -0
- package/dist/components/link/index.js +7 -0
- package/dist/components/link/object.js +1 -0
- package/dist/components/link.css +2 -0
- package/dist/components/link.css.d.ts +1 -0
- package/dist/components/loading/index.js +7 -0
- package/dist/components/loading/object.js +1 -0
- package/dist/components/loading.css +2 -0
- package/dist/components/loading.css.d.ts +1 -0
- package/dist/components/marquee/index.js +7 -0
- package/dist/components/marquee/object.js +1 -0
- package/dist/components/marquee.css +2 -0
- package/dist/components/marquee.css.d.ts +1 -0
- package/dist/components/mask/index.js +7 -0
- package/dist/components/mask/object.js +1 -0
- package/dist/components/mask.css +2 -0
- package/dist/components/mask.css.d.ts +1 -0
- package/dist/components/menu/index.js +7 -0
- package/dist/components/menu/object.js +1 -0
- package/dist/components/menu.css +2 -0
- package/dist/components/menu.css.d.ts +1 -0
- package/dist/components/modal/index.js +7 -0
- package/dist/components/modal/object.js +1 -0
- package/dist/components/modal.css +2 -0
- package/dist/components/modal.css.d.ts +1 -0
- package/dist/components/navbar/index.js +7 -0
- package/dist/components/navbar/object.js +1 -0
- package/dist/components/navbar.css +2 -0
- package/dist/components/navbar.css.d.ts +1 -0
- package/dist/components/popover/index.js +7 -0
- package/dist/components/popover/object.js +1 -0
- package/dist/components/popover.css +2 -0
- package/dist/components/popover.css.d.ts +1 -0
- package/dist/components/progress/index.js +7 -0
- package/dist/components/progress/object.js +1 -0
- package/dist/components/progress.css +2 -0
- package/dist/components/progress.css.d.ts +1 -0
- package/dist/components/radial-progress/index.js +7 -0
- package/dist/components/radial-progress/object.js +1 -0
- package/dist/components/radial-progress.css +2 -0
- package/dist/components/radial-progress.css.d.ts +1 -0
- package/dist/components/radio/index.js +7 -0
- package/dist/components/radio/object.js +1 -0
- package/dist/components/radio.css +2 -0
- package/dist/components/radio.css.d.ts +1 -0
- package/dist/components/range/index.js +7 -0
- package/dist/components/range/object.js +1 -0
- package/dist/components/range.css +2 -0
- package/dist/components/range.css.d.ts +1 -0
- package/dist/components/rating/index.js +7 -0
- package/dist/components/rating/object.js +1 -0
- package/dist/components/rating.css +2 -0
- package/dist/components/rating.css.d.ts +1 -0
- package/dist/components/select/index.js +7 -0
- package/dist/components/select/object.js +1 -0
- package/dist/components/select.css +2 -0
- package/dist/components/select.css.d.ts +1 -0
- package/dist/components/sidebar/index.js +7 -0
- package/dist/components/sidebar/object.js +1 -0
- package/dist/components/sidebar.css +2 -0
- package/dist/components/sidebar.css.d.ts +1 -0
- package/dist/components/skeleton/index.js +7 -0
- package/dist/components/skeleton/object.js +1 -0
- package/dist/components/skeleton.css +2 -0
- package/dist/components/skeleton.css.d.ts +1 -0
- package/dist/components/stat/index.js +7 -0
- package/dist/components/stat/object.js +1 -0
- package/dist/components/stat.css +2 -0
- package/dist/components/stat.css.d.ts +1 -0
- package/dist/components/status/index.js +7 -0
- package/dist/components/status/object.js +1 -0
- package/dist/components/status.css +2 -0
- package/dist/components/status.css.d.ts +1 -0
- package/dist/components/steps/index.js +7 -0
- package/dist/components/steps/object.js +1 -0
- package/dist/components/steps.css +2 -0
- package/dist/components/steps.css.d.ts +1 -0
- package/dist/components/surface/index.js +7 -0
- package/dist/components/surface/object.js +1 -0
- package/dist/components/surface.css +2 -0
- package/dist/components/surface.css.d.ts +1 -0
- package/dist/components/swap/index.js +7 -0
- package/dist/components/swap/object.js +1 -0
- package/dist/components/swap.css +2 -0
- package/dist/components/swap.css.d.ts +1 -0
- package/dist/components/table/index.js +7 -0
- package/dist/components/table/object.js +1 -0
- package/dist/components/table.css +2 -0
- package/dist/components/table.css.d.ts +1 -0
- package/dist/components/tabs/index.js +7 -0
- package/dist/components/tabs/object.js +1 -0
- package/dist/components/tabs.css +2 -0
- package/dist/components/tabs.css.d.ts +1 -0
- package/dist/components/tag/index.js +7 -0
- package/dist/components/tag/object.js +1 -0
- package/dist/components/tag.css +2 -0
- package/dist/components/tag.css.d.ts +1 -0
- package/dist/components/textarea/index.js +7 -0
- package/dist/components/textarea/object.js +1 -0
- package/dist/components/textarea.css +2 -0
- package/dist/components/textarea.css.d.ts +1 -0
- package/dist/components/timeline/index.js +7 -0
- package/dist/components/timeline/object.js +1 -0
- package/dist/components/timeline.css +2 -0
- package/dist/components/timeline.css.d.ts +1 -0
- package/dist/components/toast/index.js +7 -0
- package/dist/components/toast/object.js +1 -0
- package/dist/components/toast.css +2 -0
- package/dist/components/toast.css.d.ts +1 -0
- package/dist/components/toggle/index.js +7 -0
- package/dist/components/toggle/object.js +1 -0
- package/dist/components/toggle.css +2 -0
- package/dist/components/toggle.css.d.ts +1 -0
- package/dist/components/tooltip/index.js +7 -0
- package/dist/components/tooltip/object.js +1 -0
- package/dist/components/tooltip.css +2 -0
- package/dist/components/tooltip.css.d.ts +1 -0
- package/dist/frutjam.components.css +62 -0
- package/dist/frutjam.components.css.d.ts +1 -0
- package/dist/frutjam.min.css +65 -3
- package/dist/frutjam.min.css.d.ts +1 -0
- package/dist/functions/addPrefix.js +14 -0
- package/dist/plugin.js +207 -0
- package/dist/themes/darkberry/index.js +5 -0
- package/dist/themes/darkberry/object.js +1 -0
- package/dist/themes/darkberry.css +2 -0
- package/dist/themes/darkberry.css.d.ts +1 -0
- package/dist/themes/snowberry/index.js +5 -0
- package/dist/themes/snowberry/object.js +1 -0
- package/dist/themes/snowberry.css +2 -0
- package/dist/themes/snowberry.css.d.ts +1 -0
- package/dist/unocss/map.js +5 -0
- package/dist/utilities/headings/index.js +7 -0
- package/dist/utilities/headings/object.js +1 -0
- package/dist/utilities/headings.css +2 -0
- package/dist/utilities/headings.css.d.ts +1 -0
- package/dist/utilities/para/index.js +7 -0
- package/dist/utilities/para/object.js +1 -0
- package/dist/utilities/para.css +2 -0
- package/dist/utilities/para.css.d.ts +1 -0
- package/dist/utilities/typography/index.js +7 -0
- package/dist/utilities/typography/object.js +1 -0
- package/dist/utilities/typography.css +2 -0
- package/dist/utilities/typography.css.d.ts +1 -0
- package/dist/utilities/wrapper/index.js +7 -0
- package/dist/utilities/wrapper/object.js +1 -0
- package/dist/utilities/wrapper.css +2 -0
- package/dist/utilities/wrapper.css.d.ts +1 -0
- package/index.js +332 -0
- package/package.json +90 -43
- package/packages/js/carousel.js +20 -0
- package/packages/js/collapsible.js +14 -0
- package/packages/js/combobox.js +101 -0
- package/packages/js/drawer.js +1 -0
- package/packages/js/index.js +8 -0
- package/packages/js/modal.js +8 -0
- package/packages/js/tabs.js +89 -0
- package/packages/js/toast.js +27 -0
- package/packages/js/tooltip.js +8 -0
- package/packages/react/index.js +8 -0
- package/packages/react/useCarousel.js +23 -0
- package/packages/react/useCollapsible.js +20 -0
- package/packages/react/useCombobox.js +81 -0
- package/packages/react/useDrawer.js +1 -0
- package/packages/react/useModal.js +12 -0
- package/packages/react/useTabs.js +53 -0
- package/packages/react/useToast.js +27 -0
- package/packages/react/useTooltip.js +12 -0
- package/packages/unocss/index.js +77 -0
- package/dist/frutjam.dev.css +0 -2
- package/dist/frutjam.min.js +0 -2
- package/dist/frutjam.min.js.LICENSE.txt +0 -1
package/LICENSE
CHANGED
package/README.github.md
ADDED
|
@@ -0,0 +1,382 @@
|
|
|
1
|
+
[![npm installs][npm_installs]](https://www.npmjs.com/package/frutjam)
|
|
2
|
+
[![Jsdelivr hits][jsdelivr]](https://cdn.jsdelivr.net/npm/frutjam)
|
|
3
|
+
[](https://github.com/nezanuha/frutjam/releases)
|
|
4
|
+
[](https://github.com/nezanuha/frutjam/blob/master/LICENSE)
|
|
5
|
+
[](https://snyk.io/test/github/nezanuha/frutjam)
|
|
6
|
+
|
|
7
|
+
---
|
|
8
|
+
|
|
9
|
+
# Frutjam: CSS-Only Tailwind CSS UI Component Library
|
|
10
|
+
|
|
11
|
+
**Frutjam** is a free, open-source Tailwind CSS v4 component library, and it works with UnoCSS or no build step at all. 65+ production-ready UI components with **zero JavaScript**, guaranteed **WCAG AA accessibility**, and a free **MCP server for AI editors** (Cherry). Works with any framework: React, Vue, HTMX, Django, Laravel, plain HTML.
|
|
12
|
+
|
|
13
|
+
๐ **[frutjam.com](https://frutjam.com)** ยท ๐ฆ **[npm](https://www.npmjs.com/package/frutjam)** ยท ๐ **[Cherry MCP](https://frutjam.com/products/cherry)**
|
|
14
|
+
|
|
15
|
+

|
|
16
|
+
|
|
17
|
+
<details>
|
|
18
|
+
<summary><b>Themed with CSS variables, no rebuild</b></summary>
|
|
19
|
+
|
|
20
|
+
<br>
|
|
21
|
+
|
|
22
|
+

|
|
23
|
+
|
|
24
|
+
Two palettes ship with the package, `light` and `dark` (also available as `snowberry` and `darkberry`). Switch with `data-theme="dark"` on any ancestor element. Your own themes are a handful of OKLCH tokens: blueberry and peachberry above are two of the four ready to copy from [the themes page](https://frutjam.com/docs/themes).
|
|
25
|
+
|
|
26
|
+
</details>
|
|
27
|
+
|
|
28
|
+
---
|
|
29
|
+
|
|
30
|
+
## What is Frutjam?
|
|
31
|
+
|
|
32
|
+
Frutjam is a **CSS-only Tailwind CSS component library** built for Tailwind CSS v4. You install it as a Tailwind plugin, one line in your CSS, and instantly get 65+ accessible, copy-paste UI components: buttons, modals, drawers, tabs, toasts, carousels, tables, forms, and more.
|
|
33
|
+
|
|
34
|
+
Every component works with pure HTML and CSS. No JavaScript framework required. No build pipeline beyond Tailwind itself. Drop it into any stack and start building.
|
|
35
|
+
|
|
36
|
+
---
|
|
37
|
+
|
|
38
|
+
## Quick Install
|
|
39
|
+
|
|
40
|
+
```bash
|
|
41
|
+
npm install -D frutjam
|
|
42
|
+
```
|
|
43
|
+
|
|
44
|
+
```css
|
|
45
|
+
@import "tailwindcss";
|
|
46
|
+
@plugin "frutjam";
|
|
47
|
+
```
|
|
48
|
+
|
|
49
|
+
**That's it.** All 65+ components are available immediately. No imports, no config, no extra stylesheets.
|
|
50
|
+
|
|
51
|
+
### Not using Tailwind?
|
|
52
|
+
|
|
53
|
+
Frutjam works without it. Import the stylesheet and every component class is available, 30 KB gzipped:
|
|
54
|
+
|
|
55
|
+
```js
|
|
56
|
+
import 'frutjam/css';
|
|
57
|
+
```
|
|
58
|
+
|
|
59
|
+
UnoCSS users get a preset instead, so only the components you use are emitted:
|
|
60
|
+
|
|
61
|
+
```js
|
|
62
|
+
import { presetFrutjam } from 'frutjam/unocss';
|
|
63
|
+
|
|
64
|
+
export default defineConfig({ presets: [presetWind4(), presetFrutjam()] });
|
|
65
|
+
```
|
|
66
|
+
|
|
67
|
+
---
|
|
68
|
+
|
|
69
|
+
## Why Frutjam?
|
|
70
|
+
|
|
71
|
+
| | Frutjam | DaisyUI | Shadcn UI | Flowbite |
|
|
72
|
+
|---|---|---|---|---|
|
|
73
|
+
| Zero JavaScript | โ
| โ
| โ React required | โ ๏ธ Some JS |
|
|
74
|
+
| Tailwind v4 native | โ
| โ ๏ธ v3 + v4 | โ ๏ธ | โ |
|
|
75
|
+
| WCAG AA guaranteed | โ
Every component | โ ๏ธ | โ ๏ธ | โ ๏ธ |
|
|
76
|
+
| OKLCH color system | โ
| โ | โ | โ |
|
|
77
|
+
| MCP server for AI editors | โ
Cherry (free tier) | โ
Blueprint (paid only) | โ | โ |
|
|
78
|
+
| Framework-agnostic | โ
| โ
| โ React only | โ ๏ธ |
|
|
79
|
+
| Copy-paste friendly | โ
| โ
| โ
| โ
|
|
|
80
|
+
| MIT license | โ
| โ
| โ
| โ
|
|
|
81
|
+
|
|
82
|
+
**The short version:** Frutjam is the only Tailwind v4-native component library with guaranteed WCAG AA accessibility, an OKLCH color system, and a free MCP server for AI-assisted development.
|
|
83
|
+
|
|
84
|
+
---
|
|
85
|
+
|
|
86
|
+
## Key Features
|
|
87
|
+
|
|
88
|
+
- **Zero JavaScript**: every component works with pure CSS and semantic HTML. Native `<dialog>` for modals, `<details>` for accordions, CSS `:has()` for interactive states. No `addEventListener`, no hydration, no runtime.
|
|
89
|
+
- **65+ components**: buttons, modals, tabs, drawers, tooltips, carousels, cards, alerts, toasts, tables, forms, and more. All production-ready.
|
|
90
|
+
- **WCAG AA by default**: every color pair (`--color-primary` / `--color-on-primary`) is hand-tuned in OKLCH to meet WCAG AA contrast requirements. Semantic HTML throughout.
|
|
91
|
+
- **Tailwind v4 native**: built as a Tailwind v4 plugin using `@plugin`. No legacy `tailwind.config.js`. OKLCH design tokens via CSS custom properties.
|
|
92
|
+
- **Framework-agnostic**: works with React, Next.js, Vue, Nuxt, Svelte, HTMX, Django, Laravel Blade, Astro, Rails, plain HTML, anything that outputs HTML.
|
|
93
|
+
- **Themeable**: swap themes with `data-theme="dark"`. Build custom themes in CSS with OKLCH tokens. Supports light, dark, and system preference automatically.
|
|
94
|
+
- **Treeshaken**: only the components you use are included. Tailwind's engine removes unused styles at build time.
|
|
95
|
+
- **CDN-ready**: no build step needed. Import directly from jsDelivr.
|
|
96
|
+
|
|
97
|
+
---
|
|
98
|
+
|
|
99
|
+
## ๐ Cherry MCP: AI Editor Integration
|
|
100
|
+
|
|
101
|
+
Cherry is Frutjam's **free MCP server** that gives AI coding assistants accurate, real-time access to Frutjam component docs.
|
|
102
|
+
|
|
103
|
+
Without Cherry, AI assistants (Claude Code, Cursor, GitHub Copilot) hallucinate Tailwind CSS class names, inventing classes that don't exist. Cherry solves this by feeding your AI editor the exact Frutjam specs at the moment it needs them.
|
|
104
|
+
|
|
105
|
+
**Works with:** Claude Code ยท Cursor ยท VS Code ยท Windsurf ยท Zed ยท Cline ยท any MCP-compatible editor
|
|
106
|
+
|
|
107
|
+
```json
|
|
108
|
+
{
|
|
109
|
+
"mcpServers": {
|
|
110
|
+
"frutjam": {
|
|
111
|
+
"command": "npx",
|
|
112
|
+
"args": ["-y", "frutjam-cherry"]
|
|
113
|
+
}
|
|
114
|
+
}
|
|
115
|
+
}
|
|
116
|
+
```
|
|
117
|
+
|
|
118
|
+
[**Get Cherry MCP โ**](https://frutjam.com/products/cherry)
|
|
119
|
+
|
|
120
|
+
---
|
|
121
|
+
|
|
122
|
+
## Components
|
|
123
|
+
|
|
124
|
+
65+ free, production-ready CSS-only Tailwind CSS components:
|
|
125
|
+
|
|
126
|
+
### Inputs & Forms
|
|
127
|
+
- [Button](https://frutjam.com/components/button)
|
|
128
|
+
- [Checkbox](https://frutjam.com/components/checkbox)
|
|
129
|
+
- [Radio](https://frutjam.com/components/radio)
|
|
130
|
+
- [Toggle](https://frutjam.com/components/toggle)
|
|
131
|
+
- [Input](https://frutjam.com/components/input)
|
|
132
|
+
- [Textarea](https://frutjam.com/components/textarea)
|
|
133
|
+
- [Select](https://frutjam.com/components/select)
|
|
134
|
+
- [Range](https://frutjam.com/components/range)
|
|
135
|
+
- [Rating](https://frutjam.com/components/rating)
|
|
136
|
+
- [Combobox](https://frutjam.com/components/combobox)
|
|
137
|
+
|
|
138
|
+
### Layout & Navigation
|
|
139
|
+
- [Navbar](https://frutjam.com/components/navbar)
|
|
140
|
+
- [Sidebar](https://frutjam.com/components/sidebar)
|
|
141
|
+
- [Drawer](https://frutjam.com/components/drawer)
|
|
142
|
+
- [Menu](https://frutjam.com/components/menu)
|
|
143
|
+
- [Breadcrumb](https://frutjam.com/components/breadcrumb)
|
|
144
|
+
- [Tabs](https://frutjam.com/components/tabs)
|
|
145
|
+
- [Steps](https://frutjam.com/components/steps)
|
|
146
|
+
- [Footer](https://frutjam.com/components/footer)
|
|
147
|
+
- [Header](https://frutjam.com/components/header)
|
|
148
|
+
- [Join](https://frutjam.com/components/join)
|
|
149
|
+
- [Pagination](https://frutjam.com/components/pagination)
|
|
150
|
+
|
|
151
|
+
### Feedback & Overlay
|
|
152
|
+
- [Modal](https://frutjam.com/components/modal)
|
|
153
|
+
- [Toast](https://frutjam.com/components/toast)
|
|
154
|
+
- [Alert](https://frutjam.com/components/alert)
|
|
155
|
+
- [Tooltip](https://frutjam.com/components/tooltip)
|
|
156
|
+
- [Popover](https://frutjam.com/components/popover)
|
|
157
|
+
- [Loading](https://frutjam.com/components/loading)
|
|
158
|
+
- [Skeleton](https://frutjam.com/components/skeleton)
|
|
159
|
+
- [Progress](https://frutjam.com/components/progress)
|
|
160
|
+
- [Radial Progress](https://frutjam.com/components/radial-progress)
|
|
161
|
+
|
|
162
|
+
### Data Display
|
|
163
|
+
- [Card](https://frutjam.com/components/card)
|
|
164
|
+
- [Table](https://frutjam.com/components/table)
|
|
165
|
+
- [Stat](https://frutjam.com/components/stat)
|
|
166
|
+
- [Badge](https://frutjam.com/components/badge)
|
|
167
|
+
- [Tag](https://frutjam.com/components/tag)
|
|
168
|
+
- [Avatar](https://frutjam.com/components/avatar)
|
|
169
|
+
- [Indicator](https://frutjam.com/components/indicator)
|
|
170
|
+
- [Status](https://frutjam.com/components/status)
|
|
171
|
+
- [Diff](https://frutjam.com/components/diff)
|
|
172
|
+
- [Timeline](https://frutjam.com/components/timeline)
|
|
173
|
+
- [Chat](https://frutjam.com/components/chat)
|
|
174
|
+
|
|
175
|
+
### Typography & Decoration
|
|
176
|
+
- [Hero](https://frutjam.com/components/hero)
|
|
177
|
+
- [Divider](https://frutjam.com/components/divider)
|
|
178
|
+
- [Kbd](https://frutjam.com/components/kbd)
|
|
179
|
+
- [Link](https://frutjam.com/components/link)
|
|
180
|
+
- [Mask](https://frutjam.com/components/mask)
|
|
181
|
+
- [Swap](https://frutjam.com/components/swap)
|
|
182
|
+
- [Countdown](https://frutjam.com/components/countdown)
|
|
183
|
+
- [Marquee](https://frutjam.com/components/marquee)
|
|
184
|
+
- [Carousel](https://frutjam.com/components/carousel)
|
|
185
|
+
- [Accordion](https://frutjam.com/components/accordion)
|
|
186
|
+
- [Collapsible](https://frutjam.com/components/collapsible)
|
|
187
|
+
- [Surface](https://frutjam.com/components/surface)
|
|
188
|
+
|
|
189
|
+
[**Browse all components with live previews โ**](https://frutjam.com/components)
|
|
190
|
+
|
|
191
|
+
---
|
|
192
|
+
|
|
193
|
+
## Usage Examples
|
|
194
|
+
|
|
195
|
+
```html
|
|
196
|
+
<!-- Primary button -->
|
|
197
|
+
<button class="btn btn-primary">Get Started</button>
|
|
198
|
+
|
|
199
|
+
<!-- Outline button with badge -->
|
|
200
|
+
<button class="btn btn-outline">
|
|
201
|
+
Notifications
|
|
202
|
+
<span class="badge badge-primary">3</span>
|
|
203
|
+
</button>
|
|
204
|
+
|
|
205
|
+
<!-- CSS-only modal, no JavaScript -->
|
|
206
|
+
<button popovertarget="my-modal" class="btn btn-primary">Open Modal</button>
|
|
207
|
+
<dialog id="my-modal" popover class="modal">
|
|
208
|
+
<div class="modal-content">
|
|
209
|
+
<h3 class="heading-lg">Pure CSS modal</h3>
|
|
210
|
+
<p class="para">Zero JavaScript. Native browser popover API.</p>
|
|
211
|
+
<button popovertarget="my-modal" class="btn mt-4">Close</button>
|
|
212
|
+
</div>
|
|
213
|
+
</dialog>
|
|
214
|
+
|
|
215
|
+
<!-- Alert -->
|
|
216
|
+
<div class="alert alert-success">
|
|
217
|
+
<p>Your changes have been saved.</p>
|
|
218
|
+
</div>
|
|
219
|
+
|
|
220
|
+
<!-- Card -->
|
|
221
|
+
<div class="card">
|
|
222
|
+
<div class="card-content">
|
|
223
|
+
<h2 class="heading-lg">Card title</h2>
|
|
224
|
+
<p class="para">Card content goes here.</p>
|
|
225
|
+
</div>
|
|
226
|
+
</div>
|
|
227
|
+
|
|
228
|
+
<!-- Input -->
|
|
229
|
+
<div class="flex flex-col gap-2">
|
|
230
|
+
<label class="text-sm font-medium">Email</label>
|
|
231
|
+
<input type="email" class="input" placeholder="you@example.com">
|
|
232
|
+
</div>
|
|
233
|
+
|
|
234
|
+
<!-- Badge variants -->
|
|
235
|
+
<span class="badge badge-primary">Primary</span>
|
|
236
|
+
<span class="badge badge-success badge-soft">Success</span>
|
|
237
|
+
<span class="badge badge-error badge-outline">Error</span>
|
|
238
|
+
```
|
|
239
|
+
|
|
240
|
+
---
|
|
241
|
+
|
|
242
|
+
## Accessibility
|
|
243
|
+
|
|
244
|
+
Frutjam is designed for WCAG AA compliance from the ground up:
|
|
245
|
+
|
|
246
|
+
- **Color contrast**: every color token pair is hand-tuned in OKLCH to exceed WCAG AA 4.5:1 contrast ratio for text
|
|
247
|
+
- **Semantic HTML**: native `<dialog>` for modals, `<details>` for accordions, `<nav>` for navigation, correct heading hierarchy
|
|
248
|
+
- **Keyboard navigation**: all interactive components are fully keyboard accessible
|
|
249
|
+
- **Screen reader support**: ARIA attributes included where native semantics are insufficient
|
|
250
|
+
- **Focus management**: visible focus rings on all interactive elements, respects `prefers-reduced-motion`
|
|
251
|
+
|
|
252
|
+
---
|
|
253
|
+
|
|
254
|
+
## Themes
|
|
255
|
+
|
|
256
|
+
```html
|
|
257
|
+
<html data-theme="darkberry">
|
|
258
|
+
```
|
|
259
|
+
|
|
260
|
+
```css
|
|
261
|
+
/* Define your own theme */
|
|
262
|
+
@layer theme {
|
|
263
|
+
[data-theme="ocean"] {
|
|
264
|
+
--color-primary: oklch(60% 0.2 220);
|
|
265
|
+
--color-on-primary: oklch(98% 0.01 220);
|
|
266
|
+
--color-base: oklch(15% 0.02 220);
|
|
267
|
+
--color-on-base: oklch(92% 0.01 220);
|
|
268
|
+
}
|
|
269
|
+
}
|
|
270
|
+
```
|
|
271
|
+
|
|
272
|
+
[**Explore themes โ**](https://frutjam.com/docs/themes)
|
|
273
|
+
|
|
274
|
+
---
|
|
275
|
+
|
|
276
|
+
## Plugin Options
|
|
277
|
+
|
|
278
|
+
| Option | Default | Description |
|
|
279
|
+
|--------|---------|-------------|
|
|
280
|
+
| `prefix` | `""` | Prefix all Frutjam class names (e.g. `fj` โ `fj-btn`) |
|
|
281
|
+
| `reset` | `true` | Include browser reset and element defaults |
|
|
282
|
+
| `root` | `":root"` | Remap CSS variable declarations to a custom selector |
|
|
283
|
+
| `logs` | `true` | Show build-time console output |
|
|
284
|
+
| `include` | `[]` | Include only specific components |
|
|
285
|
+
| `exclude` | `[]` | Exclude specific components |
|
|
286
|
+
|
|
287
|
+
---
|
|
288
|
+
|
|
289
|
+
## CDN (No Build Step)
|
|
290
|
+
|
|
291
|
+
```html
|
|
292
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/frutjam/dist/frutjam.min.css" />
|
|
293
|
+
```
|
|
294
|
+
|
|
295
|
+
---
|
|
296
|
+
|
|
297
|
+
## Framework Support
|
|
298
|
+
|
|
299
|
+
| Framework | Status |
|
|
300
|
+
|-----------|--------|
|
|
301
|
+
| HTML / Static sites | โ
|
|
|
302
|
+
| React / Next.js | โ
|
|
|
303
|
+
| Vue / Nuxt | โ
|
|
|
304
|
+
| Svelte / SvelteKit | โ
|
|
|
305
|
+
| HTMX | โ
|
|
|
306
|
+
| Django | โ
|
|
|
307
|
+
| Laravel / Blade | โ
|
|
|
308
|
+
| Astro | โ
|
|
|
309
|
+
| Ruby on Rails | โ
|
|
|
310
|
+
| Any HTML output | โ
|
|
|
311
|
+
|
|
312
|
+
| Build setup | How |
|
|
313
|
+
|-----------|--------|
|
|
314
|
+
| Tailwind CSS v4 | `@plugin "frutjam"`, tree-shaken |
|
|
315
|
+
| UnoCSS | `presetFrutjam()`, tree-shaken |
|
|
316
|
+
| Vite, Astro, Rails, plain CSS | `import 'frutjam/css'` |
|
|
317
|
+
| No build step | `<link>` the CDN file |
|
|
318
|
+
|
|
319
|
+
---
|
|
320
|
+
|
|
321
|
+
## Starter Projects
|
|
322
|
+
|
|
323
|
+
Working projects with Frutjam already wired up: clone and start building.
|
|
324
|
+
|
|
325
|
+
| Starter | Stack |
|
|
326
|
+
|---------|-------|
|
|
327
|
+
| [django-frutjam-starter](https://github.com/nezanuha/django-frutjam-starter) | Django 6, auth, dashboard, markdown CRUD |
|
|
328
|
+
|
|
329
|
+
---
|
|
330
|
+
|
|
331
|
+
## Documentation
|
|
332
|
+
|
|
333
|
+
- [Getting Started](https://frutjam.com/docs/overview)
|
|
334
|
+
- [Installation Guide](https://frutjam.com/docs/installation)
|
|
335
|
+
- [Configuration](https://frutjam.com/docs/configuration)
|
|
336
|
+
- [Theming](https://frutjam.com/docs/themes)
|
|
337
|
+
- [Colors](https://frutjam.com/docs/colors)
|
|
338
|
+
- [All Components](https://frutjam.com/components)
|
|
339
|
+
- [UI Blocks](https://frutjam.com/blocks)
|
|
340
|
+
- [Cherry MCP](https://frutjam.com/products/cherry)
|
|
341
|
+
- [Django starter project](https://github.com/nezanuha/django-frutjam-starter)
|
|
342
|
+
|
|
343
|
+
---
|
|
344
|
+
|
|
345
|
+
## Community
|
|
346
|
+
|
|
347
|
+
- [Discord](https://discord.gg/FvjytjQSSZ)
|
|
348
|
+
- [X / Twitter](https://x.com/FrutjamUI)
|
|
349
|
+
- [Write for Us](https://github.com/nezanuha/frutjam/issues/new?template=blog-pitch.yml)
|
|
350
|
+
|
|
351
|
+
---
|
|
352
|
+
|
|
353
|
+
## Contributing
|
|
354
|
+
|
|
355
|
+
See [CONTRIBUTING.md](.github/CONTRIBUTING.md) for the component, documentation and
|
|
356
|
+
translation workflows. The docs are published in 13 languages, and corrections
|
|
357
|
+
to the machine-translated pages are especially welcome.
|
|
358
|
+
|
|
359
|
+
1. Fork the repository
|
|
360
|
+
2. Create a feature branch: `git checkout -b feature/my-component`
|
|
361
|
+
3. Commit your changes: `git commit -m 'Add my-component'`
|
|
362
|
+
4. Push: `git push origin feature/my-component`
|
|
363
|
+
5. Open a Pull Request
|
|
364
|
+
|
|
365
|
+
---
|
|
366
|
+
|
|
367
|
+
## License
|
|
368
|
+
|
|
369
|
+
MIT, free for personal and commercial use. See [LICENSE](LICENSE).
|
|
370
|
+
|
|
371
|
+
---
|
|
372
|
+
|
|
373
|
+
## โญ Star this repo
|
|
374
|
+
|
|
375
|
+
If Frutjam saves you time, a star helps others find it.
|
|
376
|
+
|
|
377
|
+
[](https://github.com/nezanuha/frutjam)
|
|
378
|
+
|
|
379
|
+
---
|
|
380
|
+
|
|
381
|
+
[jsdelivr]: https://badgen.net/jsdelivr/hits/npm/frutjam
|
|
382
|
+
[npm_installs]: https://badgen.net/npm/dt/frutjam
|
package/README.md
CHANGED
|
@@ -1,76 +1,124 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
1
|
+
# Frutjam
|
|
2
|
+
|
|
3
|
+
CSS-only Tailwind CSS v4 component library, also usable with UnoCSS or no build step at all. 65+ accessible, copy-paste UI components โ zero JavaScript, WCAG AA guaranteed, framework-agnostic.
|
|
4
|
+
|
|
5
|
+
**[frutjam.com](https://frutjam.com)** ยท [Components](https://frutjam.com/components) ยท [Docs](https://frutjam.com/docs) ยท [Cherry MCP](https://frutjam.com/products/cherry)
|
|
5
6
|
|
|
6
7
|
---
|
|
7
8
|
|
|
8
|
-
##
|
|
9
|
+
## Install
|
|
9
10
|
|
|
10
|
-
|
|
11
|
+
```bash
|
|
12
|
+
npm install -D frutjam
|
|
13
|
+
```
|
|
11
14
|
|
|
12
|
-
|
|
15
|
+
```css
|
|
16
|
+
@import "tailwindcss";
|
|
17
|
+
@plugin "frutjam";
|
|
18
|
+
```
|
|
13
19
|
|
|
14
|
-
|
|
20
|
+
That's it. All 65+ components available immediately.
|
|
15
21
|
|
|
16
|
-
|
|
22
|
+
### Without Tailwind
|
|
17
23
|
|
|
18
|
-
|
|
19
|
-
|
|
24
|
+
```js
|
|
25
|
+
import 'frutjam/css'; // every component, 30 KB gzipped
|
|
26
|
+
```
|
|
20
27
|
|
|
21
|
-
|
|
28
|
+
### With UnoCSS
|
|
22
29
|
|
|
23
|
-
|
|
30
|
+
```js
|
|
31
|
+
import { presetFrutjam } from 'frutjam/unocss';
|
|
24
32
|
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
* โฟ **Accessibility-First** โ Follows accessibility best practices
|
|
28
|
-
* ๐ **SEO-Friendly** โ Semantic markup optimized for search engines
|
|
29
|
-
* โ
**W3C Standards** โ Clean, valid HTML structure
|
|
30
|
-
* โ๏ธ **Built for Tailwind CSS** โ Seamless integration with your Tailwind setup
|
|
33
|
+
export default defineConfig({ presets: [presetWind4(), presetFrutjam()] });
|
|
34
|
+
```
|
|
31
35
|
|
|
32
36
|
---
|
|
33
37
|
|
|
34
|
-
|
|
38
|
+
## CDN
|
|
35
39
|
|
|
36
|
-
```
|
|
37
|
-
|
|
40
|
+
```html
|
|
41
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/frutjam/dist/frutjam.min.css" />
|
|
38
42
|
```
|
|
39
43
|
|
|
40
44
|
---
|
|
41
45
|
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
46
|
+
## Usage
|
|
47
|
+
|
|
48
|
+
```html
|
|
49
|
+
<!-- Button -->
|
|
50
|
+
<button class="btn btn-primary">Get Started</button>
|
|
51
|
+
<button class="btn btn-outline">Cancel</button>
|
|
52
|
+
|
|
53
|
+
<!-- Badge -->
|
|
54
|
+
<span class="badge badge-success">Active</span>
|
|
55
|
+
<span class="badge badge-error badge-soft">Error</span>
|
|
56
|
+
|
|
57
|
+
<!-- Alert -->
|
|
58
|
+
<div class="alert alert-success">Saved successfully.</div>
|
|
59
|
+
|
|
60
|
+
<!-- Card -->
|
|
61
|
+
<div class="card">
|
|
62
|
+
<div class="card-content">
|
|
63
|
+
<h2 class="heading-lg">Title</h2>
|
|
64
|
+
<p class="para">Content goes here.</p>
|
|
65
|
+
</div>
|
|
66
|
+
</div>
|
|
67
|
+
|
|
68
|
+
<!-- Input -->
|
|
69
|
+
<input type="text" class="input" placeholder="Enter text...">
|
|
70
|
+
|
|
71
|
+
<!-- CSS-only modal โ no JavaScript -->
|
|
72
|
+
<button popovertarget="modal" class="btn btn-primary">Open</button>
|
|
73
|
+
<dialog id="modal" popover class="modal">
|
|
74
|
+
<div class="modal-content">
|
|
75
|
+
<h3 class="heading-lg">Modal title</h3>
|
|
76
|
+
<button popovertarget="modal" class="btn mt-4">Close</button>
|
|
77
|
+
</div>
|
|
78
|
+
</dialog>
|
|
49
79
|
```
|
|
50
80
|
|
|
51
|
-
Thatโs it โ you're ready to build with Frutjam components!
|
|
52
|
-
|
|
53
81
|
---
|
|
54
82
|
|
|
55
|
-
|
|
83
|
+
## Plugin Options
|
|
56
84
|
|
|
57
|
-
|
|
58
|
-
|
|
85
|
+
```css
|
|
86
|
+
@plugin "frutjam" {
|
|
87
|
+
prefix: fj; /* fj-btn, fj-card, etc. */
|
|
88
|
+
reset: true; /* browser reset (default: true) */
|
|
89
|
+
}
|
|
90
|
+
```
|
|
59
91
|
|
|
60
92
|
---
|
|
61
93
|
|
|
62
|
-
##
|
|
94
|
+
## ๐ Cherry MCP โ Stop AI from hallucinating class names
|
|
63
95
|
|
|
64
|
-
|
|
96
|
+
Cherry is a free MCP server that gives Claude Code, Cursor, and VS Code accurate real-time Frutjam docs โ no more invented class names.
|
|
65
97
|
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
98
|
+
```json
|
|
99
|
+
{
|
|
100
|
+
"mcpServers": {
|
|
101
|
+
"frutjam": {
|
|
102
|
+
"command": "npx",
|
|
103
|
+
"args": ["-y", "frutjam-cherry"]
|
|
104
|
+
}
|
|
105
|
+
}
|
|
106
|
+
}
|
|
107
|
+
```
|
|
69
108
|
|
|
70
|
-
|
|
109
|
+
[**Get Cherry โ**](https://frutjam.com/products/cherry)
|
|
71
110
|
|
|
72
111
|
---
|
|
73
112
|
|
|
74
|
-
##
|
|
113
|
+
## Links
|
|
114
|
+
|
|
115
|
+
- [Full documentation](https://frutjam.com/docs)
|
|
116
|
+
- [All 65+ components](https://frutjam.com/components)
|
|
117
|
+
- [UI Blocks](https://frutjam.com/blocks)
|
|
118
|
+
- [Themes](https://frutjam.com/docs/themes)
|
|
119
|
+
- [GitHub](https://github.com/nezanuha/frutjam)
|
|
120
|
+
- [Discord](https://discord.gg/FvjytjQSSZ)
|
|
121
|
+
|
|
122
|
+
## License
|
|
75
123
|
|
|
76
|
-
|
|
124
|
+
MIT
|
package/README.npm.md
ADDED
|
@@ -0,0 +1,124 @@
|
|
|
1
|
+
# Frutjam
|
|
2
|
+
|
|
3
|
+
CSS-only Tailwind CSS v4 component library, also usable with UnoCSS or no build step at all. 65+ accessible, copy-paste UI components โ zero JavaScript, WCAG AA guaranteed, framework-agnostic.
|
|
4
|
+
|
|
5
|
+
**[frutjam.com](https://frutjam.com)** ยท [Components](https://frutjam.com/components) ยท [Docs](https://frutjam.com/docs) ยท [Cherry MCP](https://frutjam.com/products/cherry)
|
|
6
|
+
|
|
7
|
+
---
|
|
8
|
+
|
|
9
|
+
## Install
|
|
10
|
+
|
|
11
|
+
```bash
|
|
12
|
+
npm install -D frutjam
|
|
13
|
+
```
|
|
14
|
+
|
|
15
|
+
```css
|
|
16
|
+
@import "tailwindcss";
|
|
17
|
+
@plugin "frutjam";
|
|
18
|
+
```
|
|
19
|
+
|
|
20
|
+
That's it. All 65+ components available immediately.
|
|
21
|
+
|
|
22
|
+
### Without Tailwind
|
|
23
|
+
|
|
24
|
+
```js
|
|
25
|
+
import 'frutjam/css'; // every component, 30 KB gzipped
|
|
26
|
+
```
|
|
27
|
+
|
|
28
|
+
### With UnoCSS
|
|
29
|
+
|
|
30
|
+
```js
|
|
31
|
+
import { presetFrutjam } from 'frutjam/unocss';
|
|
32
|
+
|
|
33
|
+
export default defineConfig({ presets: [presetWind4(), presetFrutjam()] });
|
|
34
|
+
```
|
|
35
|
+
|
|
36
|
+
---
|
|
37
|
+
|
|
38
|
+
## CDN
|
|
39
|
+
|
|
40
|
+
```html
|
|
41
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/frutjam/dist/frutjam.min.css" />
|
|
42
|
+
```
|
|
43
|
+
|
|
44
|
+
---
|
|
45
|
+
|
|
46
|
+
## Usage
|
|
47
|
+
|
|
48
|
+
```html
|
|
49
|
+
<!-- Button -->
|
|
50
|
+
<button class="btn btn-primary">Get Started</button>
|
|
51
|
+
<button class="btn btn-outline">Cancel</button>
|
|
52
|
+
|
|
53
|
+
<!-- Badge -->
|
|
54
|
+
<span class="badge badge-success">Active</span>
|
|
55
|
+
<span class="badge badge-error badge-soft">Error</span>
|
|
56
|
+
|
|
57
|
+
<!-- Alert -->
|
|
58
|
+
<div class="alert alert-success">Saved successfully.</div>
|
|
59
|
+
|
|
60
|
+
<!-- Card -->
|
|
61
|
+
<div class="card">
|
|
62
|
+
<div class="card-content">
|
|
63
|
+
<h2 class="heading-lg">Title</h2>
|
|
64
|
+
<p class="para">Content goes here.</p>
|
|
65
|
+
</div>
|
|
66
|
+
</div>
|
|
67
|
+
|
|
68
|
+
<!-- Input -->
|
|
69
|
+
<input type="text" class="input" placeholder="Enter text...">
|
|
70
|
+
|
|
71
|
+
<!-- CSS-only modal โ no JavaScript -->
|
|
72
|
+
<button popovertarget="modal" class="btn btn-primary">Open</button>
|
|
73
|
+
<dialog id="modal" popover class="modal">
|
|
74
|
+
<div class="modal-content">
|
|
75
|
+
<h3 class="heading-lg">Modal title</h3>
|
|
76
|
+
<button popovertarget="modal" class="btn mt-4">Close</button>
|
|
77
|
+
</div>
|
|
78
|
+
</dialog>
|
|
79
|
+
```
|
|
80
|
+
|
|
81
|
+
---
|
|
82
|
+
|
|
83
|
+
## Plugin Options
|
|
84
|
+
|
|
85
|
+
```css
|
|
86
|
+
@plugin "frutjam" {
|
|
87
|
+
prefix: fj; /* fj-btn, fj-card, etc. */
|
|
88
|
+
reset: true; /* browser reset (default: true) */
|
|
89
|
+
}
|
|
90
|
+
```
|
|
91
|
+
|
|
92
|
+
---
|
|
93
|
+
|
|
94
|
+
## ๐ Cherry MCP โ Stop AI from hallucinating class names
|
|
95
|
+
|
|
96
|
+
Cherry is a free MCP server that gives Claude Code, Cursor, and VS Code accurate real-time Frutjam docs โ no more invented class names.
|
|
97
|
+
|
|
98
|
+
```json
|
|
99
|
+
{
|
|
100
|
+
"mcpServers": {
|
|
101
|
+
"frutjam": {
|
|
102
|
+
"command": "npx",
|
|
103
|
+
"args": ["-y", "frutjam-cherry"]
|
|
104
|
+
}
|
|
105
|
+
}
|
|
106
|
+
}
|
|
107
|
+
```
|
|
108
|
+
|
|
109
|
+
[**Get Cherry โ**](https://frutjam.com/products/cherry)
|
|
110
|
+
|
|
111
|
+
---
|
|
112
|
+
|
|
113
|
+
## Links
|
|
114
|
+
|
|
115
|
+
- [Full documentation](https://frutjam.com/docs)
|
|
116
|
+
- [All 65+ components](https://frutjam.com/components)
|
|
117
|
+
- [UI Blocks](https://frutjam.com/blocks)
|
|
118
|
+
- [Themes](https://frutjam.com/docs/themes)
|
|
119
|
+
- [GitHub](https://github.com/nezanuha/frutjam)
|
|
120
|
+
- [Discord](https://discord.gg/FvjytjQSSZ)
|
|
121
|
+
|
|
122
|
+
## License
|
|
123
|
+
|
|
124
|
+
MIT
|