Introduction

Using Semantic UI

Semantic UI is a UI framework built with web components that can be used anywhere you write html.

As a Designer / Developer

Semantic gives you access to a UI framework with components like button, dropdown and menu for building a website.

1. Choose from primitives, components, and behaviors you need for your website.
2. Include them wherever you write html as html tags like <ui-button>.
3. Theme your components using standard css and css variables.

As an Organization

Semantic provides an constellation of tools for authoring web components that let you use UI across multiple ecosystems like mobile devices, javascript frameworks like React, Vue, or Svelte, as well as anywhere else where html is written.

1. Create custom organization specific web components like <order-form> built with ui primitives like <ui-button>, <ui-input> etc.
2. Publish your custom UI components as part of a design system for your company.
3. Use your custom html tags wherever your company ships html.

Where to Start

• Install Semantic UI in your project and play around with it.
• Check out the TodoMVC example to see how to build complex stateful components.
• Explore API docs for standards-based baseline 2026 libraries like the shadow dom aware Query library