Framework UI modern yang lebih baik dari Bootstrap dengan 120+ komponen, dark mode, dan performa tinggi untuk aplikasi web masa depan.
ferzui adalah framework UI modern yang dirancang untuk memberikan pengalaman development yang lebih baik dari Bootstrap. Dengan 120+ komponen yang dapat disesuaikan, sistem design yang konsisten, dan performa yang optimal.
Optimized CSS dengan tree-shaking dan lazy loading untuk performa maksimal.
Design system yang konsisten dengan glassmorphism dan gradient effects.
WCAG AA compliant dengan keyboard navigation dan screen reader support.
Mulai menggunakan ferzui dalam hitungan menit dengan salah satu cara berikut:
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My ferzui App</title>
<!-- ferzui CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ferzui@latest/dist/ferzui.css">
</head>
<body>
<!-- Your content here -->
<button class="btn btn-primary">Hello ferzui!</button>
<!-- ferzui JS -->
<script src="https://cdn.jsdelivr.net/npm/ferzui@latest/dist/ferzui.js"></script>
</body>
</html># Install ferzui
npm install ferzui
# Or with yarn
yarn add ferzui
# Or with pnpm
pnpm add ferzui// Import CSS
import 'ferzui/dist/ferzui.css';
// Import JavaScript (optional)
import 'ferzui/dist/ferzui.js';
// Or import specific components
import { Modal, Dropdown } from 'ferzui';Download file CSS dan JavaScript langsung dari GitHub:
# CSS
https://github.com/FerzDevZ/ferzui/releases/latest/download/ferzui.css
# JavaScript
https://github.com/FerzDevZ/ferzui/releases/latest/download/ferzui.js
# Or clone the repository
git clone https://github.com/FerzDevZ/ferzui.gitSetelah instalasi, Anda bisa langsung menggunakan komponen ferzui:
<button class="btn btn-primary">Primary Button</button>
<button class="btn btn-secondary">Secondary Button</button>
<button class="btn btn-outline">Outline Button</button><div class="card">
<div class="card-header">
<h4>Card Title</h4>
</div>
<div class="card-body">
<p>This is a basic card component.</p>
<button class="btn btn-primary">Action</button>
</div>
</div>This is a basic card component.