Page Inspect

Semantic UI

**UI Docs**

**Getting Started** **New in 2.4**

Introduction

Integrations Build Tools Recipes Glossary

Usage

Theming Layouts

Globals

Reset Site

Elements

Button Container Divider Flag Header Icon Image Input Label List Loader Placeholder Rail Reveal Segment Step

Collections

Breadcrumb Form Grid Menu Message Table

Views

Advertisement Card Comment Feed Item Statistic

Modules

Accordion Checkbox Dimmer Dropdown Embed Modal Popup Progress Rating Search Shape Sidebar Sticky Tab Transition

Behaviors

API Form Validation Visibility

Menu

Menu

English

Search Languages

English English

dansk Danish

Español Spanish

简体中文 Chinese

中文 (臺灣) Chinese (Taiwan)

پارسی Persian

Français French

ελληνικά Greek

Русский Russian

Deutsch German

Italiano Italian

Nederlands Dutch

Português(BR) Portuguese

Indonesian Indonesian

Lietuvių Lithuanian

Türkçe Turkish

한국어 Korean

العربية Arabic

Magyar Hungarian

tiếng Việt Vietnamese

svenska Swedish

polski Polish

日本語 Japanese

românește Romanian

2.5.0# Semantic UI User Interface is the language of the web

Get Started New in 2.4

# Design Beautiful Websites Quickly

Semantic is a development framework that helps create beautiful, responsive layouts using human-friendly HTML.

## Concise HTML

Semantic UI treats words and classes as exchangeable concepts.

Classes use syntax from natural languages like noun/modifier relationships, word order, and plurality to link concepts intuitively.

Get the same benefits as BEM or SMACSS, but without the tedium.

One Two Three

One

Two

Three

## Intuitive Javascript

Semantic uses simple phrases called behaviors that trigger functionality.

Any arbitrary decision in a component is included as a setting that developers can modify.

$('select.dropdown') .dropdown('set selected', \['meteor', 'ember'\]) ;

Skills Angular CSS Ember HTML Javascript Meteor NodeJS

Skills Angular CSS Ember HTML Javascript Meteor NodeJS

## Simplified Debugging

Performance logging lets you track down bottlenecks without digging through stack traces.

Don't have access to development tools right now? Check out this short clip.

$('.sequenced.images .image') .transition({ debug : true, animation : 'jiggle', duration : 500, interval : 200 }) ;



### Semantic is growing fast. Want to see just how much? Sign up and we'll let you know



Sign-up

# Unbelievable Theming

Semantic comes equipped with an intuitive inheritance system and high level theming variables that let you have complete design freedom.

Develop your UI once, then deploy with the same code everywhere.

View Source

Select Theme

Semantic UI

Amazon

Google Material

GitHub

Bootstrap

Twitter

Raised

Chubby

Classic

View

Add to Cart

Save for Later

Rate

1

2

3

### Variable File

### Override File

## 3000+ Theming Variables

The only dogma from this framework: *everything arbitrary is mutable*.

Theming Guide

## 50+ UI Components

Build your entire site with one UI stack. Share your UI between multiple projects.

Browse UI

## 5000+ Commits

Semantic UI is a **free open source** project already used in multiple large scale production environments.

Visit GitHub

# Unbelievable Breadth

Definitions aren't limited to just buttons on a page. Semantic's components allow several distinct types of definitions: elements, collections, views, modules and behaviors which cover the gamut of interface design.

See Layout Examples

#### Menu

Inbox

1

Trash

1

Tab Tab

Inbox Starred Trash

Inbox Starred Trash

#### Divider

A

or

B

#### Accordion

Size

Small

Medium

Large

X-Large

Colors

Red

Orange

Green

Blue

#### Message

This site uses cookies

Looking for help?

- Use our help center
- Check our FAQ

We're creating your profile page

It will be ready in just a second.

#### Card

Add Friend

Rachel Maddaw

Pundit

Joined in 1998 22 Friends

#### Feed

Mark added you as a friend

You added Lena to the group Close Friends

Eve just posted on your page

#### Label

molly@thebears.com

23 New Dresses

#### Step

Shipping

Choose your shipping options

Billing

Enter billing information

Confirm Order

Verify order details

#### Dropdown



Select Country

Andorra

United Arab Emirates

Afghanistan

Antigua

Anguilla

Albania

Armenia

Netherlands Antilles

Angola

Argentina

American Samoa

Austria

Australia

Aruba

Aland Islands

Azerbaijan

Bosnia

Barbados

Bangladesh

Belgium

Burkina Faso

Bulgaria

Bahrain

Burundi

Benin

Bermuda

Brunei

Bolivia

Brazil

Bahamas

Bhutan

