Learn UIKIT with Real Code Examples

Updated Nov 23, 2025

Introduction & Fundamentals Setup & Configuration Architecture & Deep Internals Performance & Security Development Workflow Learning & Career Growth Business & Strategy Examples

Code Sample Descriptions

UIkit Counter Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/uikit@3.16.21/dist/css/uikit.min.css">
    <title>UIkit Counter</title>
</head>
<body class="uk-container uk-text-center uk-margin-top">
    <h2>Counter: <span id="count">0</span></h2>
    <div class="uk-button-group">
        <button id="increment" class="uk-button uk-button-primary">+</button>
        <button id="decrement" class="uk-button uk-button-danger">-</button>
        <button id="reset" class="uk-button uk-button-default">Reset</button>
    </div>
    <br>
    <button id="theme-btn" class="uk-button uk-button-warning">Switch Theme</button>

    <script>
        let count = 0;
        let isDark = false;
        const countEl = document.getElementById('count');
        const body = document.body;

        document.getElementById('increment').onclick = () => { count++; countEl.textContent = count; };
        document.getElementById('decrement').onclick = () => { count--; countEl.textContent = count; };
        document.getElementById('reset').onclick = () => { count = 0; countEl.textContent = count; };
        document.getElementById('theme-btn').onclick = () => {
        isDark = !isDark;
        body.classList.toggle('uk-dark', isDark);
        body.classList.toggle('uk-light', !isDark);
        };
    </script>

    <script src="https://cdn.jsdelivr.net/npm/uikit@3.16.21/dist/js/uikit.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/uikit@3.16.21/dist/js/uikit-icons.min.js"></script>
</body>
</html>

Demonstrates a simple counter layout using UIkit classes and minimal JavaScript for interactivity.

Let’s Try →

UIkit Navbar Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/uikit@3.16.21/dist/css/uikit.min.css">
    <title>UIkit Navbar</title>
</head>
<body>
    <nav class="uk-navbar-container" uk-navbar>
        <div class="uk-navbar-left">
        <a class="uk-navbar-item uk-logo" href="#">Logo</a>
        <ul class="uk-navbar-nav">
        <li class="uk-active"><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
        </ul>
        </div>
    </nav>

    <script src="https://cdn.jsdelivr.net/npm/uikit@3.16.21/dist/js/uikit.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/uikit@3.16.21/dist/js/uikit-icons.min.js"></script>
</body>
</html>

Demonstrates a responsive navbar using UIkit classes.

Let’s Try →

UIkit Card Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/uikit@3.16.21/dist/css/uikit.min.css">
    <title>UIkit Card</title>
</head>
<body class="uk-container uk-margin-top">
    <div class="uk-card uk-card-default uk-card-hover uk-card-body">
        <h3 class="uk-card-title">Card Title</h3>
        <p>This is a UIkit card example.</p>
        <a href="#" class="uk-button uk-button-primary">Link</a>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/uikit@3.16.21/dist/js/uikit.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/uikit@3.16.21/dist/js/uikit-icons.min.js"></script>
</body>
</html>

Shows a card component layout using UIkit card classes.

Let’s Try →

UIkit Modal Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/uikit@3.16.21/dist/css/uikit.min.css">
    <title>UIkit Modal</title>
</head>
<body class="uk-container uk-text-center uk-margin-top">
    <button class="uk-button uk-button-primary" uk-toggle="target: #modal-example">Open Modal</button>

    <div id="modal-example" uk-modal>
        <div class="uk-modal-dialog uk-modal-body">
        <h2 class="uk-modal-title">Modal Header</h2>
        <p>This is a UIkit modal example.</p>
        <button class="uk-modal-close uk-button uk-button-default">Close</button>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/uikit@3.16.21/dist/js/uikit.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/uikit@3.16.21/dist/js/uikit-icons.min.js"></script>
</body>
</html>

Demonstrates a modal popup using UIkit modal classes.

Let’s Try →

UIkit Tab Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/uikit@3.16.21/dist/css/uikit.min.css">
    <title>UIkit Tabs</title>
</head>
<body class="uk-container uk-margin-top">
    <ul uk-tab>
        <li><a href="#">Tab 1</a></li>
        <li><a href="#">Tab 2</a></li>
        <li><a href="#">Tab 3</a></li>
    </ul>
    <ul class="uk-switcher uk-margin">
        <li>Content for Tab 1</li>
        <li>Content for Tab 2</li>
        <li>Content for Tab 3</li>
    </ul>

    <script src="https://cdn.jsdelivr.net/npm/uikit@3.16.21/dist/js/uikit.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/uikit@3.16.21/dist/js/uikit-icons.min.js"></script>
</body>
</html>

Shows a tabbed interface using UIkit tab classes.

Let’s Try →

UIkit Accordion Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/uikit@3.16.21/dist/css/uikit.min.css">
    <title>UIkit Accordion</title>
