UIKit - Documentation

Icons

Les icones utilisent mask-image et heritent automatiquement de la couleur du texte parent.

Navigation

Actions

Media / Audio

Audio Routing

Feedback

Fichiers & UI

Tailles

xs / sm / md / lg / xl

Heritage de couleur

Usage

<!-- Icone simple -->
<span class="icon icon-play"></span>

<!-- Avec taille -->
<span class="icon icon-play icon-lg"></span>

<!-- Dans un bouton -->
<button class="btn btn-primary">
    <span class="icon icon-play"></span> Lecture
</button>

<!-- Couleur heritee du parent -->
<span style="color: var(--color-success);">
    <span class="icon icon-check-circle"></span> Valide
</span>

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

Avatar

Sizes

XS

SM

MD

LG

XL

With Status

JD

AB

CD

EF

Colors

P

S

W

D

I

Group

A

B

C

+5

<div class="avatar">JD</div>
<div class="avatar avatar-lg avatar-primary">
    AB
    <span class="avatar-status online"></span>
</div>
        

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>
        

Accordion

Section 1 ▼

Content for section 1. This accordion item is expanded by default.

Section 2 ▼

Section 3 ▼

<div class="accordion">
    <div class="accordion-item">
        <button class="accordion-header" aria-expanded="false">
            Section Title
            <span class="accordion-icon">&#9660;</span>
        </button>
        <div class="accordion-content" aria-hidden="true">
            Content here...
        </div>
    </div>
</div>
        

Forms

Text Inputs

Email We'll never share your email.

Password

Disabled

Validation States

Success Great! This is valid.

Error Please enter a valid value.

Textarea

Message

Select

Choose an option

Checkboxes & Radio

I agree to the terms

Remember me

Option A

Option B

Switch Toggle

Enable notifications

Dark mode

Search Input

Input Group

https://

€

Range / Slider

Basic Range

With Value Display

75

Sizes

<div class="range">
    <input type="range" class="range-input" min="0" max="100" value="50">
</div>
        

Number Input

Basic

Sizes

<div class="number-input">
    <button class="number-input-btn number-input-decrement">-</button>
    <input type="number" value="5">
    <button class="number-input-btn number-input-increment">+</button>
</div>
        

File Input

Basic Button

Choose File

Drop Zone

📁

Click to upload or drag and drop

PNG, JPG up to 10MB

<div class="dropzone">
    <div class="dropzone-icon">&#128193;</div>
    <div class="dropzone-text">Drag and drop</div>
    <input type="file">
</div>
        

Segmented Control

Basic

Primary Color

Block (Full Width)

<div class="segmented">
    <button class="segmented-item active">Day</button>
    <button class="segmented-item">Week</button>
    <button class="segmented-item">Month</button>
</div>
        

Tables

Basic Table

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

Striped Table

ID	Product	Price
1	Product A	$19.99
2	Product B	$29.99
3	Product 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>
        

List Items

Meeting with Team

Confirmed

2024-01-15 14:00 - 15:30

john@example.com

Project Review

Pending

2024-01-16 10:00 - 11:00

team@example.com

Client Call

Cancelled

2024-01-17 09:00 - 09:30

<div class="list-container">
    <div class="list-item">
        <div class="list-item-header">
            <h4 class="list-item-title">Title</h4>
            <span class="badge">Status</span>
        </div>
        <div class="list-item-meta">Meta info</div>
    </div>
</div>
        

Pagination

Basic

Rounded

<nav class="pagination">
    <div class="pagination-item">
        <a class="pagination-link" href="#">1</a>
    </div>
    <div class="pagination-item">
        <a class="pagination-link active" href="#">2</a>
    </div>
</nav>
        

Breadcrumb

Basic

With Chevron

<ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">Home</a></li>
    <li class="breadcrumb-item" aria-current="page">Current</li>
</ol>
        

Stepper

Horizontal

1

Account

Create your account

2

Profile

Set up your profile

3

Complete

