Semantic UI
ctrl+k
Enter a search term above to see results...
On This Page
Authoring Guide
Authoring Guide
Semantic UI provides packages for authoring standard W3C Web Components using the same underlying technologies built to create the first-party UI component framework.
Use the same UI anywhere you author websites, whether they are written in frameworks like React, Vue, and Angular.
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.
To see examples of custom components check out our examples gallery.
To see examples of custom components check out our examples gallery.
Packages
Semantic UI provides 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.
Each core library like @semantic-ui/query, @semantic-ui/reactivity, @semantic-ui/templating and @semantic-ui/utils are designed to be used as standalone packages that can be used without adopting the entire design framework.
Each core library like @semantic-ui/query, @semantic-ui/reactivity, @semantic-ui/templating and @semantic-ui/utils are designed to be used as standalone packages that can be used without adopting the entire design framework.