Installation

Arx is a single CSS file with no build step or dependencies. Link it in your HTML <head> and you're done.

Arx does not bundle jQuery. If you use the companion jQuery plugins, add jQuery separately.

HTML

<link rel="stylesheet" href="path/to/arx.css">

HTML

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

Theming

Add arx-dark to <html> or <body> to activate the dark theme. Toggle it with JavaScript and persist the preference.

HTML

<html class="arx-dark">

JavaScript

$('#toggle-btn').on('click', function () {
    var isDark = $('html').toggleClass('arx-dark').hasClass('arx-dark');
    localStorage.setItem('arx-theme', isDark ? 'dark' : 'light');
});

// Restore on load
if (localStorage.getItem('arx-theme') === 'dark') {
    $('html').addClass('arx-dark');
}

Colors

All colour tokens are CSS custom properties defined on :root (light theme) and overridden on .arx-dark. Every component reads from these variables, so switching themes requires only a class change — no CSS recompile.

Brand & Semantic

Primary

Subtle

Secondary

Subtle

Success

Subtle

Danger

Subtle

Warning

Subtle

Info

Subtle

Surfaces & Backgrounds

--arx-bg

--arx-surface

Raised

--arx-border

Full Token Reference

Token	Light	Dark	Usage
--arx-bg	#ffffff	#070a0e	Page background
--arx-bg-secondary	#f8f9fa	#0c1017	Secondary page bg
--arx-surface	#ffffff	#0c1017	Card / panel bg
--arx-surface-raised	#f1f3f5	#111820	Elevated surface (sidebar, hover)
--arx-border	#dee2e6	#1c2a3a	Default border
--arx-border-focus	#4a9eff	#00c8ff	Focus ring colour
--arx-text	#212529	#a8bfcc	Default body text
--arx-text-secondary	#6c757d	#6b8899	Subdued text
--arx-text-muted	#adb5bd	#3d5568	Placeholder / metadata
--arx-text-inverse	#ffffff	#070a0e	Text on filled backgrounds
--arx-primary	#0d6efd	#00c8ff	Brand accent
--arx-primary-hover	#0b5ed7	#33d4ff	Button hover state
--arx-primary-subtle	#cfe2ff	rgba(0,200,255,.10)	Tinted bg (badges, pills)
--arx-primary-text	#084298	#070a0e	Text on subtle bg
--arx-success	#198754	#00e87a	Positive / confirmed
--arx-danger	#dc3545	#ff4d5e	Destructive / error
--arx-warning	#ffc107	#ffb627	Caution
--arx-info	#0dcaf0	#00c8ff	Informational

Background Utility Classes

.arx-bg-primary

.arx-bg-success

.arx-bg-danger

.arx-bg-warning

.arx-bg-surface

.arx-bg-raised

.arx-bg-body

Text Colour Utility Classes

.arx-text-primary .arx-text-secondary .arx-text-muted .arx-text-success .arx-text-danger .arx-text-warning .arx-text-info

Opacity Utility Classes

100

75

50

25

0

To override a token for a specific component or scope, set it directly in your CSS:

Background utilities

<div class="arx-bg-primary">...</div>
<div class="arx-bg-success">...</div>
<div class="arx-bg-danger">...</div>
<div class="arx-bg-warning">...</div>
<div class="arx-bg-info">...</div>
<div class="arx-bg-secondary">...</div>
<div class="arx-bg-surface">...</div>
<div class="arx-bg-raised">...</div>
<div class="arx-bg-body">...</div>

Text colour utilities

<span class="arx-text-primary">Primary</span>
<span class="arx-text-secondary">Secondary</span>
<span class="arx-text-muted">Muted</span>
<span class="arx-text-success">Success</span>
<span class="arx-text-danger">Danger</span>
<span class="arx-text-warning">Warning</span>
<span class="arx-text-info">Info</span>

Opacity utilities