</head>
<body class="uk-container uk-margin-top">
    <ul uk-accordion>
        <li class="uk-open">
        <a class="uk-accordion-title" href="#">Section 1</a>
        <div class="uk-accordion-content">
        <p>Content for section 1</p>
        </div>
        </li>
        <li>
        <a class="uk-accordion-title" href="#">Section 2</a>
        <div class="uk-accordion-content">
        <p>Content for section 2</p>
        </div>
        </li>
    </ul>

    <script src="https://cdn.jsdelivr.net/npm/uikit@3.16.21/dist/js/uikit.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/uikit@3.16.21/dist/js/uikit-icons.min.js"></script>
</body>
</html>

Demonstrates an accordion component using UIkit classes.

Let’s Try →

UIkit Slideshow Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/uikit@3.16.21/dist/css/uikit.min.css">
    <title>UIkit Slideshow</title>
</head>
<body class="uk-container uk-margin-top">
    <div uk-slideshow="animation: push">
        <ul class="uk-slideshow-items">
        <li><img src="https://via.placeholder.com/600x300" alt=""></li>
        <li><img src="https://via.placeholder.com/600x300" alt=""></li>
        <li><img src="https://via.placeholder.com/600x300" alt=""></li>
        </ul>
        <a class="uk-position-center-left uk-position-small uk-slidenav-large" href="#" uk-slidenav-previous uk-slideshow-item="previous"></a>
        <a class="uk-position-center-right uk-position-small uk-slidenav-large" href="#" uk-slidenav-next uk-slideshow-item="next"></a>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/uikit@3.16.21/dist/js/uikit.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/uikit@3.16.21/dist/js/uikit-icons.min.js"></script>
</body>
</html>

Shows a responsive image slideshow using UIkit slideshow classes.

Let’s Try →

UIkit Tooltip Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/uikit@3.16.21/dist/css/uikit.min.css">
    <title>UIkit Tooltip</title>
</head>
<body class="uk-container uk-text-center uk-margin-top">
    <button class="uk-button uk-button-primary" uk-tooltip="title: I am a tooltip; pos: top">Hover Me</button>

    <script src="https://cdn.jsdelivr.net/npm/uikit@3.16.21/dist/js/uikit.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/uikit@3.16.21/dist/js/uikit-icons.min.js"></script>
</body>
</html>

Demonstrates tooltips using UIkit tooltip classes.

Let’s Try →

UIkit Progress Bar Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/uikit@3.16.21/dist/css/uikit.min.css">
    <title>UIkit Progress Bar</title>
</head>
<body class="uk-container uk-margin-top">
    <div class="uk-progress uk-margin">
        <progress class="uk-progress-bar" value="50" max="100"></progress>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/uikit@3.16.21/dist/js/uikit.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/uikit@3.16.21/dist/js/uikit-icons.min.js"></script>
</body>
</html>

Shows a simple progress bar using UIkit progress classes.

Let’s Try →

Code Sample Descriptions

UIkit Counter Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/uikit@3.16.21/dist/css/uikit.min.css">
    <title>UIkit Counter</title>
</head>
<body class="uk-container uk-text-center uk-margin-top">
    <h2>Counter: <span id="count">0</span></h2>
    <div class="uk-button-group">
        <button id="increment" class="uk-button uk-button-primary">+</button>
        <button id="decrement" class="uk-button uk-button-danger">-</button>
        <button id="reset" class="uk-button uk-button-default">Reset</button>
    </div>
    <br>
    <button id="theme-btn" class="uk-button uk-button-warning">Switch Theme</button>

    <script>
        let count = 0;
        let isDark = false;
        const countEl = document.getElementById('count');
        const body = document.body;

        document.getElementById('increment').onclick = () => { count++; countEl.textContent = count; };
        document.getElementById('decrement').onclick = () => { count--; countEl.textContent = count; };
        document.getElementById('reset').onclick = () => { count = 0; countEl.textContent = count; };
        document.getElementById('theme-btn').onclick = () => {
        isDark = !isDark;
        body.classList.toggle('uk-dark', isDark);
        body.classList.toggle('uk-light', !isDark);
        };
    </script>

    <script src="https://cdn.jsdelivr.net/npm/uikit@3.16.21/dist/js/uikit.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/uikit@3.16.21/dist/js/uikit-icons.min.js"></script>
</body>
</html>

Demonstrates a simple counter layout using UIkit classes and minimal JavaScript for interactivity.

Let’s Try →

UIkit Navbar Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/uikit@3.16.21/dist/css/uikit.min.css">
    <title>UIkit Navbar</title>
</head>
<body>
    <nav class="uk-navbar-container" uk-navbar>
        <div class="uk-navbar-left">
        <a class="uk-navbar-item uk-logo" href="#">Logo</a>
        <ul class="uk-navbar-nav">
        <li class="uk-active"><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
        </ul>
        </div>
    </nav>

    <script src="https://cdn.jsdelivr.net/npm/uikit@3.16.21/dist/js/uikit.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/uikit@3.16.21/dist/js/uikit-icons.min.js"></script>
</body>
</html>

Demonstrates a responsive navbar using UIkit classes.

Let’s Try →

UIkit Card Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/uikit@3.16.21/dist/css/uikit.min.css">
    <title>UIkit Card</title>
