On This Page
What is Semantic UI?
Using Components
Building Components
Get Started
Introduction
What is Semantic UI?
Semantic UI is three things:
- A component library: buttons, dropdowns, modals, menus all ready to use
- An authoring framework: for building your own components with reactive state and templating
- A theming system: CSS tokens for color, spacing, and light/dark mode that govern all components
Components are native Web Components. They work in React, Vue, Svelte, or plain HTML—no adapters, no framework-specific versions.
Semantic ships with signals-based reactivity, AST-compiled templates, and runs natively in the browser without a build step. Learn more →
Semantic ships with signals-based reactivity, AST-compiled templates, and runs natively in the browser without a build step. Learn more →
Using Components
Pick from primitives, components, and behaviors. Use them as HTML tags. Theme with CSS variables.
Primitives
Base elements: button, icon, input, label.
Components
Complex UI: dropdown, modal, menu, tabs.
Behaviors
Attachable logic: transitions, validation, tooltips.
Building Components
Create custom components like <order-form> or <user-profile> using the same tools the library is built with. Your components inherit the theming system automatically.
Authoring Guide
Build custom web components with reactive state, templates, and scoped styling.
Get Started
- Install Semantic UI in your project
- Browse examples to see what’s possible
- Try the interactive tutorial to learn by doing