<div class="arx-opacity-100">...</div>
<div class="arx-opacity-75">...</div>
<div class="arx-opacity-50">...</div>
<div class="arx-opacity-25">...</div>
<div class="arx-opacity-0">...</div>

CSS — token override

.my-component {
  --arx-primary: #7c3aed;        /* purple accent in this scope */
  --arx-primary-subtle: #ede9fe;
}

Grid System

12-column flexbox grid. Wrap columns in .arx-row inside an .arx-container. Columns are full-width by default and snap at named breakpoints.

col-12

col-6

col-4

col-3

col-md-8

col-md-4

col

Breakpoint	Infix	Min-width
Extra small	(none)	0
Small	sm	576px
Medium	md	768px
Large	lg	992px
Extra large	xl	1200px

HTML

<div class="arx-container">
    <div class="arx-row">
        <div class="arx-col-md-8">Main content</div>
        <div class="arx-col-md-4">Sidebar</div>
    </div>
</div>

<!-- Full width on mobile, thirds on md+ -->
<div class="arx-row">
    <div class="arx-col-12 arx-col-md-4">One</div>
    <div class="arx-col-12 arx-col-md-4">Two</div>
    <div class="arx-col-12 arx-col-md-4">Three</div>
</div>

<!-- Equal-width auto columns -->
<div class="arx-row">
    <div class="arx-col">Auto</div>
    <div class="arx-col">Auto</div>
</div>

Stack

.arx-stack is a vertical flex column; .arx-hstack is a horizontal row with centred items. Use gap modifiers to control spacing, and .arx-vr for divider lines inside an hstack.

Step 2 of 4

HTML

<!-- Horizontal stack with divider -->
<div class="arx-hstack arx-hstack-gap-3">
    <button class="arx-btn arx-btn-outline">Back</button>
    <div class="arx-vr"></div>
    <span>Step 2 of 4</span>
    <div class="arx-flex-1"></div>
    <button class="arx-btn arx-btn-primary">Next</button>
</div>

<!-- Vertical stack -->
<div class="arx-stack arx-stack-gap-2">
    <input class="arx-input" placeholder="First name">
    <input class="arx-input" placeholder="Last name">
    <button class="arx-btn arx-btn-primary">Submit</button>
</div>

Typography

Semantic HTML heading tags styled automatically. Use .arx-h1–.arx-h6 utility classes when you need a heading style on a non-heading element.

h1

Display Heading One

h2

Section Heading

h3

Subsection Three

h4

Card Title Four

lead

Larger introductory paragraph text.

body

Regular body text. The quick brown fox jumps over the lazy dog.

muted

De-emphasized secondary text for supplemental context.

code const framework = 'Arx';

quote

Design is not just what it looks like — it's how it works.

HTML

<h1>Display Heading One</h1>
<h2>Section Heading</h2>

<!-- Utility classes apply heading styles to any element -->
<p class="arx-h1">Styled as h1</p>

<p class="arx-lead">Larger intro paragraph.</p>
<p class="arx-muted">De-emphasized text.</p>

<code>const x = 1;</code>

<blockquote>A thoughtful quote.</blockquote>

Figure

Image + caption wrapper. Use .arx-figure-block to make it full-width.

Image placeholder

Fig. 1 — A short description of the image above.

HTML

<figure class="arx-figure">
    <img src="photo.jpg" alt="..." class="arx-figure-img">
    <figcaption class="arx-figure-caption">
        Fig. 1 — Description of the image.
    </figcaption>
</figure>

Tables

Wrap in .arx-table-responsive for horizontal scrolling on small screens.

#	Plugin	Status	Version
1	Framework (Arx)	Stable	`1.0.0`
2	Modal	In Progress	`—`
3	Dropdown	Planned	`—`
4	Tooltip	Planned	`—`

Modifier	Effect
.arx-table-bordered	Border on all cells and outer edge
.arx-table-striped	Alternating row backgrounds
.arx-table-hover	Row highlight on hover
.arx-table-sm	Reduced cell padding
.arx-row-success/danger/warning/info	Row background color