Review and finish

<div class="stepper">
    <div class="stepper-step completed">...</div>
    <div class="stepper-step active">...</div>
    <div class="stepper-step">...</div>
</div>
        

Timeline

Order Delivered
Today 14:30

Package was delivered successfully.
Out for Delivery
Today 09:00

Package is out for delivery.
Order Shipped
Yesterday

Order has been shipped.

<ul class="timeline">
    <li class="timeline-item success">
        <div class="timeline-marker"></div>
        <div class="timeline-content">
            <h4 class="timeline-title">Event</h4>
            <p>Description</p>
        </div>
    </li>
</ul>
        

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>
        

Notifications (Toast)

Les notifications apparaissent en haut a droite de l'ecran.

<div class="notification success show">
    Operation completed successfully!
</div>

<!-- Classes: success, error, info, warning -->
<!-- Add 'show' class to display -->
        

Empty State

Basic

📁

No files found

Upload your first file to get started.

With Color

🔍

No results

Try adjusting your search criteria.

<div class="empty-state">
    <div class="empty-state-icon">&#128193;</div>
    <h3 class="empty-state-title">No files</h3>
    <p class="empty-state-description">Description</p>
    <div class="empty-state-action">
        <button class="btn btn-primary">Action</button>
    </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

Popover

Basic (Hover)

With Header

<div class="popover-trigger popover-hover">
    <button class="btn">Trigger</button>
    <div class="popover popover-bottom">
        <div class="popover-body">Content</div>
    </div>
</div>
        

Divider

Simple

With Text

OR

Dashed

With Colors

Primary

Success

Vertical (in flex container)

Left

Right

<div class="divider"></div>
<div class="divider">OR</div>
<div class="divider divider-dashed"></div>
        

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

Matrix

Matrice de routage audio avec cellules cliquables. Voir la demo complete.

	IN 1	IN 2	IN 3	IN 4
Track 1	✓
Track 2		✓
Track 3			✓
Track 4				✓

<div class="matrix-wrapper">
    <table class="matrix-table">
        <tr>
            <td class="matrix-cell"></td>
            <td class="matrix-cell active">&#10003;</td>
        </tr>
    </table>
</div>
        

Meter

Vu-metres audio avec variantes horizontales et verticales. Voir la demo complete.

Horizontal

Vertical (Stereo)

<div class="meter meter-horizontal">
    <div class="meter-bar" style="width: 75%;"></div>
</div>

<div class="meter meter-vertical">
    <div class="meter-bar" style="height: 80%;"></div>
</div>
        

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

🌓 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

Auto : Suit les préférences système (prefers-color-scheme)
Persistance : Le choix est sauvegardé dans localStorage
Pas de flash : Le script s'initialise avant le rendu de la page
Personnalisable : Modifie les variables dans tokens.css

UIKit Documentation

Icons

Navigation

Actions

Media / Audio

Audio Routing

Feedback

Fichiers & UI

Tailles

Heritage de couleur

Usage

Buttons

Variants

Sizes

Block

Loading State

Badges

Basic Badges

Status Badges (plus grands)

Cards

Basic Card

Stat Cards

Section Card

Config Grid

Avatar

Sizes

With Status

Colors

Group

Progress Bars

Basic Progress

Storage Bars

Tabs

Accordion

Forms

Text Inputs

Validation States

Textarea

Select

Checkboxes & Radio

Switch Toggle

Search Input

Input Group

Range / Slider

Basic Range

With Value Display

Sizes

Number Input

Basic

Sizes

File Input

Basic Button

Drop Zone

Tags

Basic Tags

Solid Variant

Removable Tags

Pill Shape

Segmented Control

Basic

Primary Color

Block (Full Width)

Tables

Basic Table

Striped Table

List Items

Meeting with Team

Project Review

Client Call

Pagination

Basic

Rounded

Breadcrumb

Basic

With Chevron

Stepper

Horizontal

Timeline

Order Delivered

Out for Delivery