Learn how to include Argonzen UI in your project and start building elegant enterprise applications.
Argonzen uses CSS for its visual system and a small vanilla JavaScript runtime for interactive combobox, multiselect, and pagination table components. Load both files after Bootstrap when you need the interactive controls.
<!-- Bootstrap 5 CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Bootstrap Icons (Optional but recommended) -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
<!-- Argonzen Core Styles -->
<link rel="stylesheet" href="argonzen.css">
<!-- Argonzen Component Runtime -->
<script src="argonzen.js" defer></script>Copy and paste this basic HTML skeleton to start your project. We recommend setting the body background to #F4F6F3 for the best visual experience.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Argonzen App</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="argonzen.css">
<style>
body { background-color: #F4F6F3; }
</style>
</head>
<body>
<div class="container py-5">
<h1 class="ar-h1 text-primary">Hello, Argonzen!</h1>
<button class="ar-btn ar-btn-primary">Click Me</button>
</div>
<script src="argonzen.js" defer></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>Argonzen components strictly use the .ar-* namespace to prevent conflicts. Here is an example of a Complex Card.
Card with header and footer. Good for separating actions from content.
<div class="ar-card">
<div class="ar-card-header fw-medium">Complex Card</div>
<div class="ar-card-body">
<p class="ar-text-secondary small mb-0">Card with header and footer...</p>
</div>
<div class="ar-card-footer d-flex justify-content-end gap-2">
<button class="ar-btn ar-btn-sm ar-btn-outline-secondary">Cancel</button>
<button class="ar-btn ar-btn-sm ar-btn-primary">Save</button>
</div>
</div>Add data-ar-pagination to a table and Argonzen will render lightweight client-side pagination without DataTables.
<table class="ar-table" data-ar-pagination data-page-size="10">
<thead>
<tr><th>Name</th><th>Status</th></tr>
</thead>
<tbody>
<tr><td>Example project</td><td>Active</td></tr>
</tbody>
</table>
<div class="ar-table-footer" data-ar-table-footer></div>