![Logo](/_astro/logo.DNC1PCTe_Z1abT04.webp)
Enter a search term above to see results...
Enter a search term above to see results...
Semantic UI is a reactive framework to make it easier to build websites with web components by providing a robust set of tools that help avoid the common pitfalls that people experience when trying to leave front end frameworks like React, or Vue and “go native” with web components.
Getting Started - It’s recommended to check out our interactive tutorial to introduce yourself to the features of Semantic UI before digging into the tech guides.
Core features of Semantic UI
The following is a minimal example to get you familiar with how components are defined.
Components provides everything you’d expect from other modern front end frameworks, but is developed specifically for web components.
UI component can attach themselves to an html tags that can be used immediately in your site, or be used as partials inside other components.
Web Components vs Frameworks (Svelte/React/Vue) - Web components can render without compilation in the browser making them extremely potent and portable. All major frameworks support web components making them accessible and portable if you choose to write part or all of your stack using a major framework.
Components are defined using defineComponent
which exports a web components which can be used natively in the browser, or in React, Vue, Svelte and 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.
{#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 provides an integrated design system powered by css layers and variables with native encapsulation provided by the Shadow DOM.
/* expose theming variables for your component 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 a built in event management built around native DOM events, making it easy to dispatch 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 events and trigger functionality.
const events = { 'click .increment': ({ self }) => self.increment(), 'click .decrement': ({ self }) => self.decrement(),};
Or bind keybindings scoped to your component.
const keys = { 'up': ({ self }) => self.decrement(), 'down': ({ self }) => self.increment(), 'shift + up': ({ self }) => self.decrement(10), 'shift + down': ({ self }) => self.increment(10),};