HTML

<div class="arx-table-responsive">
    <table class="arx-table arx-table-bordered arx-table-hover">
        <thead>
            <tr><th>Name</th><th>Status</th></tr>
        </thead>
        <tbody>
            <tr>
                <td>Framework</td>
                <td><span class="arx-badge arx-badge-success">Stable</span></td>
            </tr>
            <tr class="arx-row-warning">
                <td>Modal</td>
                <td><span class="arx-badge arx-badge-warning">WIP</span></td>
            </tr>
        </tbody>
    </table>
</div>

Navbar

Horizontal navigation bar. Add .arx-navbar-sticky to keep it fixed at the top on scroll.

HTML

<nav class="arx-navbar arx-navbar-sticky">
    <div class="arx-navbar-inner">
        <a href="/" class="arx-nav-brand">Arx</a>
        <ul class="arx-nav-links">
            <li><a href="#" class="arx-nav-link arx-active">Home</a></li>
            <li><a href="#" class="arx-nav-link">Docs</a></li>
        </ul>
        <div class="arx-nav-end">
            <button class="arx-btn arx-btn-primary arx-btn-sm">Get Started</button>
        </div>
    </div>
</nav>

Sidenav

Vertical sidebar menu. Use .arx-sidenav as the container, .arx-sidenav-group for labelled sections, and .arx-sidenav-link for individual items. Add .arx-sidenav-sticky to pin it as a full-height scrolling panel.

Class	Description
.arx-sidenav	Container — sets width, background, and right border
.arx-sidenav-sticky	Modifier — `position:sticky; height:100vh; overflow-y:auto`
.arx-sidenav-brand	Logo / title area at the top
.arx-sidenav-group	Wraps a labelled set of links with horizontal padding
.arx-sidenav-label	All-caps section heading within a group
.arx-sidenav-link	Navigation item — accepts icon + text + optional badge
.arx-sidenav-badge	Right-aligned counter inside a link (pairs with .arx-badge)
.arx-sidenav-divider	Horizontal rule separator between groups
.arx-sidenav-sm / -lg	Width variants — 180px / 288px (default 240px)
.arx-sidenav-flush	No background or border — for inline vertical menus
--arx-sidenav-width	CSS token to set a custom width on the element

Basic sidenav

<nav class="arx-sidenav">

    <!-- Optional brand / logo -->
    <div class="arx-sidenav-brand">
        <i data-lucide="layers"></i>
        Arx
    </div>

    <div class="arx-sidenav-group">
        <span class="arx-sidenav-label">Main</span>

        <a href="#" class="arx-sidenav-link arx-active">
            <i data-lucide="home"></i> Dashboard
        </a>
        <a href="#" class="arx-sidenav-link">
            <i data-lucide="bar-chart-2"></i> Analytics
        </a>

        <!-- Link with a badge counter -->
        <a href="#" class="arx-sidenav-link">
            <i data-lucide="users"></i> Users
            <span class="arx-sidenav-badge arx-badge arx-badge-solid-primary">24</span>
        </a>

        <!-- Disabled item -->
        <a href="#" class="arx-sidenav-link arx-disabled">
            <i data-lucide="credit-card"></i> Billing
        </a>
    </div>

    <hr class="arx-sidenav-divider">

    <div class="arx-sidenav-group">
        <span class="arx-sidenav-label">Settings</span>
        <a href="#" class="arx-sidenav-link">
            <i data-lucide="settings"></i> Preferences
        </a>
    </div>
</nav>

Sticky full-height sidebar layout

<!-- Page layout: sidebar + main content -->
<div style="display:flex; min-height:100vh;">

    <nav class="arx-sidenav arx-sidenav-sticky">
        <!-- nav content -->
    </nav>

    <main style="flex:1; padding:2rem;">
        <!-- page content -->
    </main>

</div>

Width variants & flush

<!-- Narrow -->
<nav class="arx-sidenav arx-sidenav-sm">...</nav>