</head>
<body class="uk-container uk-margin-top">
    <div class="uk-card uk-card-default uk-card-hover uk-card-body">
        <h3 class="uk-card-title">Card Title</h3>
        <p>This is a UIkit card example.</p>
        <a href="#" class="uk-button uk-button-primary">Link</a>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/uikit@3.16.21/dist/js/uikit.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/uikit@3.16.21/dist/js/uikit-icons.min.js"></script>
</body>
</html>

Shows a card component layout using UIkit card classes.

Let’s Try →

UIkit Modal Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/uikit@3.16.21/dist/css/uikit.min.css">
    <title>UIkit Modal</title>
</head>
<body class="uk-container uk-text-center uk-margin-top">
    <button class="uk-button uk-button-primary" uk-toggle="target: #modal-example">Open Modal</button>

    <div id="modal-example" uk-modal>
        <div class="uk-modal-dialog uk-modal-body">
        <h2 class="uk-modal-title">Modal Header</h2>
        <p>This is a UIkit modal example.</p>
        <button class="uk-modal-close uk-button uk-button-default">Close</button>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/uikit@3.16.21/dist/js/uikit.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/uikit@3.16.21/dist/js/uikit-icons.min.js"></script>
</body>
</html>

Demonstrates a modal popup using UIkit modal classes.

Let’s Try →

UIkit Tab Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/uikit@3.16.21/dist/css/uikit.min.css">
    <title>UIkit Tabs</title>
</head>
<body class="uk-container uk-margin-top">
    <ul uk-tab>
        <li><a href="#">Tab 1</a></li>
        <li><a href="#">Tab 2</a></li>
        <li><a href="#">Tab 3</a></li>
    </ul>
    <ul class="uk-switcher uk-margin">
        <li>Content for Tab 1</li>
        <li>Content for Tab 2</li>
        <li>Content for Tab 3</li>
    </ul>

    <script src="https://cdn.jsdelivr.net/npm/uikit@3.16.21/dist/js/uikit.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/uikit@3.16.21/dist/js/uikit-icons.min.js"></script>
</body>
</html>

Shows a tabbed interface using UIkit tab classes.

Let’s Try →

UIkit Accordion Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/uikit@3.16.21/dist/css/uikit.min.css">
    <title>UIkit Accordion</title>
</head>
<body class="uk-container uk-margin-top">
    <ul uk-accordion>
        <li class="uk-open">
        <a class="uk-accordion-title" href="#">Section 1</a>
        <div class="uk-accordion-content">
        <p>Content for section 1</p>
        </div>
        </li>
        <li>
        <a class="uk-accordion-title" href="#">Section 2</a>
        <div class="uk-accordion-content">
        <p>Content for section 2</p>
        </div>
        </li>
    </ul>

    <script src="https://cdn.jsdelivr.net/npm/uikit@3.16.21/dist/js/uikit.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/uikit@3.16.21/dist/js/uikit-icons.min.js"></script>
</body>
</html>

Demonstrates an accordion component using UIkit classes.

Let’s Try →

UIkit Slideshow Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/uikit@3.16.21/dist/css/uikit.min.css">
    <title>UIkit Slideshow</title>
</head>
<body class="uk-container uk-margin-top">
    <div uk-slideshow="animation: push">
        <ul class="uk-slideshow-items">
        <li><img src="https://via.placeholder.com/600x300" alt=""></li>
        <li><img src="https://via.placeholder.com/600x300" alt=""></li>
        <li><img src="https://via.placeholder.com/600x300" alt=""></li>
        </ul>
        <a class="uk-position-center-left uk-position-small uk-slidenav-large" href="#" uk-slidenav-previous uk-slideshow-item="previous"></a>
        <a class="uk-position-center-right uk-position-small uk-slidenav-large" href="#" uk-slidenav-next uk-slideshow-item="next"></a>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/uikit@3.16.21/dist/js/uikit.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/uikit@3.16.21/dist/js/uikit-icons.min.js"></script>
</body>
</html>

Shows a responsive image slideshow using UIkit slideshow classes.

Let’s Try →

UIkit Tooltip Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/uikit@3.16.21/dist/css/uikit.min.css">
    <title>UIkit Tooltip</title>
</head>
<body class="uk-container uk-text-center uk-margin-top">
    <button class="uk-button uk-button-primary" uk-tooltip="title: I am a tooltip; pos: top">Hover Me</button>

    <script src="https://cdn.jsdelivr.net/npm/uikit@3.16.21/dist/js/uikit.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/uikit@3.16.21/dist/js/uikit-icons.min.js"></script>
</body>
</html>

Demonstrates tooltips using UIkit tooltip classes.

Let’s Try →

UIkit Progress Bar Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/uikit@3.16.21/dist/css/uikit.min.css">
    <title>UIkit Progress Bar</title>
</head>
<body class="uk-container uk-margin-top">
    <div class="uk-progress uk-margin">
        <progress class="uk-progress-bar" value="50" max="100"></progress>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/uikit@3.16.21/dist/js/uikit.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/uikit@3.16.21/dist/js/uikit-icons.min.js"></script>
</body>
</html>

Shows a simple progress bar using UIkit progress classes.

Let’s Try →