Semantic UI

A Next-Gen UI Framework Built To Scale

Create truly portable in house design systems that work everywhere usings web standards, signals-based reactivity, and zero abstraction cost.

Try In 5 Minutes View Docs
Future Tech Included
Signals based reactivity, AST based templating, CSS layers based theming, and everything baseline in 2024.
Zero Framework Lock-in
Author native web components that work in React, Vue, Vanilla JS, or whatever framework comes next. True interoperability without compromise.
Built to Customize
Hit the ground running with robust UI primitives, then author custom UI with a component framework designed for developer experience.
Delete Edit Save 
<ui-buttons large>
  <ui-button subtle-negative>
    <ui-icon x></ui-icon>
    Delete
  </ui-button>
  <ui-button>
    <ui-icon edit></ui-icon>
    Edit
  </ui-button>
  <ui-button primary>
    <ui-icon save></ui-icon>
    Save
  </ui-button>
</ui-buttons>
<user-panel>
  <h3 class="header">
    Welcome {getDisplayName (getUser userId) }
  </h3>
  <ui-buttons large>
    {#each actions}
      <ui-button {style}>
        <ui-icon {icon}>
        {text}
      </ui-button>
    {/each}
  </ui-buttons>
</user-panel>

A Framework for Distributable UI

Semantic provides a growing library for first-party UI primitives like dropdowns, buttons, menus, inputs that you can use as baseline to design your own custom design system.

Built for Scaling

  • Write your UI as web components and use anywhree.
  • Singular end-user experience for handling settings, styling and more.
  • Designed to be composable to make complex UI with web standards.

UI Toolkit Built In

Semantic provides a growing library for first-party UI primitives like dropdowns, buttons, menus, inputs that you can use as baseline to design your own custom design system.

First Party Primitives

  • A growing library first-party library of primitives like button, menu, container that can be used to build complex UI.
  • Robust, machine readable specification format provides a single source of truth.
  • Written using useful principles of natural language that make using UI as simple as describing it.

Ready for Advanced Use Cases

Semantic is built to handle complex use-cases to build entire apps purely with web components.

Enterprise Ready

  • Robust AST based templating with features like subtemplating, snippets, reactive expressions and more.
  • Advanced tools for sharing state and data between components using web standards.
  • Highly performant rendering engine powered by Google's Lit.

Developers

Intuitive Templating

Write templates that read like plain English. Semantic UI's template syntax makes components self-documenting and easier to maintain.

  • Reactive expressions with natural syntax
  • Automatic state synchronization
  • Built-in conditional and loop helpers

Try It Out