<!-- Wide -->
<nav class="arx-sidenav arx-sidenav-lg">...</nav>

<!-- Custom width via token -->
<nav class="arx-sidenav" style="--arx-sidenav-width:320px;">...</nav>

<!-- No background/border — inline vertical menu -->
<nav class="arx-sidenav arx-sidenav-flush">...</nav>

Initialise Lucide icons

<script src="vendor/lucide/lucide.min.js"></script>
<script>lucide.createIcons();</script>

Nav / Pills / Tabs

Standalone navigation components distinct from the page navbar. Three style variants: default pills, filled pills, bordered tabs, and underline tabs.

HTML

<!-- Default -->
<ul class="arx-nav">
    <li><a class="arx-nav-link arx-active" href="#">Home</a></li>
    <li><a class="arx-nav-link" href="#">Docs</a></li>
</ul>

<!-- Filled pills -->
<ul class="arx-nav arx-nav-pills">...</ul>

<!-- Bordered tabs -->
<ul class="arx-nav arx-nav-tabs">...</ul>

<!-- Underline tabs -->
<ul class="arx-nav arx-nav-underline">...</ul>

<!-- Modifiers: arx-nav-fill, arx-nav-justified, arx-nav-vertical -->

Breadcrumb

Navigation path trail. The separator is a CSS pseudo-element — change it with the --arx-breadcrumb-separator custom property or use the variant modifier classes.

HTML

<ol class="arx-breadcrumb">
    <li class="arx-breadcrumb-item"><a href="#">Home</a></li>
    <li class="arx-breadcrumb-item"><a href="#">Components</a></li>
    <li class="arx-breadcrumb-item arx-active">Breadcrumb</li>
</ol>

<!-- Separator variants -->
<ol class="arx-breadcrumb arx-breadcrumb-chevron">...</ol>  <!-- › -->
<ol class="arx-breadcrumb arx-breadcrumb-dot">...</ol>      <!-- · -->

<!-- Custom separator -->
<ol class="arx-breadcrumb" style="--arx-breadcrumb-separator: '→'">...</ol>

Pagination

Page navigation controls. Mark the active page with .arx-active and disabled items with .arx-disabled.

«
1
2
3
»

‹
1
2
3
›

HTML

<ul class="arx-pagination">
    <li><a class="arx-page-link arx-disabled" href="#">← Prev</a></li>
    <li><a class="arx-page-link arx-active"   href="#">1</a></li>
    <li><a class="arx-page-link"               href="#">2</a></li>
    <li><a class="arx-page-link"               href="#">Next →</a></li>
</ul>

<!-- Sizes: arx-pagination-sm, arx-pagination-lg -->
<!-- Style: arx-pagination-pills -->

Forms

Wrap label + input pairs in .arx-form-group for consistent vertical spacing. All input types share a consistent focus ring via .arx-input, .arx-textarea, and .arx-select.

Email address

We never share your email.

Select role

Notes

Looks good!

Please enter a valid email address.

Enable notifications Subscribe to newsletter Starter plan Pro plan

https://

Class	Element	Description
.arx-form-group	div	Vertical spacing wrapper
.arx-label	label	Styled form label
.arx-input	input	Text, email, password, number
.arx-textarea	textarea	Multi-line input
.arx-select	select	Dropdown with custom arrow
.arx-input-sm / -lg	input/select	Size modifiers
.arx-is-valid / -invalid	input etc.	Validation border colors
.arx-valid-feedback	div	Success message below field
.arx-invalid-feedback	div	Error message below field
.arx-form-text	div	Help text below field
.arx-check	label	Checkbox/radio wrapper
.arx-check-input	input	Custom-styled toggle
.arx-input-group	div	Horizontal input + addon
.arx-input-addon	span	Text prefix/suffix

Basic form group

<div class="arx-form-group">
    <label class="arx-label">Email</label>
    <input type="email" class="arx-input" placeholder="you@example.com">
    <div class="arx-form-text">We never share your email.</div>
</div>

