@jotaksantos/frostui-v4
v4.0.1
Published
FrostUI v4 - Component library built upon Tailwind CSS v4 with 100% backward compatibility
Maintainers
jotaksantosReadme
@jotaksantos/frostui-v4
🚀 FrostUI v4 - Component library built upon Tailwind CSS v4 with 100% backward compatibility
✨ Key Features
- 🎯 100% Backward Compatible - Zero breaking changes from FrostUI v3
- ⚡ Tailwind CSS v4 - Latest version with improved performance
- 🔄 Data Attributes - Keep using your existing
data-fc-typesyntax - 🆕 Modern API - Optional programmatic JavaScript API
- 📱 All Components - Modal, Offcanvas, Dropdown, Collapse, Tab, Accordion, Tooltip
- 🎨 Theme Support - Built-in dark/light theme switching
🚀 Quick Start
Installation
npm install @jotaksantos/frostui-v4Basic Usage (100% Compatible with v3)
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="node_modules/@jotaksantos/frostui-v4/dist/styles.css">
</head>
<body>
<!-- Your existing FrostUI v3 code works without changes! -->
<button data-fc-target="my-modal" data-fc-type="modal">Show Modal</button>
<button data-fc-target="my-dropdown" data-fc-type="dropdown">Show Dropdown</button>
<button data-fc-target="my-collapse" data-fc-type="collapse">Toggle Collapse</button>
<!-- Components are auto-initialized -->
<script src="node_modules/@jotaksantos/frostui-v4/dist/frostui.umd.cjs"></script>
</body>
</html>🔄 Migration from FrostUI v3
Zero breaking changes! Just update your imports:
Before (v3):
<script src="node_modules/@frostui/tailwindcss/dist/frostui.js"></script>After (v4):
<script src="node_modules/@jotaksantos/frostui-v4/dist/frostui.umd.cjs"></script>That's it! Your HTML code remains exactly the same.
🆕 New Features (Optional)
Modern ES Modules
import { Modal, Offcanvas, Dropdown, Collapse } from '@jotaksantos/frostui-v4'
const modal = new Modal('#my-modal')
modal.show()Programmatic API
// Works alongside data attributes
const modal = new frost.Modal('#my-modal')
modal.show()
modal.hide()
modal.toggle()
const offcanvas = new frost.Offcanvas('#my-offcanvas')
offcanvas.show()🎯 Components
All components support both data attributes (v3 compatible) and programmatic usage:
| Component | Data Attribute | Class |
|---|---|---|
| Modal | data-fc-type="modal" | Modal |
| Offcanvas | data-fc-type="offcanvas" | Offcanvas |
| Dropdown | data-fc-type="dropdown" | Dropdown |
| Collapse | data-fc-type="collapse" | Collapse |
| Tab | data-fc-type="tab" | Tab |
| Accordion | data-fc-type="accordion" | Accordion |
| Tooltip | data-fc-type="tooltip" | Tooltip |
⚙️ Tailwind CSS v4 Configuration
Install Tailwind CSS v4
npm install tailwindcss@^4.1.13 @tailwindcss/vite@^4.1.13Add to your tailwind.config.js:
import frostuiPlugin from "@jotaksantos/frostui-v4/plugin"
export default {
content: [
"./src/**/*.{html,js,ts,jsx,tsx}",
"./node_modules/@jotaksantos/frostui-v4/**/*.js",
],
plugins: [
frostuiPlugin({ colors: true }), // Enable FrostUI color palette
],
}Add to your CSS:
@import "tailwindcss";🎨 Examples
Modal
<button data-fc-target="example-modal" data-fc-type="modal">
Show Modal
</button>
<div id="example-modal" class="fc-modal fixed inset-0 z-50 hidden">
<div class="fc-modal-backdrop fixed inset-0 bg-gray-900 bg-opacity-50"></div>
<div class="fc-modal-content relative z-10 mx-auto mt-20 max-w-md bg-white rounded-lg">
<div class="p-6">
<h3 class="text-lg font-semibold">Modal Title</h3>
<p class="text-gray-600 mt-2">Modal content here...</p>
<button data-fc-dismiss="modal" class="mt-4 px-4 py-2 bg-blue-600 text-white rounded">
Close
</button>
</div>
</div>
</div>Dropdown
<button data-fc-target="example-dropdown" data-fc-type="dropdown">
Show Dropdown
</button>
<div id="example-dropdown" class="fc-dropdown bg-white border rounded-lg shadow-lg hidden">
<a href="#" class="block px-4 py-2 hover:bg-gray-100">Action 1</a>
<a href="#" class="block px-4 py-2 hover:bg-gray-100">Action 2</a>
<a href="#" class="block px-4 py-2 hover:bg-gray-100">Action 3</a>
</div>📦 What's Included
dist/frostui.umd.cjs- UMD build for browser<script>tagsdist/frostui.js- ES Module build for modern bundlersdist/index.d.ts- TypeScript definitionsplugin.js- Tailwind CSS v4 plugin
🔗 Links
📝 License
MIT License - feel free to use in your projects!
🤝 Credits
Based on the original FrostUI library. Updated to Tailwind CSS v4 with full backward compatibility maintained.
Need help migrating? Check out our detailed migration guide with examples and step-by-step instructions!