Semantic UI

This is the official CDN for Semantic UI Next. Use it to easily import Semantic UI components and utilities directly in your browser using ES modules.

New importmap loader available!

Use <script src="https://cdn.semantic-ui.com/importmap.js"></script> to automatically set up all dependencies.

Quick Start

Choose the method that works best for your project:

Inline Importmap (Recommended)

Loader Script

Direct Imports

<!-- Add this to your HTML head -->
<script type="importmap">
{
  "imports": {
    "@semantic-ui/component": "https://cdn.semantic-ui.com/@semantic-ui/component/0.17.0/src/index.js"
  }
}
</script>

<!-- Then import anywhere in your code -->
<script type="module">
  import { defineComponent } from '@semantic-ui/component';
  
  defineComponent({
    tagName: 'current-time',
    template: `Time is <b>{formatDate time "h:mm:ss a"}</b>`,
    css: 'b { color: blue; }',
    defaultState: { time: new Date() },
    onCreated({state}) {
      setInterval(() => state.time.now(), 1000);
    }
  });
</script>

Available Packages

All packages are versioned independently. Click a package to view its details and available versions.

@semantic-ui/core v0.17.0

Core package with all UI components and styles

@semantic-ui/reactivity v0.17.0

Reactive state management primitives

@semantic-ui/component v0.17.0

Web component creation utilities

@semantic-ui/query v0.17.0

DOM querying and traversal utilities

@semantic-ui/templating v0.17.0

HTML templating engine

@semantic-ui/utils v0.17.0

Common utility functions

@semantic-ui/renderer v0.17.0

Rendering utilities

@semantic-ui/specs v0.17.0

Component specifications

Import Methods

1. Static Importmap Recommended

For the best compatibility, inline the importmap directly in your HTML:

<script type="importmap">
{
  "imports": {
    "@semantic-ui/core": "https://cdn.semantic-ui.com/@semantic-ui/core/0.17.0/src/semantic-ui.js",
    "@semantic-ui/component": "https://cdn.semantic-ui.com/@semantic-ui/component/0.17.0/src/index.js",
    "@semantic-ui/query": "https://cdn.semantic-ui.com/@semantic-ui/query/0.17.0/src/index.js",
    "@semantic-ui/reactivity": "https://cdn.semantic-ui.com/@semantic-ui/reactivity/0.17.0/src/index.js",
    "@semantic-ui/renderer": "https://cdn.semantic-ui.com/@semantic-ui/renderer/0.17.0/src/index.js",
    "@semantic-ui/specs": "https://cdn.semantic-ui.com/@semantic-ui/specs/0.17.0/src/index.js",
    "@semantic-ui/templating": "https://cdn.semantic-ui.com/@semantic-ui/templating/0.17.0/src/index.js",
    "@semantic-ui/utils": "https://cdn.semantic-ui.com/@semantic-ui/utils/0.17.0/src/index.js",
    "lit": "https://cdn.semantic-ui.com/lit/3.0.0/index.js",
  }
}
</script>

You can copy the full importmap from importmap-latest.json

2. Using the Importmap Loader

For dynamic loading with a simple script tag:

<script src="https://cdn.semantic-ui.com/importmap.js"></script>

<!-- Optional: Detect when importmap is ready -->
<script>
  window.addEventListener("importmap-ready", (event) => {
    console.log("Importmap loaded:", event.detail.importmap);
    // Start your application here
  });
</script>

<script type="module">
  // Import after the importmap is loaded
  import { Button } from '@semantic-ui/core';
  
  // Your code here
</script>

3. Direct URL Imports

Import directly with full paths if you don't want to use importmaps:

import { createSignal } from 'https://cdn.semantic-ui.com/@semantic-ui/reactivity/0.17.0/src/index.js';
import { Button } from 'https://cdn.semantic-ui.com/@semantic-ui/core/0.17.0/src/semantic-ui.js';

Usage Example

Minimal Time Display

<!DOCTYPE html>
<html>
<head>
  <title>Semantic UI Minimal Example</title>
  
  <!-- Import with importmap -->
  <script type="importmap">
  {
    "imports": {
      "@semantic-ui/component": "https://cdn.semantic-ui.com/@semantic-ui/component/0.17.0/src/index.js"
    }
  }
  </script>
</head>
<body>
  <current-time></current-time>
  
  <script type="module">
    import { defineComponent } from '@semantic-ui/component';
    
    defineComponent({
      tagName: 'current-time',
      template: `Time is <b>{formatDate time "h:mm:ss a"}</b>`,
      css: 'b { color: blue; }',
      defaultState: { time: new Date() },
      onCreated({state}) {
        setInterval(() => state.time.now(), 1000);
      }
    });
  </script>
</body>
</html>

Semantic UI Next CDN