Learn SEMANTIC-UI with Real Code Examples

Semantic UI uses descriptive class names for components and layouts, making HTML readable and maintainable.

It provides a responsive grid system, prebuilt UI elements, and integrated JavaScript behaviors.

Designed for developers and designers who want consistency and fast prototyping.

Grid system with responsive breakpoints

UI components: buttons, menus, cards, modals, tables

Form elements with validation support

JavaScript plugins for interactive components

Theming and customizable CSS variables

Grid: `.ui.grid`, `.column`, `.row`

Buttons: `.ui.button`, `.primary`, `.secondary`

Forms: `.ui.form` with inputs and validation

Menus: `.ui.menu`, `.item`, `.dropdown`

Modals and interactive components via JS plugins

index.html - main markup

src/ - custom styles or component overrides

js/ - optional Semantic JS behaviors

assets/ - images, fonts, media

node_modules/ - npm packages if used

Include Semantic UI CSS & JS via CDN or npm

Use semantic classes in HTML for components

Apply grid layout for responsive structure

Initialize JS behaviors for interactivity

Customize themes with variables if needed

Beginner: static layouts and basic components

Intermediate: forms, tables, dropdowns

Advanced: custom themes and interactive JS plugins

Expert: large dashboards or admin apps

Community: contribute themes or custom modules

More semantic than Bootstrap

Less utility-driven than Tailwind

Prebuilt JS behaviors unlike minimal frameworks

Readable HTML structure

Comprehensive component library

2013 – Semantic UI initial release

2014 – Semantic UI 1.0

2015 – Component and theme expansions

2016–2020 – Minor updates and plugin improvements

2025 – Active maintenance primarily via Fomantic UI

UI Component: prebuilt interactive element

Grid: layout system for responsive design

JS Plugin: interactive behavior (dropdown, modal)

Theming: customization of colors, fonts, variables

Semantic class: human-readable class name