Docs
Docs
Colors
Frutjam's color system is built on semantic tokens that adapt across light and dark themes. Customize your palette using CSS custom properties and choose from base, primary, and accent scales. Every color is designed to meet WCAG AA contrast ratios out of the box.
Overview
Frutjam is a standards-first UI component library built for accessibility, performance, and clean HTML. Install the package, add the plugin to your Tailwind config, and start building with semantic, WCAG-compliant components designed to scale with your project.
Themes
Frutjam's theming system lets you switch between light, dark, and custom themes using CSS variables and a single data attribute. Extend or override any token directly in your stylesheet without JavaScript or a build step, and ship polished on-brand interfaces with ease.
Installation
Install Frutjam in minutes by adding the package and registering the plugin in your Tailwind config. Works with any Tailwind CSS project and supports the prefix system so you can integrate it alongside existing styles without conflicts or breaking changes.
Configuration
Configure Frutjam to match your project's exact needs. The Tailwind plugin exposes options for setting default themes, defining custom color tokens, toggling the prefix system, and controlling which components are included so your output stays lean and intentional.
Typography
Frutjam's typography system provides a consistent scale for headings, body text, and supporting sizes. Built on semantic HTML elements and CSS custom properties, it ensures readable, accessible text across all screen sizes and adapts seamlessly to your chosen theme.