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.