Learn Uikit - 9 Code Examples & CST Typing Practice Test
UIkit is a lightweight, modular front-end framework for developing fast and powerful web interfaces. It offers a responsive grid, prebuilt components, and JavaScript plugins to create interactive UI elements.
Learn UIKIT with Real Code Examples
Updated Nov 23, 2025
Code Sample Descriptions
1
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.
2
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.
3
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.
4
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.
5
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.
6
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.
7
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.
8
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.
9
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.
Frequently Asked Questions about Uikit
What is Uikit?
UIkit is a lightweight, modular front-end framework for developing fast and powerful web interfaces. It offers a responsive grid, prebuilt components, and JavaScript plugins to create interactive UI elements.
What are the primary use cases for Uikit?
Responsive websites and web apps. Landing pages and marketing sites. Admin dashboards. Rapid prototyping. Projects needing modular JS components
What are the strengths of Uikit?
Fully modular - import only what is needed. Responsive and mobile-first. Includes JS components for interactivity. Lightweight and easy to customize. Clean, consistent design patterns
What are the limitations of Uikit?
Smaller ecosystem than Bootstrap. Documentation can be less comprehensive. Less widespread adoption for community support. Some advanced components require custom JS. Not Material Design based - style is framework-specific
How can I practice Uikit typing speed?
CodeSpeedTest offers 9+ real Uikit code examples for typing practice. You can measure your WPM, track accuracy, and improve your coding speed with guided exercises.