Semantic UI
ctrl+k
Enter a search term above to see results...
On This Page
Introduction
Usage
Introduction
Semantic UI is a framework for authoring standard W3C Web Components. Components work natively in modern browsers and integrate with frameworks like React, Vue, and Angular.
Design System vs 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 Features
- Signals-based reactivity for state management.
- Declarative templating for rendering component views.
- DOM querying tailored for Shadow DOM encapsulation.
- CSS token framework for dark/light mode styling and theming.
- Integrated event handling tools.
- Declarative keybinding management.
Usage
Pre-built Components
The @semantic-ui/core package provides pre-built UI components for building websites and applications.
@semantic-ui/core
Standard UI components like buttons, cards, inputs, etc., for building applications.
Custom Components
For building custom UI elements, use the component authoring framework — a set of composable libraries for creating web components.
@semantic-ui/component
Core library for defining and managing Web Component lifecycle, state, and behavior.
@semantic-ui/templating
Template language with AST compilation for rendering component views.
@semantic-ui/reactivity
Signals-based reactivity library for managing component state.
@semantic-ui/query
Chainable DOM querying API adapted for Shadow DOM encapsulation.
@semantic-ui/utils
General-purpose JavaScript functions focused on readability.
Modular Architecture Each core library (
@semantic-ui/query,@semantic-ui/reactivity,@semantic-ui/templating,@semantic-ui/utils) can be used standalone without adopting the full component framework.