@semantic-ui/core

Semantic UI Next

A modern, lightweight UI framework built with Web Components.

Note: This is an early technology preview. APIs and structures may change.

Installation

npm install @semantic-ui/core

Usage

Direct Component Imports

For the most efficient imports, you can import individual components directly:

// Import specific components
import { UIButton } from '@semantic-ui/core/button';
import { UICard } from '@semantic-ui/core/card';

// Import global theme
import '@semantic-ui/core/theme';

// Or import component-specific themes (if needed)
import '@semantic-ui/core/theme/button';
import '@semantic-ui/core/theme/card';

Full Framework Import

If you need multiple components, you can import from the main package:

// Import multiple components
import { UIButton, UICard, UIMenu } from '@semantic-ui/core';

// Import global theme
import '@semantic-ui/core/theme';

CDN Usage

For quick prototyping or projects without a build step, you can use the CDN:

<!-- Import the entire framework -->
<script type="module" src="https://cdn.jsdelivr.net/npm/@semantic-ui/core/dist/cdn/semantic-ui.min.js"></script>

<!-- Import global theme CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@semantic-ui/core/dist/cdn/theme.min.css">

Or load individual components:

<!-- Import just the button component -->
<script type="module" src="https://cdn.jsdelivr.net/npm/@semantic-ui/core/dist/cdn/button.min.js"></script>

<!-- Import global theme CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@semantic-ui/core/dist/cdn/theme.min.css">

<!-- Or import component-specific theme (if needed) -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@semantic-ui/core/dist/cdn/theme/button.min.css">

Contributing

Please see CONTRIBUTING.md for development setup instructions and contribution guidelines.

License

MIT