Bouvet Island

Botswana

Belarus

Belize

Canada

Cocos Islands

Congo

Central African Republic

Congo Brazzaville

Switzerland

Cote Divoire

Cook Islands

Chile

Cameroon

China

Colombia

Costa Rica

Serbia

Cuba

Cape Verde

Christmas Island

Cyprus

Czech Republic

Germany

Djibouti

Denmark

Dominica

Dominican Republic

Algeria

Ecuador

Estonia

Egypt

Western Sahara

Eritrea

Spain

Ethiopia

European Union

Finland

Fiji

Falkland Islands

Micronesia

Faroe Islands

France

Gabon

England

Grenada

Georgia

French Guiana

Ghana

Gibraltar

Greenland

Gambia

Guinea

Guadeloupe

Equatorial Guinea

Greece

Sandwich Islands

Guatemala

Guam

Guinea-Bissau

Guyana

Hong Kong

Heard Island

Honduras

Croatia

Haiti

Hungary

Indonesia

Ireland

Israel

India

Indian Ocean Territory

Iraq

Iran

Iceland

Italy

Jamaica

Jordan

Japan

Kenya

Kyrgyzstan

Cambodia

Kiribati

Comoros

Saint Kitts and Nevis

North Korea

South Korea

Kuwait

Cayman Islands

Kazakhstan

Laos

Lebanon

Saint Lucia

Liechtenstein

Sri Lanka

Liberia

Lesotho

Lithuania

Luxembourg

Latvia

Libya

Morocco

Monaco

Moldova

Montenegro

Madagascar

Marshall Islands

MacEdonia

Mali

Burma

Mongolia

MacAu

Northern Mariana Islands

Martinique

Mauritania

Montserrat

Malta

Mauritius

Maldives

Malawi

Mexico

Malaysia

Mozambique

Namibia

New Caledonia

Niger

Norfolk Island

Nigeria

Nicaragua

Netherlands

Norway

Nepal

Nauru

Niue

New Zealand

Oman

Panama

Peru

French Polynesia

New Guinea

Philippines

Pakistan

Poland

Saint Pierre

Pitcairn Islands

Puerto Rico

Palestine

Portugal

Palau

Paraguay

Qatar

Reunion

Romania

Serbia

Russia

Rwanda

Saudi Arabia

Solomon Islands

Seychelles

Sudan

Sweden

Singapore

Saint Helena

Slovenia

Svalbard, I Flag Jan Mayen

Slovakia

Sierra Leone

San Marino

Senegal

Somalia

Suriname

Sao Tome

El Salvador

Syria

Swaziland

Caicos Islands

Chad

French Territories

Togo

Thailand

Tajikistan

Tokelau

Timorleste

Turkmenistan

Tunisia

Tonga

Turkey

Trinidad

Tuvalu

Taiwan

Tanzania

Ukraine

Uganda

Us Minor Islands

United States

Uruguay

Uzbekistan

Vatican City

Saint Vincent

Venezuela

British Virgin Islands

Us Virgin Islands

Vietnam

Vanuatu

Wallis and Futuna

Samoa

Yemen

Mayotte

South Africa

Zambia

Zimbabwe

Filter Posts

Tag Label

Important

Announcement

Cannot Fix

News

Enhancement

Change Declined

Off Topic

Interesting

Discussion

#### Segment

#### Input

Search

http://

Add Tags

#### Checkbox

I enjoy having fun

Receive weekly poodle newsletter

Make my dog's profile public

## Responsively Designed

Semantic is **designed completely with em** making responsive sizing a breeze. Design *variations* built into elements allow you to make the choice how content adjusts for tablet and mobile.

Responsive Examples

## Partners with Libraries You Love

Semantic has integrations with **React, Angular, Meteor, Ember** and many other frameworks to help organize your UI layer alongside your application logic.

See Integrations

# Liberate your Development

### Enterprise Ready

Build tools, performance logging, support for custom definitions, multiple-levels of theme inheritance—a developer's dream.

Get Started Now

#### Community

Help Translate Submit an Issue Join our Chat CLA

#### Network

GitHub Repo User Forums 1.x Docs 0.x Docs

#### Help Preserve This Project

Support for the continued development of Semantic UI comes directly from the community.

Donate Today

Free & Open Source (MIT)

The Translation Needs Your Help

This translation is only **%** complete!

We need your help to make Semantic available to people who speak your language.

Our translation tools are easy to use and allow you to translate text without having to leave the site.

No Thanks

Help Translate

Would you like to visit the mirror site?

Semantic is available at semantic-ui.cn a mirror site hosted inside China. This should make browsing much faster for those visiting from mainland China.

No Thanks

Yes, take me to the mirror