←

Composants

Buttons

Variants

<button class="btn">Default</button> <button class="btn btn-primary">Primary</button> <button class="btn btn-success">Success</button> <button class="btn btn-danger">Danger</button> <button class="btn" disabled>Disabled</button>

Sizes

Block

Loading State

Badges

Basic Badges

Default Primary Success Warning Danger Active Idle
<span class="badge">Default</span> <span class="badge badge-primary">Primary</span> <span class="badge badge-success">Success</span>

Status Badges (plus grands)

Running Active Paused Error

Cards

Basic Card

Card Header

This is the card content. You can put any content here.

Card Footer

Stat Cards

42
Active Jobs
1,234
Total Items
95%
Success Rate
128 MB
Memory
Heap: 64 MB

Section Card

Information
Name: Example Value
Status: Active
Date: 2025-10-10

Config Grid

Codec: AAC
Bitrate: 256k
Channels: 2
Sample Rate: 48kHz

Progress Bars

Basic Progress

45% Complete
75% Complete
60% Complete

Storage Bars

Source Drive 256 GB / 512 GB
Archive Drive 600 GB / 1 TB
Backup Drive 850 GB / 1 TB

Tabs

Content of Tab 1
Content of Tab 2
Content of Tab 3
<div class="tabs-nav"> <button class="tab-button active">Tab 1</button> <button class="tab-button">Tab 2</button> </div> <div class="tab-content active">...</div> <div class="tab-content">...</div>

Forms

Text Inputs

We'll never share your email.

Validation States

Great! This is valid.
Please enter a valid value.

Textarea

Select

Checkboxes & Radio

Switch Toggle

Search Input

Input Group

https://
€

Tables

Basic Table

Name Email Status Actions
John Doe john@example.com Active
Jane Smith jane@example.com Pending
Mike Johnson mike@example.com Active

Striped Table

ID Product Price
1Product A$19.99
2Product B$29.99
3Product C$39.99
<table class="table table-striped"> <thead> <tr> <th>Name</th> <th>Status</th> </tr> </thead> <tbody> <tr> <td>John</td> <td>Active</td> </tr> </tbody> </table>

Alerts

Basic Alerts

ℹ️
Info Alert
This is an informational message to help you understand something.
✓
Success!
Your changes have been saved successfully.
⚠️
Warning
Please review this warning before continuing.
✗
Error
An error occurred. Please try again.

Dismissible Alert

💡
This alert can be dismissed by clicking the × button.
<div class="alert alert-success"> <div class="alert-icon">✓</div> <div class="alert-content"> <div class="alert-title">Success!</div> <div class="alert-message">Operation completed.</div> </div> </div>

Loading States

Spinners

Small
Default
Large
XLarge

Dots & Pulse

Dots
Pulse

Skeleton Loaders

<div class="spinner"></div> <div class="spinner-dots"> <span></span> <span></span> <span></span> </div> <div class="skeleton-card"> <div class="skeleton-title"></div> <div class="skeleton-text"></div> </div>

Modals & Overlays

Modal Dialog

<div class="modal-backdrop show"> <div class="modal"> <div class="modal-header"> <h3 class="modal-title">Title</h3> <button class="modal-close">✕</button> </div> <div class="modal-body">Content</div> <div class="modal-footer"> <button class="btn">Cancel</button> <button class="btn btn-primary">OK</button> </div> </div> </div>

Dropdown Menu

Tooltip

I'm a tooltip!

Logs

Info Warning Error
14:23:45 [system] Application started successfully
14:23:46 [job-1] Processing 156 files
14:23:47 [job-1] High memory usage detected
14:23:48 [job-2] Failed to process file: access denied
14:23:49 [system] Backup completed successfully

Layout Utilities

Grid

Grid 1
Grid 2
Grid 3
<div class="grid grid-3 gap-4"> <div>Grid 1</div> <div>Grid 2</div> <div>Grid 3</div> </div>

Flexbox

Left Right
<div class="flex-between"> <span>Left</span> <span>Right</span> </div>

Colors

Primary
#5a90c7
Success
#7db46c
Warning
#cc8800
Danger
#d84444

📂 Accordion

Basic Accordion

Accordion Variants

Compact

Flush

👤 Avatar

Avatar Sizes

XS
SM
MD
LG
XL

Avatar with Status

JD
AB
CD
EF

Avatar Shapes

RO
RD
SQ

Avatar Group

A
B
C
D
+5

Avatar with Label

JD
John Doe
Software Engineer

🌓 Dark Mode

💡
Dark Mode activé !
Le dark mode s'active automatiquement selon vos préférences système, ou manuellement avec le bouton dans le header. Le choix est persisté dans localStorage.

Contrôles

Installation

<!-- 1. Inclure le CSS --> <link rel="stylesheet" href="dist/uikit.css"> <!-- 2. Inclure le script dark mode --> <script src="js/dark-mode.js"></script> <!-- 3. Ajouter un toggle (optionnel) --> <button data-theme-toggle> <span data-theme-icon>🌙</span> </button>

API JavaScript

// Définir le thème UIKitTheme.set('dark'); // ou 'light' // Basculer le thème UIKitTheme.toggle(); // Récupérer le thème actuel const current = UIKitTheme.get(); // Écouter les changements window.addEventListener('themechange', (e) => { console.log('Theme:', e.detail.theme); });

Fonctionnement