# Semantic UI — Human-Friendly UI Component Framework

> Semantic UI is a front-end component framework that uses human-friendly HTML class names to create responsive, themeable layouts. It provides over 50 UI components designed around natural language principles.

## Install

Save in your project root:

# Semantic UI — Human-Friendly UI Component Framework

## Quick Use
```bash
npm install semantic-ui-css
# In your JS entry file:
# import 'semantic-ui-css/semantic.min.css';
```

## Introduction
Semantic UI is a CSS component framework built around the idea that class names should read like natural language. Instead of cryptic abbreviations, you write classes like `ui large primary button`, making HTML self-documenting. The framework ships over 50 UI components with deep theming support and consistent design language.

## What Semantic UI Does
- Provides 50+ production-ready UI components including buttons, forms, modals, tables, and menus
- Uses natural language class naming conventions so markup is readable without referencing docs
- Includes a comprehensive theming system with site, component, and element-level overrides
- Ships responsive grid and container systems with flexbox support
- Integrates with jQuery for interactive components like dropdowns, popups, and accordions

## Architecture Overview
Semantic UI is built with LESS CSS and organized into definitions (components), themes (visual styling), and site-level configuration. Each component has a separate LESS file with variables that can be overridden at three inheritance levels: defaults, packaged themes, and site-specific customizations. The build system compiles only the components you need into a single CSS and JS bundle.

## Self-Hosting & Configuration
- Install via npm (`semantic-ui-css` for prebuilt or `semantic-ui` for the full theming pipeline)
- For custom themes, run `npx semantic-ui install` and edit files in `src/themes/` and `src/site/`
- Build custom bundles with `npx gulp build` to include only the components your project uses
- Use the CDN version for quick prototyping without any build setup
- Pair with Fomantic UI (community fork) for additional maintained components and bug fixes

## Key Features
- Natural language syntax where classes describe what they do: `ui three column grid`, `ui inverted segment`
- Three-level theming with inheritance: global defaults, packaged themes, and site overrides
- Responsive design with visibility utilities, stackable grids, and device-specific classes
- Component behaviors powered by jQuery modules with consistent API patterns
- Over 3,000 theme variables allow fine-grained control over every visual detail

## Comparison with Similar Tools
- **Bootstrap** — more widely adopted with stronger ecosystem; Semantic UI offers more expressive class naming
- **Bulma** — pure CSS with no JS dependency; Semantic UI includes interactive JS components
- **Tailwind CSS** — utility-first approach; Semantic UI is component-first with higher-level abstractions
- **Ant Design** — React-specific component library; Semantic UI is framework-agnostic HTML/CSS/JS
- **Foundation** — similar component scope; Semantic UI's theming engine is more granular

## FAQ
**Q: Is Semantic UI still maintained?**
A: The original repo receives infrequent updates. Fomantic UI is an actively maintained community fork that stays API-compatible while adding features and fixes.

**Q: Can I use Semantic UI with React or Vue?**
A: Yes. Semantic UI React provides official React bindings. For Vue, community wrappers are available, or you can use the CSS-only package.

**Q: How does the theming system work?**
A: You override LESS variables at three levels: packaged themes set broad visual direction, and site-level overrides customize individual components. The build merges all levels.

**Q: How large is the full CSS bundle?**
A: The complete minified CSS is roughly 630 KB. Custom builds including only needed components can reduce this significantly.

## Sources
- https://github.com/Semantic-Org/Semantic-UI
- https://semantic-ui.com/

---
Source: https://tokrepo.com/en/workflows/0cc624cb-3fb6-11f1-9bc6-00163e2b0d79
Author: AI Open Source