<div class="arx-form-group">
    <label class="arx-label">Role</label>
    <select class="arx-select">
        <option>Admin</option>
    </select>
</div>

<div class="arx-form-group">
    <label class="arx-label">Notes</label>
    <textarea class="arx-textarea"></textarea>
</div>

Validation

<input class="arx-input arx-is-valid" value="correct@email.com">
<div class="arx-valid-feedback">Looks good!</div>

<input class="arx-input arx-is-invalid" value="bad input">
<div class="arx-invalid-feedback">Please enter a valid email.</div>

Checkbox & Radio

<label class="arx-check">
    <input type="checkbox" class="arx-check-input">
    Enable notifications
</label>

<label class="arx-check">
    <input type="radio" class="arx-check-input" name="plan">
    Starter plan
</label>

Input group

<div class="arx-input-group">
    <span class="arx-input-addon">https://</span>
    <input type="text" class="arx-input" placeholder="yourdomain.com">
</div>

<div class="arx-input-group">
    <input type="text" class="arx-input" placeholder="Search...">
    <button class="arx-btn arx-btn-primary">Go</button>
</div>

Switch, Range & Floating Labels

Additional form controls that complement the core form elements.

Enable notifications Dark mode Small switch Large switch

Volume

Brightness

Full name

Email address

Role

Switch

<label class="arx-form-switch">
    <input type="checkbox" class="arx-switch-input">
    Enable notifications
</label>

<!-- Sizes: arx-switch-sm, arx-switch-lg -->

Range

<div class="arx-form-group">
    <label class="arx-label">Volume</label>
    <input type="range" class="arx-range" min="0" max="100" value="60">
</div>

Floating labels

<!-- Requires placeholder=" " (space) for :not(:placeholder-shown) state -->
<div class="arx-float">
    <input type="text" class="arx-input" placeholder=" ">
    <label>Full name</label>
</div>

<div class="arx-float">
    <select class="arx-select">
        <option>Admin</option>
    </select>
    <label>Role</label>
</div>

Buttons

Use .arx-btn as the base. Add a variant class for color. Works on <button>, <a>, and <input type="submit">.

Variants

<button class="arx-btn arx-btn-primary">Primary</button>
<button class="arx-btn arx-btn-secondary">Secondary</button>
<button class="arx-btn arx-btn-success">Success</button>
<button class="arx-btn arx-btn-danger">Danger</button>
<button class="arx-btn arx-btn-warning">Warning</button>
<button class="arx-btn arx-btn-info">Info</button>
<button class="arx-btn arx-btn-ghost">Ghost</button>
<button class="arx-btn arx-btn-outline">Outline</button>
<button class="arx-btn arx-btn-outline-primary">Outline Primary</button>

Sizes

<button class="arx-btn arx-btn-primary arx-btn-sm">Small</button>
<button class="arx-btn arx-btn-primary">Default</button>
<button class="arx-btn arx-btn-primary arx-btn-lg">Large</button>

States

<button class="arx-btn arx-btn-primary" disabled>Disabled</button>
<button class="arx-btn arx-btn-primary arx-disabled">Disabled (class)</button>
<button class="arx-btn arx-btn-primary arx-btn-loading">Loading</button>

Button group

<div class="arx-btn-group">
    <button class="arx-btn arx-btn-outline">Left</button>
    <button class="arx-btn arx-btn-outline">Center</button>
    <button class="arx-btn arx-btn-outline">Right</button>
</div>

Close Button

Generic dismissal button. Used inside modals, alerts, offcanvas panels, and anywhere an × is needed.

Dismissible card

Close button positioned top-right.

HTML

<button class="arx-close">✕</button>
<button class="arx-close" disabled>✕</button>

Cards

Flexible content containers with optional header and footer slots.

User Profile

Lachlan Janke

Full-stack developer working on the Arx Framework.

Joined June 2026

No Header

A card with only a body — no header or footer.

HTML

