
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 theme to define global variables used across components
import '@semantic-ui/core/themes/base.css';
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';
Use UI components wherever you write html:
<ui-button primary>Click me</ui-button>
Import the global theme to define global variables used across components
<head> <link href="https://cdn.semantic-ui.com/@semantic-ui/core/0.10.9/dist/theme/base.css" rel="stylesheet" /></head>
Import the UI Components
Option 1 - Import only the components you would like to use.
<head> <script src="https://cdn.semantic-ui.com/@semantic-ui/core/0.10.9/dist/ui/components/button.js"></script> <script src="https://cdn.semantic-ui.com/@semantic-ui/core/0.10.9/dist/themes/button.css"></script> </head>
Option 2 - Import the entire framework to access every component.
<head><script src="https://cdn.semantic-ui.com/@semantic-ui/core/0.10.9/dist/semantic-ui.css"></script><script src="https://cdn.semantic-ui.com/@semantic-ui/core/0.10.9/dist/semantic-ui.js"></script></head>
Use UI components wherever you write html:
<ui-button primary>Click me</ui-button>