
Enter a search term above to see results...
Enter a search term above to see results...
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.
Install the package using a package manager:
npm install @semantic-ui/core
pnpm install @semantic-ui/core
yarn add @semantic-ui/core
Import the global CSS to define design tokens required by components
import '@semantic-ui/core/css';
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';
Use UI components wherever you write html:
<ui-button primary>Click me</ui-button>
Import the global CSS for global css design tokens.
<head> <link href="https://cdn.semantic-ui.com/@semantic-ui/core/0.11.1/dist/semantic-ui.css" rel="stylesheet" /></head>
3a. Import the UI Components - Components do not need additional css
Option 1 - Import only the components you would like to use.
<head> <script src="https://cdn.semantic-ui.com/@semantic-ui/core/0.11.1/dist/cdn/button.js"></script></head>
Option 2 - Import the entire framework to access every component.
<head> <script src="https://cdn.semantic-ui.com/@semantic-ui/core/0.11.1/dist/cdn/semantic-ui.js"></script></head>
3a. Import All UI Components - CSS is automatically included in each component’s Shadow DOM
Option 1 - Import only the components you would like to use.
<head> <script src="https://cdn.semantic-ui.com/@semantic-ui/core/0.11.1/dist/cdn/button.js"></script></head>
Option 2 - Import the entire framework to access every component.
<head> <script src="https://cdn.semantic-ui.com/@semantic-ui/core/0.11.1/dist/cdn/semantic-ui.js"></script></head>
Use UI components wherever you write html:
<ui-button primary>Click me</ui-button>