<div class="arx-card">
    <div class="arx-card-header">Card Title</div>
    <div class="arx-card-body">
        <div class="arx-card-title">Heading</div>
        <p class="arx-card-text">Body text goes here.</p>
        <button class="arx-btn arx-btn-primary arx-btn-sm">Action</button>
    </div>
    <div class="arx-card-footer">Footer note</div>
</div>

Alerts

Contextual feedback messages. Add .arx-alert-dismissible and an .arx-alert-close button to make alerts closeable.

ℹ

Information

Your account settings have been updated successfully.

✓

Success

Plugin deployed to production. All systems nominal.

⚠

Warning

Your API rate limit is at 80%. Consider upgrading your plan.

✕

Error

Authentication failed. Please check your credentials.

HTML

<div class="arx-alert arx-alert-info">
    <span class="arx-alert-icon">ℹ</span>
    <div class="arx-alert-body">
        <div class="arx-alert-title">Information</div>
        Your account has been updated.
    </div>
</div>

<!-- Variants: arx-alert-info/success/warning/danger -->

<!-- Dismissible -->
<div class="arx-alert arx-alert-danger arx-alert-dismissible">
    <div class="arx-alert-body">Authentication failed.</div>
    <button class="arx-alert-close">✕</button>
</div>

Badges

Small inline labels for status, counts, and metadata. Three style tiers — subtle (default), solid, and outline — plus dot indicators and positioned notification counters.

Subtle (default)

Primary Secondary Success Danger Warning Info

Solid

Primary Secondary Success Danger Warning Info

Outline

Primary Secondary Success Danger Warning Info

Sizes & Shapes

Small Default Large 12 v2

Dot Indicators

Online (pulse)

Error (pulse)

Idle

Offline

Positioned (notification counter)

9

24

In-context Usage

New Dashboard Beta

Releases v1.0.0

HTML

<span class="arx-badge arx-badge-primary">Primary</span>
<span class="arx-badge arx-badge-success">Success</span>
<span class="arx-badge arx-badge-danger">Danger</span>
<span class="arx-badge arx-badge-warning">Warning</span>
<span class="arx-badge arx-badge-info">Info</span>
<span class="arx-badge arx-badge-secondary">Secondary</span>

HTML

<span class="arx-badge arx-badge-solid-primary">Primary</span>
<span class="arx-badge arx-badge-solid-success">Success</span>
<span class="arx-badge arx-badge-solid-danger">Danger</span>

HTML

<span class="arx-badge arx-badge-outline-primary">Primary</span>
<span class="arx-badge arx-badge-outline-success">Success</span>
<span class="arx-badge arx-badge-outline-danger">Danger</span>

HTML

<span class="arx-badge arx-badge-primary arx-badge-sm">Small</span>
<span class="arx-badge arx-badge-primary">Default</span>
<span class="arx-badge arx-badge-primary arx-badge-lg">Large</span>

<!-- Square (non-pill) shape -->
<span class="arx-badge arx-badge-solid-danger arx-badge-square">12</span>

HTML

<!-- Static dot -->
<span class="arx-badge arx-badge-dot arx-badge-solid-success"></span>

<!-- Animated ping for live status -->
<span class="arx-badge arx-badge-dot arx-badge-solid-success arx-badge-pulse"></span>

HTML

<div class="arx-badge-wrap">
    <button class="arx-btn arx-btn-outline">Notifications</button>
    <span class="arx-badge arx-badge-solid-danger arx-badge-pos">9</span>
</div>

HTML

<!-- Badge inline in a heading -->
<h4>Dashboard <span class="arx-badge arx-badge-success arx-badge-sm">Beta</span></h4>

<!-- Badge inside a button -->
<button class="arx-btn arx-btn-outline">
    Inbox <span class="arx-badge arx-badge-solid-danger">3</span>
</button>

List Group

Flexible component for displaying a series of content. Add .arx-list-group-action to make rows clickable.

Profile
Settings
Billing New
Archived

Dashboard

Reports

Analytics

First item
Second item
Third item

