https://github.com/nezanuha/frutjam
A standards-first, CSS-only UI library built on Tailwind CSS. No JS bundles, no layout shift, WCAG accessible out of the box.
https://github.com/nezanuha/frutjam
css-components css-framework design-system frontend frontend-library open-source responsive-design tailwind tailwind-css ui-kit ui-library web-development
Last synced: 12 days ago
JSON representation
A standards-first, CSS-only UI library built on Tailwind CSS. No JS bundles, no layout shift, WCAG accessible out of the box.
- Host: GitHub
- URL: https://github.com/nezanuha/frutjam
- Owner: nezanuha
- License: mit
- Created: 2024-04-17T20:39:28.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2026-06-06T23:04:44.000Z (12 days ago)
- Last Synced: 2026-06-07T00:17:18.471Z (12 days ago)
- Topics: css-components, css-framework, design-system, frontend, frontend-library, open-source, responsive-design, tailwind, tailwind-css, ui-kit, ui-library, web-development
- Language: HTML
- Homepage: https://frutjam.com
- Size: 1.37 MB
- Stars: 5
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: .github/CONTRIBUTING.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
[![npm installs][npm_installs]](https://www.npmjs.com/package/frutjam)
[![Jsdelivr hits][jsdelivr]](https://cdn.jsdelivr.net/npm/frutjam)
[](https://github.com/nezanuha/frutjam/releases)
[](https://github.com/nezanuha/frutjam/blob/master/LICENSE)
[](https://snyk.io/test/github/nezanuha/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.
[](https://opensource.org/licenses/MIT)
[](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
* 🧱 **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
---
## Installation & Usage
```bash
npm install frutjam
```
In your main stylesheet:
```css
@import "tailwindcss";
@plugin "frutjam";
```
## Basic Example
```html
Launch App
```
## With Prefix
**Frutjam prefix only** — renames Frutjam class names:
```css
@import "tailwindcss";
@plugin "frutjam" {
prefix: fj;
}
```
```html
Launch App
```
**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";
```
```html
Launch App
```
**Both prefixes** — Frutjam renames its classes, Tailwind's variant prefix is required on top:
```css
@import "tailwindcss" prefix(tw);
@plugin "frutjam" {
prefix: fj;
}
```
```html
Launch App
```
## 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
Define themes directly in your stylesheet using `@layer theme`:
```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);
}
}
```
Apply any theme with a `data-theme` attribute:
```html
...
```
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.
---
## 📄 License
Distributed under the MIT License. See [MIT License](LICENSE) for more information.
---
Thank you for choosing the Frutjam UI Library – Happy coding!
## ⭐ Support
If you like this project, consider giving it a star! 🌟
[](https://github.com/nezanuha/frutjam/stargazers)
---
[jsdelivr]: https://badgen.net/jsdelivr/hits/npm/frutjam
[npm_installs]: https://badgen.net/npm/dt/frutjam