Learn SEMANTIC-UI with Real Code Examples
Updated Nov 23, 2025
Code Sample Descriptions
1
Semantic UI 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://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.2/semantic.min.css">
<title>Semantic UI Counter</title>
</head>
<body class="ui container center aligned">
<h2 class="ui header">Counter: <span id="count">0</span></h2>
<div class="ui buttons">
<button id="increment" class="ui primary button">+</button>
<button id="decrement" class="ui red button">-</button>
<button id="reset" class="ui grey button">Reset</button>
</div>
<br><br>
<button id="theme-btn" class="ui yellow button">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('inverted', isDark);
};
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.2/semantic.min.js"></script>
</body>
</html>
Demonstrates a simple counter layout using Semantic UI classes and minimal JavaScript for interactivity.
2
Semantic UI Menu 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://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.2/semantic.min.css">
<title>Semantic UI Menu</title>
</head>
<body class="ui container">
<div class="ui menu">
<a class="active item">Home</a>
<a class="item">About</a>
<a class="item">Contact</a>
<div class="right menu">
<a class="item">Login</a>
</div>
</div>
</body>
</html>
Demonstrates a responsive navigation menu using Semantic UI menu classes.
3
Semantic UI 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://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.2/semantic.min.css">
<title>Semantic UI Card</title>
</head>
<body class="ui container">
<div class="ui card">
<div class="image">
<img src="https://via.placeholder.com/300">
</div>
<div class="content">
<a class="header">Card Title</a>
<div class="description">Example card content using Semantic UI.</div>
</div>
<div class="extra content">
<a><i class="user icon"></i> 10 Friends</a>
</div>
</div>
</body>
</html>
Shows a card layout using Semantic UI card classes.
4
Semantic UI 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://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.2/semantic.min.css">
<title>Semantic UI Modal</title>
</head>
<body class="ui container center aligned">
<button class="ui button" id="openModal">Open Modal</button>
<div class="ui modal">
<div class="header">Modal Header</div>
<div class="content">
<p>This is a Semantic UI modal example.</p>
</div>
<div class="actions">
<div class="ui approve button">OK</div>
<div class="ui cancel button">Cancel</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.2/semantic.min.js"></script>
<script>
document.getElementById('openModal').onclick = () => {
$('.ui.modal').modal('show');
};
</script>
</body>
</html>
Demonstrates a modal popup using Semantic UI modal classes.
5
Semantic UI 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://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.2/semantic.min.css">
<title>Semantic UI Tabs</title>
</head>
<body class="ui container">
<div class="ui top attached tabular menu">
<a class="active item" data-tab="first">Tab 1</a>
<a class="item" data-tab="second">Tab 2</a>
<a class="item" data-tab="third">Tab 3</a>
</div>
<div class="ui bottom attached tab segment active" data-tab="first">Content for Tab 1</div>
<div class="ui bottom attached tab segment" data-tab="second">Content for Tab 2</div>
<div class="ui bottom attached tab segment" data-tab="third">Content for Tab 3</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.2/semantic.min.js"></script>
<script>
$('.menu .item').tab();
</script>
</body>
</html>
Shows a tabbed interface using Semantic UI tab classes.
6
Semantic UI 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://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.2/semantic.min.css">
<title>Semantic UI Accordion</title>
</head>
<body class="ui container">
<div class="ui styled fluid accordion">
<div class="title"><i class="dropdown icon"></i> Section 1</div>
<div class="content"><p>Content for section 1</p></div>
<div class="title"><i class="dropdown icon"></i> Section 2</div>
<div class="content"><p>Content for section 2</p></div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.2/semantic.min.js"></script>
<script>
$('.ui.accordion').accordion();
</script>
</body>
</html>
Demonstrates an accordion component using Semantic UI.
7
Semantic UI Dropdown 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://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.2/semantic.min.css">
<title>Semantic UI Dropdown</title>
</head>
<body class="ui container">
<div class="ui dropdown">
<div class="text">Select Option</div>
<i class="dropdown icon"></i>
<div class="menu">
<div class="item">Option 1</div>
<div class="item">Option 2</div>
<div class="item">Option 3</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.2/semantic.min.js"></script>
<script>
$('.ui.dropdown').dropdown();
</script>
</body>
</html>
Shows a dropdown menu using Semantic UI dropdown classes.
8
Semantic UI Progress 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://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.2/semantic.min.css">
<title>Semantic UI Progress</title>
</head>
<body class="ui container">
<div class="ui indicating progress" data-percent="50">
<div class="bar" style="width: 50%;"></div>
<div class="label">Progress</div>
</div>
</body>
</html>
Demonstrates a progress bar using Semantic UI classes.
9
Semantic UI Message 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://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.2/semantic.min.css">
<title>Semantic UI Message</title>
</head>
<body class="ui container">
<div class="ui positive message">
<i class="close icon"></i>
<div class="header">Success</div>
<p>This is a Semantic UI success message.</p>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.2/semantic.min.js"></script>
<script>
$('.message .close').on('click', function() {
$(this).closest('.message').transition('fade');
});
</script>
</body>
</html>
Shows a dismissable message using Semantic UI message classes.