HTML

<ul class="arx-list-group">
    <li class="arx-list-group-item">Profile</li>
    <li class="arx-list-group-item">Settings</li>
</ul>

<!-- Clickable rows -->
<ul class="arx-list-group">
    <a class="arx-list-group-item arx-list-group-action arx-active" href="#">Active</a>
    <a class="arx-list-group-item arx-list-group-action" href="#">Item</a>
</ul>

<!-- Variants: arx-list-group-flush, arx-list-group-numbered, arx-list-group-horizontal -->
<!-- Item colors: arx-list-group-success/danger/warning/info/primary -->

Progress

Set the width of .arx-progress inline to reflect the current value. Wrap in .arx-progress-labeled to show a percentage label alongside.

88%

HTML

<div class="arx-progress-wrap">
    <div class="arx-progress" style="width:60%"></div>
</div>

<!-- Variants: arx-progress-success/danger/warning/info -->
<!-- Animated: arx-progress-striped -->
<!-- Sizes on the wrap: arx-progress-sm, arx-progress-lg -->

<!-- With label -->
<div class="arx-progress-labeled">
    <div class="arx-progress-wrap">
        <div class="arx-progress arx-progress-success" style="width:88%"></div>
    </div>
    <span class="arx-progress-label">88%</span>
</div>

Spinner

Three variants: border circle, bouncing dots, and grow pulse. All are inline elements — nest inside a button or centre in a container.

HTML

<!-- Circle spinner -->
<div class="arx-spinner"></div>
<div class="arx-spinner arx-spinner-sm"></div>
<div class="arx-spinner arx-spinner-lg"></div>

<!-- Color variants -->
<div class="arx-spinner arx-spinner-success"></div>
<div class="arx-spinner arx-spinner-danger"></div>

<!-- Dots -->
<div class="arx-spinner-dots"><span></span><span></span><span></span></div>

<!-- Grow pulse -->
<div class="arx-spinner-grow"></div>

<!-- Inside a button -->
<button class="arx-btn arx-btn-primary arx-d-flex arx-align-center arx-gap-2">
    <div class="arx-spinner arx-spinner-sm"></div>
    Loading…
</button>

Placeholder

Skeleton loading states for content that hasn't loaded yet. Use .arx-placeholder-glow on a parent for a shimmer sweep instead of the default pulse.

HTML

<!-- Pulse (default) -->
<div class="arx-placeholder arx-placeholder-lg arx-w-75"></div>
<div class="arx-placeholder arx-w-100"></div>
<div class="arx-placeholder arx-placeholder-btn"></div>

<!-- Shimmer sweep -->
<div class="arx-placeholder-glow">
    <div class="arx-placeholder arx-w-100"></div>
    <div class="arx-placeholder arx-w-75"></div>
</div>

<!-- Sizes: arx-placeholder-xs/sm/lg/xl -->
<!-- Widths: arx-w-25/50/75 or inline width -->
<!-- Button shape: arx-placeholder-btn -->
<!-- Card wrapper: arx-skeleton -->

Spacing Utilities

Margin and padding utilities follow the pattern .arx-{property}{side}-{scale}. Scale runs 0–5.

Pattern	Property	Side	Scale → value
`arx-m-{n}`	margin	all	0→0, 1→0.25rem, 2→0.5rem, 3→1rem, 4→1.5rem, 5→3rem
`arx-p-{n}`	padding	all	0→0, 1→0.25rem, 2→0.5rem, 3→1rem, 4→1.5rem, 5→3rem
`arx-mt/mb/ml/mr-{n}`	margin	top/bottom/left/right	—
`arx-pt/pb-{n}`	padding	top/bottom	—
`arx-mx-{n} / arx-my-{n}`	margin	x / y axis	—
`arx-px-{n} / arx-py-{n}`	padding	x / y axis	—
`arx-mx-auto`	margin	x-axis	auto — centers block elements

Display & Flex Utilities

Classes

