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 CSS to define design tokens required by components

    import '@semantic-ui/core/css';

  3. Import Specific UI Components - CSS is automatically included in each component’s Shadow DOM

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

    import { UIButton } from '@semantic-ui/core';

    Or use the export condition without importing the component.

    import '@semantic-ui/core/button';

    Import All - Import the entire framework to access every component.

    import '@semantic-ui/core';

  4. Use UI components wherever you write html:

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