
Enter a search term above to see results...
Enter a search term above to see results...
Semantic UI components are standard Web Components built with an integrated authoring framework. The framework simplifies common UI development tasks like managing state, rendering templates, handling events, and styling.
Getting Started: Before diving into the technical guides, consider the interactive tutorial for a hands-on introduction to Semantic UI features.
The component framework includes:
@semantic-ui/query
) specifically designed to work effectively with Shadow DOM boundaries.The following example shows a complete component definition with state, template, and events using defineComponent
.
Web components can be difficult to integrate using vanilla js. Semantic UI improves the experience working with web standards by providing modern tooling that developers expect, without a compilation step or build complexity.
Components defined using defineComponent
can be registered with a tagName
for direct use in HTML or exported without a tagName
for use as subtemplates within other components.
Framework Integration: As standard Web Components, elements created with Semantic UI can be used directly within applications built with React, Vue, Angular, or any other framework that supports custom elements. They render natively in the browser without requiring framework-specific compilation.
Components are defined using defineComponent
, which registers a standard custom element (if tagName
is provided) usable natively in the browser or within other frameworks.
defineComponent({ tagName: 'my-component', template: '...', css: '...', defaultState: { ... }, settings: { ... }, createComponent: () => ({ ... }), onCreated: () => { ... }, onRendered: () => { ... }, onDestroyed: () => { ... },});
Components use a built-in templating system that supports expressions, slots, conditionals, snippets, loops, and more for rendering views from component data.
{#each user in users} <div class="user"> {#if user} <h2>{user.name}</h2> <p>{user.email}</p> {else} <p>No info provided.</p> {/if} </div>{/each}
Components utilize an integrated styling system leveraging CSS layers and variables, with style encapsulation provided by the Shadow DOM.
/* theming variables inherited from design system */:host { --counter-padding: var(--padding); --counter-value-color: var(--primary-text-color);}.counter { padding: var(--counter-padding);
.value { color: var(--counter-color); }}
Components include built-in event management using a declarative syntax, simplifying the process of handling user interactions and dispatching custom events.
const createComponent = ({state, dispatchEvent}) => ({ increment(amount) {
// update internal counter state.counter.increment(amount);
// dispatches a dom event 'increment' from this web component dispatchEvent('increment', { counter: state.counter.value, amount }); }, decrement(amount) { // update internal counter state.counter.decrement(amount);
// dispatches a dom event 'decrement' from this web component dispatchEvent('decrement', { counter: state.counter.value, amount }); }});
Listen to internal events and trigger component functionality.
const events = { 'click .increment': ({ self }) => self.increment(), 'click .decrement': ({ self }) => self.decrement(),};
Or listen to external dispatched events from other components.
const events = { // listen to the increment, decrement event from another component 'increment ui-counter, decrement ui-counter': ({ self }) => self.logValue(),};
Or bind global events tied to your components lifecycle.
// listen to global hashchange, teardown when component is destroyedconst events = { 'global hashchange window': ({ self }) => self.updateSomething(),};
Bind key bindings scoped to your component that include key combinations or sequences.
const keys = { 'up': ({ self }) => self.decrement(), 'down': ({ self }) => self.increment(), 'shift + up': ({ self }) => self.decrement(10), 'shift + down': ({ self }) => self.increment(10),};