Introduction

What is Semantic UI?

Semantic UI is a UI framework built for authoring websites using web components with signals based reactivity, an expressive shadow DOM templating syntax, robust theming using css layers and variables, and an integrated underlying UI component framework that supports SSR by default.

Key Features

• Uses native browser standards which means it can run without a compilation step unlike many modern JS frameworks.
• Built on a reactive component framework that you can use to author your own web components.
• Modern css theming using thousands of CSS variables, cascading inheritance layers to make overrides easy, dark mode aware components and em based scaling.
• UI components support server side rendering with hydration out of the box.

Built To Scale

Semantic uses web components which are a native browser standard meaning your codebase will never grow stale when a new framework comes out. It also means that you can use Semantic inside other frameworks that support web components like React, Vue or Svelte.

What’s Included

Semantic includes the following core libraries:

• An underlying UI component framework that includes things like popups, dropdowns, modals, and form controls.
• A robust reactive templating language that compiles to web components.
• A signals based reactivity library.
• A modern 3kb jQuery-like replacement called Query to handle DOM APIs
• A higly-performant rendering engine powered by Lit under the hood.

Coding With Semantic

Semantic is written to read like english, which makes working with a codebase written in Semantic UI easy and intuitive

<ui-menu selection evenly-spaced>
  <menu-item value="a">Choice A</menu-item>
  <menu-item value="b">Choice B</menu-item>
  <menu-item value="c">Choice C</menu-item>
</ui-menu>

Semantic also includes some concepts from natural language like plurality to make inheritance easy to understand.

<ui-buttons large>
  <ui-button>Cancel</ui-button>
  <ui-button primary>Submit</ui-button>
</ui-buttons>

Theming

Semantic theming is light/dark mode aware and can be used to create your own web components or just style parts of your page.

.my-element {
  /* think in terms of words not pixels. compact means 0.5em */
  padding: var(--compact-spacing);

  /* border is dark in light mode and light in dark mode */
  border: var(--border;);

  /* standard 70% means 70% black in light mode and 70% white in dark mode */
  color: var(--standard-70);
}

Building Apps

For complex website and applications Semantic provides a full featured web component framework. This can be used to build your own custom UI using web components with the same toolkit used to build the UI library.