Quick Start

Installation

Note on Technical Preview - Semantic UI is in technical preview, the primary focus has been on authoring the component framework which UI components will be written. It is recommended if you are looking to use Semantic UI primarily as a UI framework to check back in 2025 for more robust components.

To get started, install the package using npm:

npm install @semantic-ui/core

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>

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

Theming