Quick Start

Installation

To get started, install the package using npm:

npm install @semantic-ui/core

Usage

JavaScript
HTML

If you’re using a module bundler like webpack, Rollup, or Parcel, you can import the components and themes directly into your JavaScript files. Make sure your bundler is configured to handle CSS imports.

import '@semantic-ui/core/components/button';
import '@semantic-ui/core/themes/button.css';

<html>
<head>
  <link rel="stylesheet" href="https://unpkg.com/@semantic-ui/core/dist/themes/button.css">
  <script type="module" src="https://unpkg.com/@semantic-ui/core/components/button"></script>
</head>
<body>
  <ui-button primary>Click me</ui-button>
</body>
</html>

Framework Integration

Semantic UI Web Components can be easily integrated into popular JavaScript frameworks.

import React from 'react';
import '@semantic-ui/core/components/button';
import '@semantic-ui/core/themes/button.css';

function MyComponent() {
  return <ui-button primary>Click me</ui-button>;
}

export default MyComponent;

import { Component } from '@angular/core';
import '@semantic-ui/core/components/button';
import '@semantic-ui/core/themes/button.css';

@Component({
  selector: 'app-root',
  template: '<ui-button primary="true">Click me</ui-button>',
})
export class AppComponent {}

<template>
  <ui-button primary>Click me</ui-button>
</template>

<script setup>
import '@semantic-ui/core/components/button';
import '@semantic-ui/core/themes/button.css';
</script>

<script>
  import '@semantic-ui/core/components/button';
  import '@semantic-ui/core/themes/button.css';
</script>

<ui-button primary>Click me</ui-button>

import { html, LitElement } from 'lit';
import '@semantic-ui/core/components/button';
import '@semantic-ui/core/themes/button.css';

class MyComponent extends LitElement {
  render() {
    return html`<ui-button primary>Click me</ui-button>`;
  }
}

customElements.define('my-component', MyComponent);

---
import '@semantic-ui/core/components/button';
import '@semantic-ui/core/themes/button.css';
---

<ui-button primary>Click me</ui-button>

import '@semantic-ui/core/components/button';
import '@semantic-ui/core/themes/button.css';

function MyComponent() {
  return <ui-button primary>Click me</ui-button>;
}

export default MyComponent;

Theming

Semantic UI Web Components provides pre-defined themes that you can use out of the box. However, you can also customize the components by overriding their CSS variables.

It’s recommended to scope variables to :root, so they will pierce multiple shadow DOM boundaries.

:root {
  --button-primary-color: var(--red);
}

On This Page

Installation

Usage

Framework Integration

Theming