Introduction

Semantic UI is a framework for authoring standard W3C Web Components that work natively in modern browsers, integrate readily with frameworks like React, Vue, Angular, or others supporting Web Components, and offer long-term maintainability with reduced framework lock-in.

Design System vs Component Framework

• Semantic UI provides a first-party design system to handle common primitives like buttons, menus, and inputs that can be used anywhere you write html.

• Semantic UI provides tools for authoring custom UI components. Write your own design system, or create open source UI components to share with others.

To see examples of custom components check out our examples gallery.

Key Add-ons to Web Components

• Signals-based reactivity for state management.
• Declarative templating for rendering component views.
• DOM querying tailored for Shadow DOM encapsulation.
• Robust CSS token framework for dark/light mode styling and theming.
• Integrated event handling tools.
• Declarative keybinding management.

Using UI Components

The @semantic-ui/core package provides a collection of essential, pre-built UI components that can be used as a basis to build your website, or other higher-order UI components.

Creating Custom Components

For building custom UI elements, Semantic UI providesthe component authoring framework a set of composable libraries to create your own custom web components.

Modular Architecture Each core library, @semantic-ui/query, @semantic-ui/reactivity, @semantic-ui/templating, @semantic-ui/utils are each designed to be standalone and can be used without adoping the full component framework.