frutjam 2.2.3 → 2.2.5

package/README.github.md

@@ -0,0 +1,330 @@
+[![npm installs][npm_installs]](https://www.npmjs.com/package/frutjam)
+[![Jsdelivr hits][jsdelivr]](https://cdn.jsdelivr.net/npm/frutjam)
+[![Latest Release](https://img.shields.io/npm/v/frutjam.svg)](https://github.com/nezanuha/frutjam/releases)
+[![License](https://img.shields.io/npm/l/frutjam.svg)](https://github.com/nezanuha/frutjam/blob/master/LICENSE)
+[![Secured](https://img.shields.io/badge/Security-Passed-green)](https://snyk.io/test/github/nezanuha/frutjam)
+
+---
+
+# Frutjam — CSS-Only Tailwind CSS UI Component Library
+
+**Frutjam** is a free, open-source Tailwind CSS v4 component library. 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.
+
+🌐 **[frutjam.com](https://frutjam.com)** · 📦 **[npm](https://www.npmjs.com/package/frutjam)** · 🍒 **[Cherry MCP](https://frutjam.com/products/cherry)**
+
+---
+
+## What is Frutjam?
+
+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.
+
+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.
+
+---
+
+## Quick Install
+
+```bash
+npm install -D frutjam
+```
+
+```css
+@import "tailwindcss";
+@plugin "frutjam";
+```
+
+**That's it.** All 65+ components are available immediately. No imports, no config, no extra stylesheets.
+
+---
+
+## Why Frutjam?
+
+| | Frutjam | DaisyUI | Shadcn UI | Flowbite |
+|---|---|---|---|---|
+| Zero JavaScript | ✅ | ✅ | ❌ React required | ⚠️ Some JS |
+| Tailwind v4 native | ✅ | ⚠️ v3 + v4 | ⚠️ | ❌ |
+| WCAG AA guaranteed | ✅ Every component | ⚠️ | ⚠️ | ⚠️ |
+| OKLCH color system | ✅ | ❌ | ❌ | ❌ |
+| MCP server for AI editors | ✅ Cherry (free tier) | ✅ Blueprint (paid only) | ❌ | ❌ |
+| Framework-agnostic | ✅ | ✅ | ❌ React only | ⚠️ |
+| Copy-paste friendly | ✅ | ✅ | ✅ | ✅ |
+| MIT license | ✅ | ✅ | ✅ | ✅ |
+
+**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.
+
+---
+
+## Key Features
+
+- **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.
+- **65+ components** — buttons, modals, tabs, drawers, tooltips, carousels, cards, alerts, toasts, tables, forms, and more. All production-ready.
+- **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.
+- **Tailwind v4 native** — built as a Tailwind v4 plugin using `@plugin`. No legacy `tailwind.config.js`. OKLCH design tokens via CSS custom properties.
+- **Framework-agnostic** — works with React, Next.js, Vue, Nuxt, Svelte, HTMX, Django, Laravel Blade, Astro, Rails, plain HTML — anything that outputs HTML.
+- **Themeable** — swap themes with `data-theme="dark"`. Build custom themes in CSS with OKLCH tokens. Supports light, dark, and system preference automatically.
+- **Treeshaken** — only the components you use are included. Tailwind's engine removes unused styles at build time.
+- **CDN-ready** — no build step needed. Import directly from jsDelivr.
+
+---
+
+## 🍒 Cherry MCP — AI Editor Integration
+
+Cherry is Frutjam's **free MCP server** that gives AI coding assistants accurate, real-time access to Frutjam component docs.
+
+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.
+
+**Works with:** Claude Code · Cursor · VS Code · Windsurf · Zed · Cline · any MCP-compatible editor
+
+```json
+{
+  "mcpServers": {
+    "frutjam": {
+      "command": "npx",
+      "args": ["-y", "frutjam-cherry"]
+    }
+  }
+}
+```
+
+[**Get Cherry MCP →**](https://frutjam.com/products/cherry)
+
+---
+
+## Components
+
+65+ free, production-ready CSS-only Tailwind CSS components:
+
+### Inputs & Forms
+- [Button](https://frutjam.com/components/button)
+- [Checkbox](https://frutjam.com/components/checkbox)
+- [Radio](https://frutjam.com/components/radio)
+- [Toggle](https://frutjam.com/components/toggle)
+- [Input](https://frutjam.com/components/input)
+- [Textarea](https://frutjam.com/components/textarea)
+- [Select](https://frutjam.com/components/select)
+- [Range](https://frutjam.com/components/range)
+- [Rating](https://frutjam.com/components/rating)
+- [Combobox](https://frutjam.com/components/combobox)
+
+### Layout & Navigation
+- [Navbar](https://frutjam.com/components/navbar)
+- [Sidebar](https://frutjam.com/components/sidebar)
+- [Drawer](https://frutjam.com/components/drawer)
+- [Menu](https://frutjam.com/components/menu)
+- [Breadcrumb](https://frutjam.com/components/breadcrumb)
+- [Tabs](https://frutjam.com/components/tabs)
+- [Steps](https://frutjam.com/components/steps)
+- [Footer](https://frutjam.com/components/footer)
+- [Header](https://frutjam.com/components/header)
+- [Join](https://frutjam.com/components/join)
+- [Pagination](https://frutjam.com/components/pagination)
+
+### Feedback & Overlay
+- [Modal](https://frutjam.com/components/modal)
+- [Toast](https://frutjam.com/components/toast)
+- [Alert](https://frutjam.com/components/alert)
+- [Tooltip](https://frutjam.com/components/tooltip)
+- [Popover](https://frutjam.com/components/popover)
+- [Loading](https://frutjam.com/components/loading)
+- [Skeleton](https://frutjam.com/components/skeleton)
+- [Progress](https://frutjam.com/components/progress)
+- [Radial Progress](https://frutjam.com/components/radial-progress)
+
+### Data Display
+- [Card](https://frutjam.com/components/card)
+- [Table](https://frutjam.com/components/table)
+- [Stat](https://frutjam.com/components/stat)
+- [Badge](https://frutjam.com/components/badge)
+- [Tag](https://frutjam.com/components/tag)
+- [Avatar](https://frutjam.com/components/avatar)
+- [Indicator](https://frutjam.com/components/indicator)
+- [Diff](https://frutjam.com/components/diff)
+- [Timeline](https://frutjam.com/components/timeline)
+- [Chat](https://frutjam.com/components/chat)
+
+### Typography & Decoration
+- [Hero](https://frutjam.com/components/hero)
+- [Divider](https://frutjam.com/components/divider)
+- [Kbd](https://frutjam.com/components/kbd)
+- [Link](https://frutjam.com/components/link)
+- [Mask](https://frutjam.com/components/mask)
+- [Swap](https://frutjam.com/components/swap)
+- [Countdown](https://frutjam.com/components/countdown)
+- [Marquee](https://frutjam.com/components/marquee)
+- [Carousel](https://frutjam.com/components/carousel)
+- [Accordion](https://frutjam.com/components/accordion)
+- [Collapsible](https://frutjam.com/components/collapsible)
+- [Surface](https://frutjam.com/components/surface)
+
+[**Browse all components with live previews →**](https://frutjam.com/components)
+
+---
+
+## Usage Examples
+
+```html
+<!-- Primary button -->
+<button class="btn btn-primary">Get Started</button>
+
+<!-- Outline button with badge -->
+<button class="btn btn-outline">
+  Notifications
+  <span class="badge badge-primary">3</span>
+</button>
+
+<!-- CSS-only modal — no JavaScript -->
+<button popovertarget="my-modal" class="btn btn-primary">Open Modal</button>
+<dialog id="my-modal" popover class="modal">
+  <div class="modal-content">
+    <h3 class="heading-lg">Pure CSS modal</h3>
+    <p class="para">Zero JavaScript. Native browser popover API.</p>
+    <button popovertarget="my-modal" class="btn mt-4">Close</button>
+  </div>
+</dialog>
+
+<!-- Alert -->
+<div class="alert alert-success">
+  <p>Your changes have been saved.</p>
+</div>
+
+<!-- Card -->
+<div class="card">
+  <div class="card-content">
+    <h2 class="heading-lg">Card title</h2>
+    <p class="para">Card content goes here.</p>
+  </div>
+</div>
+
+<!-- Input -->
+<div class="flex flex-col gap-2">
+  <label class="text-sm font-medium">Email</label>
+  <input type="email" class="input" placeholder="you@example.com">
+</div>
+
+<!-- Badge variants -->
+<span class="badge badge-primary">Primary</span>
+<span class="badge badge-success badge-soft">Success</span>
+<span class="badge badge-error badge-outline">Error</span>
+```
+
+---
+
+## Accessibility
+
+Frutjam is designed for WCAG AA compliance from the ground up:
+
+- **Color contrast** — every color token pair is hand-tuned in OKLCH to exceed WCAG AA 4.5:1 contrast ratio for text
+- **Semantic HTML** — native `<dialog>` for modals, `<details>` for accordions, `<nav>` for navigation, correct heading hierarchy
+- **Keyboard navigation** — all interactive components are fully keyboard accessible
+- **Screen reader support** — ARIA attributes included where native semantics are insufficient
+- **Focus management** — visible focus rings on all interactive elements, respects `prefers-reduced-motion`
+
+---
+
+## Themes
+
+```html
+<html data-theme="darkberry">
+```
+
+```css
+/* Define your own theme */
+@layer theme {
+  [data-theme="ocean"] {
+    --color-primary: oklch(60% 0.2 220);
+    --color-on-primary: oklch(98% 0.01 220);
+    --color-base: oklch(15% 0.02 220);
+    --color-on-base: oklch(92% 0.01 220);
+  }
+}
+```
+
+[**Explore themes →**](https://frutjam.com/themes)
+
+---
+
+## Plugin Options
+
+| Option | Default | Description |
+|--------|---------|-------------|
+| `prefix` | `""` | Prefix all Frutjam class names (e.g. `fj` → `fj-btn`) |
+| `reset` | `true` | Include browser reset and element defaults |
+| `root` | `":root"` | Remap CSS variable declarations to a custom selector |
+| `logs` | `true` | Show build-time console output |
+| `include` | `[]` | Include only specific components |
+| `exclude` | `[]` | Exclude specific components |
+
+---
+
+## CDN (No Build Step)
+
+```html
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/frutjam/dist/frutjam.min.css" />
+```
+
+---
+
+## Framework Support
+
+| Framework | Status |
+|-----------|--------|
+| HTML / Static sites | ✅ |
+| React / Next.js | ✅ |
+| Vue / Nuxt | ✅ |
+| Svelte / SvelteKit | ✅ |
+| HTMX | ✅ |
+| Django | ✅ |
+| Laravel / Blade | ✅ |
+| Astro | ✅ |
+| Ruby on Rails | ✅ |
+| Any HTML output | ✅ |
+
+---
+
+## Documentation
+
+- [Getting Started](https://frutjam.com/docs/overview)
+- [Installation Guide](https://frutjam.com/docs/installation)
+- [Configuration](https://frutjam.com/docs/configuration)
+- [Theming](https://frutjam.com/docs/themes)
+- [Colors](https://frutjam.com/docs/colors)
+- [All Components](https://frutjam.com/components)
+- [UI Blocks](https://frutjam.com/blocks)
+- [Cherry MCP](https://frutjam.com/products/cherry)
+
+---
+
+## Community
+
+- [Discord](https://discord.gg/FvjytjQSSZ)
+- [X / Twitter](https://x.com/FrutjamUI)
+- [Write for Us](https://frutjam.com/write-for-us)
+
+---
+
+## Contributing
+
+1. Fork the repository
+2. Create a feature branch: `git checkout -b feature/my-component`
+3. Commit your changes: `git commit -m 'Add my-component'`
+4. Push: `git push origin feature/my-component`
+5. Open a Pull Request
+
+---
+
+## License
+
+MIT — free for personal and commercial use. See [LICENSE](LICENSE).
+
+---
+
+## ⭐ Star this repo
+
+If Frutjam saves you time, a star helps others find it.
+
+[![GitHub stars](https://img.shields.io/github/stars/nezanuha/frutjam.svg?style=social&label=Star&maxAge=2592000)](https://github.com/nezanuha/frutjam)
+
+---
+
+[jsdelivr]: https://badgen.net/jsdelivr/hits/npm/frutjam
+[npm_installs]: https://badgen.net/npm/dt/frutjam

package/README.md

@@ -1,172 +1,110 @@
-[![npm installs][npm_installs]](https://www.npmjs.com/package/frutjam)
-[![Jsdelivr hits][jsdelivr]](https://cdn.jsdelivr.net/npm/frutjam)
-[![Latest Release](https://img.shields.io/npm/v/frutjam.svg)](https://github.com/nezanuha/frutjam/releases)
-[![License](https://img.shields.io/npm/l/frutjam.svg)](https://github.com/nezanuha/frutjam/blob/master/LICENSE)
-[![Secured](https://img.shields.io/badge/Security-Passed-green)](https://snyk.io/test/github/nezanuha/frutjam)
+# Frutjam
 
----
-
-# Frutjam: Free & Open-Source Tailwind CSS UI Library
-
-[Frutjam](https://frutjam.com) is a lightweight, modern UI library built for speed. It provides prebuilt Tailwind CSS components that are completely free to use — pure CSS, no JavaScript required. Works with Vite, PostCSS, Next.js, or any framework.
-
-[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
-[![GitHub stars](https://img.shields.io/github/stars/nezanuha/frutjam.svg)](https://github.com/nezanuha/frutjam/stargazers)
-
-## Pure CSS, no JavaScript needed. Framework-agnostic and fully compatible everywhere.
-
-**Frutjam** is a UI component library built on top of **Tailwind CSS**, designed to help developers build accessible, SEO-friendly, and W3C-compliant interfaces—fast. With a wide selection of prebuilt components and themes, Frutjam makes it easy to hit the ground running or fully customize your design system.
-
----
-
-## Key Features
+CSS-only Tailwind CSS v4 component library. 65+ accessible, copy-paste UI components — zero JavaScript, WCAG AA guaranteed, framework-agnostic.
 
-* 🧱 **Prebuilt UI Components** — Plug-and-play components to save time
-* 🎨 **Customizable Themes** — Built-in themes plus custom theme injection
-* 🏷️ **Flexible Prefix Support** — Use Frutjam’s own prefix (`fj-btn`), Tailwind’s variant prefix (`tw:btn`), or both together (`tw:fj-btn`)
-* ♿ **Accessibility-First** — Follows accessibility best practices
-* 🔍 **SEO-Friendly** — Semantic markup optimized for search engines
-* ✅ **W3C Standards** — Clean, valid HTML structure
-* ⚙️ **Built for Tailwind CSS** — Seamless integration with your Tailwind setup
+**[frutjam.com](https://frutjam.com)** · [Components](https://frutjam.com/components) · [Docs](https://frutjam.com/docs) · [Cherry MCP](https://frutjam.com/products/cherry)
 
 ---
 
-## Installation & Usage
+## Install
 
 ```bash
-npm install frutjam
+npm install -D frutjam
 ```
 
-In your main stylesheet:
-
 ```css
 @import "tailwindcss";
 @plugin "frutjam";
 ```
 
-## Basic Example
-
-```html
-<button class="btn btn-primary">
-  Launch App
-</button>
-```
-
-## With Prefix
+That's it. All 65+ components available immediately.
 
-**Frutjam prefix only** — renames Frutjam class names:
+---
 
-```css
-@import "tailwindcss";
-@plugin "frutjam" {
-  prefix: fj;
-}
-```
+## CDN
 
 ```html
-<button class="fj-btn fj-btn-primary">Launch App</button>
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/frutjam/dist/frutjam.min.css" />
 ```
 
-**Tailwind prefix only** — Tailwind's `prefix()` acts as a variant; all utilities (including Frutjam's) require it in HTML:
+---
 
-```css
-@import "tailwindcss" prefix(tw);
-@plugin "frutjam";
-```
+## Usage
 
 ```html
-<button class="tw:btn tw:btn-primary">Launch App</button>
+<!-- Button -->
+<button class="btn btn-primary">Get Started</button>
+<button class="btn btn-outline">Cancel</button>
+
+<!-- Badge -->
+<span class="badge badge-success">Active</span>
+<span class="badge badge-error badge-soft">Error</span>
+
+<!-- Alert -->
+<div class="alert alert-success">Saved successfully.</div>
+
+<!-- Card -->
+<div class="card">
+  <div class="card-content">
+    <h2 class="heading-lg">Title</h2>
+    <p class="para">Content goes here.</p>
+  </div>
+</div>
+
+<!-- Input -->
+<input type="text" class="input" placeholder="Enter text...">
+
+<!-- CSS-only modal — no JavaScript -->
+<button popovertarget="modal" class="btn btn-primary">Open</button>
+<dialog id="modal" popover class="modal">
+  <div class="modal-content">
+    <h3 class="heading-lg">Modal title</h3>
+    <button popovertarget="modal" class="btn mt-4">Close</button>
+  </div>
+</dialog>
 ```
 
-**Both prefixes** — Frutjam renames its classes, Tailwind's variant prefix is required on top:
+---
+
+## Plugin Options
 
 ```css
-@import "tailwindcss" prefix(tw);
 @plugin "frutjam" {
-  prefix: fj;
+  prefix: fj;    /* fj-btn, fj-card, etc. */
+  reset: true;   /* browser reset (default: true) */
 }
 ```
 
-```html
-<button class="tw:fj-btn tw:fj-btn-primary">Launch App</button>
-```
-
-## Plugin Options
-
-All options can be set in CSS via `@plugin "frutjam" { ... }` or in `postcss.config.js`:
-
-| Option | Default | Description |
-|--------|---------|-------------|
-| `prefix` | `""` | Prefix all Frutjam class names (e.g. `fj` → `fj-btn`) |
-| `reset` | `true` | Include browser reset and element defaults |
-| `root` | `":root"` | Remap CSS var declarations to a custom selector (e.g. `":host"`) |
-| `logs` | `true` | Show build-time console output |
-| `include` | `[]` | Only include specific components/utilities |
-| `exclude` | `[]` | Exclude specific components/utilities |
+---
 
-## Custom Themes
+## 🍒 Cherry MCP — Stop AI from hallucinating class names
 
-Define themes directly in your stylesheet using `@layer theme`:
+Cherry is a free MCP server that gives Claude Code, Cursor, and VS Code accurate real-time Frutjam docs — no more invented class names.
 
-```css
-@layer theme {
-  [data-theme="blueberry"] {
-    --scheme-color: light;
-    --color-primary: oklch(60% 0.2 220);
-    --color-on-primary: oklch(98% 0.01 220);
-    --color-base: oklch(98% 0.01 220);
-    --color-on-base: oklch(20% 0.02 220);
+```json
+{
+  "mcpServers": {
+    "frutjam": {
+      "command": "npx",
+      "args": ["-y", "frutjam-cherry"]
+    }
   }
 }
 ```
 
-Apply any theme with a `data-theme` attribute:
-
-```html
-<body data-theme="blueberry">
-  ...
-</body>
-```
-
-That’s it — you’re ready to build with Frutjam components!
-
----
-
-## Live Demo & Documentation
-
-For full documentation and live interactive previews, visit our official site: 👉 **[frutjam](https://frutjam.com/docs)**
-
----
-
-## 🤝 Contributing
-
-Contributions are what make the open-source community such an amazing place to learn, inspire, and create. Any contributions you make are **greatly appreciated**.
-
-1. Fork the repo
-2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
-3. Commit your Changes (git commit -m 'Add some AmazingFeature')
-4. Push to the Branch (git push origin feature/AmazingFeature)
-5. Open a Pull Request
-
-Please check the [contributing guidelines](.github/CONTRIBUTING.md) before starting.
+[**Get Cherry →**](https://frutjam.com/products/cherry)
 
 ---
 
-## 📄 License
+## Links
 
-Distributed under the MIT License. See [MIT License](LICENSE) for more information.
+- [Full documentation](https://frutjam.com/docs)
+- [All 65+ components](https://frutjam.com/components)
+- [UI Blocks](https://frutjam.com/blocks)
+- [Themes](https://frutjam.com/docs/themes)
+- [GitHub](https://github.com/nezanuha/frutjam)
+- [Discord](https://discord.gg/FvjytjQSSZ)
 
----
-
-Thank you for choosing the Frutjam UI Library – Happy coding!
-
-## ⭐ Support
-
-If you like this project, consider giving it a star! 🌟
-
-[![GitHub stars](https://img.shields.io/github/stars/nezanuha/frutjam.svg?style=social&label=Star&maxAge=2592000)](https://github.com/nezanuha/frutjam/stargazers)
-
----
+## License
 
-[jsdelivr]: https://badgen.net/jsdelivr/hits/npm/frutjam
-[npm_installs]: https://badgen.net/npm/dt/frutjam
+MIT

package/README.npm.md

@@ -0,0 +1,110 @@
+# Frutjam
+
+CSS-only Tailwind CSS v4 component library. 65+ accessible, copy-paste UI components — zero JavaScript, WCAG AA guaranteed, framework-agnostic.
+
+**[frutjam.com](https://frutjam.com)** · [Components](https://frutjam.com/components) · [Docs](https://frutjam.com/docs) · [Cherry MCP](https://frutjam.com/products/cherry)
+
+---
+
+## Install
+
+```bash
+npm install -D frutjam
+```
+
+```css
+@import "tailwindcss";
+@plugin "frutjam";
+```
+
+That's it. All 65+ components available immediately.
+
+---
+
+## CDN
+
+```html
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/frutjam/dist/frutjam.min.css" />
+```
+
+---
+
+## Usage
+
+```html
+<!-- Button -->
+<button class="btn btn-primary">Get Started</button>
+<button class="btn btn-outline">Cancel</button>
+
+<!-- Badge -->
+<span class="badge badge-success">Active</span>
+<span class="badge badge-error badge-soft">Error</span>
+
+<!-- Alert -->
+<div class="alert alert-success">Saved successfully.</div>
+
+<!-- Card -->
+<div class="card">
+  <div class="card-content">
+    <h2 class="heading-lg">Title</h2>
+    <p class="para">Content goes here.</p>
+  </div>
+</div>
+
+<!-- Input -->
+<input type="text" class="input" placeholder="Enter text...">
+
+<!-- CSS-only modal — no JavaScript -->
+<button popovertarget="modal" class="btn btn-primary">Open</button>
+<dialog id="modal" popover class="modal">
+  <div class="modal-content">
+    <h3 class="heading-lg">Modal title</h3>
+    <button popovertarget="modal" class="btn mt-4">Close</button>
+  </div>
+</dialog>
+```
+
+---
+
+## Plugin Options
+
+```css
+@plugin "frutjam" {
+  prefix: fj;    /* fj-btn, fj-card, etc. */
+  reset: true;   /* browser reset (default: true) */
+}
+```
+
+---
+
+## 🍒 Cherry MCP — Stop AI from hallucinating class names
+
+Cherry is a free MCP server that gives Claude Code, Cursor, and VS Code accurate real-time Frutjam docs — no more invented class names.
+
+```json
+{
+  "mcpServers": {
+    "frutjam": {
+      "command": "npx",
+      "args": ["-y", "frutjam-cherry"]
+    }
+  }
+}
+```
+
+[**Get Cherry →**](https://frutjam.com/products/cherry)
+
+---
+
+## Links
+
+- [Full documentation](https://frutjam.com/docs)
+- [All 65+ components](https://frutjam.com/components)
+- [UI Blocks](https://frutjam.com/blocks)
+- [Themes](https://frutjam.com/docs/themes)
+- [GitHub](https://github.com/nezanuha/frutjam)
+- [Discord](https://discord.gg/FvjytjQSSZ)
+
+## License
+
+MIT