arx-d-none | arx-d-block | arx-d-inline | arx-d-flex
arx-d-inline-flex | arx-d-inline-block | arx-d-grid

arx-flex-row | arx-flex-col | arx-flex-wrap | arx-flex-nowrap
arx-flex-1   | arx-flex-auto | arx-flex-none

arx-gap-1 ... arx-gap-5

arx-justify-start | arx-justify-center | arx-justify-end
arx-justify-between | arx-justify-around

arx-align-start | arx-align-center | arx-align-end | arx-align-stretch

Text Utilities

arx-text-primary

arx-text-secondary

arx-text-muted

arx-text-success

arx-text-danger

arx-text-warning

arx-fw-bold

arx-fw-light

arx-text-uppercase

Classes

arx-text-left | arx-text-center | arx-text-right

arx-text-primary | arx-text-secondary | arx-text-muted
arx-text-success | arx-text-danger | arx-text-warning | arx-text-info

arx-text-uppercase | arx-text-lowercase | arx-text-nowrap | arx-text-truncate

arx-fw-light | arx-fw-normal | arx-fw-medium | arx-fw-bold

Sizing Utilities

Classes

arx-w-25 | arx-w-50 | arx-w-75 | arx-w-100 | arx-w-auto
arx-h-25 | arx-h-50 | arx-h-75 | arx-h-100 | arx-h-auto

arx-min-vh-100   /* min-height: 100vh */
arx-vh-100       /* height: 100vh */

Misc Utilities

Classes

/* Position */
arx-position-relative | arx-position-absolute | arx-position-fixed | arx-position-sticky

/* Overflow */
arx-overflow-hidden | arx-overflow-auto | arx-overflow-scroll

/* Visibility */
arx-visible | arx-invisible

/* Borders */
arx-border | arx-border-0 | arx-border-top | arx-border-bottom
arx-rounded | arx-rounded-sm | arx-rounded-lg | arx-rounded-pill | arx-rounded-0

/* Shadow */
arx-shadow-none | arx-shadow-sm | arx-shadow | arx-shadow-lg

/* Screen-reader only */
arx-sr-only

/* Divider */
<hr class="arx-divider">

Lucide Icons

Arx ships a local copy of Lucide (v1.17.0) — a clean, consistent open-source icon set with 1000+ SVG icons. It is bundled under the ISC License.

home user settings bell search heart star check-circle alert-triangle x-circle mail lock trash-2 edit plus arrow-right

Attribute / Property	Effect
data-lucide="name"	Selects the icon by its kebab-case name (e.g. `arrow-right`, `check-circle`)
style="width:Xpx;height:Xpx;"	Controls icon size — defaults to 24 × 24 px
style="color:…"	Stroke colour — icons inherit `currentColor` by default
stroke-width	Pass via `data-stroke-width="1.5"` or override in CSS with `stroke-width`

HTML — include the script

<script src="vendor/lucide/lucide.min.js"></script>

HTML — render icons

<!-- Place i tags wherever you need icons -->
<i data-lucide="heart"></i>
<i data-lucide="star"></i>
<i data-lucide="user"></i>

<!-- Call once after the DOM is ready -->
<script>
    lucide.createIcons();
</script>

HTML — icons in context

<!-- Inside a button -->
<button class="arx-btn arx-btn-primary arx-d-flex arx-align-center arx-gap-2">
    <i data-lucide="plus" style="width:16px;height:16px;"></i>
    New item
</button>

<!-- Colour follows CSS color -->
<i data-lucide="heart" style="width:20px;height:20px;color:var(--arx-danger);"></i>
<i data-lucide="check-circle" style="width:20px;height:20px;color:var(--arx-success);"></i>

<!-- Size via width/height -->
<i data-lucide="star" style="width:32px;height:32px;"></i>

Download

Download individual plugin files or grab the full package as a ZIP from the Library page.

File	Description
README.md	Installation, theming, component reference, and CSS variables	Download
css/arx.css	Compiled CSS (light + dark themes, all components)	Download