Usage Learn how to setup Semantic UI code Guide

Usage

Semantic UI’s first party component framework includes many of the common UI components that are essential building blocks of a website. These can be used inside your own custom components to build more complex components or simply anywhere you use html.

Note on Technical Preview Semantic UI is currently under heavy active development. The component framework will be fully available Q2 2025, and subsequently UI components will be completed throughout 2025 and 2026. It is recommended if you are looking to use Semantic UI primarily as a UI framework to check back later in 2025 for additional components.

Set up Guide

  1. Install the package using a package manager:

    Terminal window
    npm install @semantic-ui/core

  2. Import the global theme to define global variables used across components

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

  3. Import the UI Components

    Option 1 - Import only the components you would like to use.

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

    Option 2 - Import the entire framework to access every component.

    import '@semantic-ui/semantic-ui.js';
    import '@semantic-ui/semantic-ui.css';

  4. Use UI components wherever you write html:

    <ui-button primary>Click me</ui-button>
Next
HTML Usage