Components

Creating Components

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

• Templating - An reactive templating system to render web components with reactive expressions, snippets, subtemplating, template helpers, loops, conditionals, and more. An integrated signals based reactivity system make for precision updates. Supports full composable components in a similar fashion to React, Vue, Svelte or other front end frameworks.
• CSS Design System - Robust design system based off CSS variables, CSS layers, and HDR colorspaces.
• DOM Manipulation - A jQuery like chainable DOM library that is built to handle the encapsulation of the shadow DOM.
• Events - Built in systems for handling event listeners, dispatching events and passing data through the DOM.
• Keybindings - Fully featured keybinding library that makes every component fully accessible.
• Lifecycle Events - Feature packaged lifecycle events, built to make server side rendering robust and easy.
• Reactivity - A powerful reactivity system based on signals but with helpers to make your life easier.

Minimal Example

The following is a minimal example to get you familiar with how components are defined.

Developer Experience

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.

Key Features

Portable

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: () => { ... },
});

Robust Templating

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}

Design System

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);
  }
}

Events & Keybindings

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),
};