Component API Reference

Component is the core library for defining UI components in Semantic UI and provides access to defineComponent the primary interface for creating new web components.

Reference Guide Only - It is recommended to check out the user docs for a technical overview of components. This guide is purely as a reference guide for the package.

Installation

To use Component, install the package:

npm install @semantic-ui/component

Basic Usage

import { defineComponent } from '@semantic-ui/component';

defineComponent({
  tagName: 'current-time',
  template: `Time is <b>{formatDate time "h:mm:ss a"}</b>`,
  css: 'b { color: var(--primary-text-color); }',
  state: { time: new Date() },
  onCreated({state}) {
    setInterval(() => state.time.now(), 1000);
  }
});

API Sections

• Define Component - Methods for defining and creating web components
• Web Component Base - Base class for Semantic UI web components
• Component Utilities - Utility functions used internally by the component package.