Manage Semantic UI components

Semantic UI has the ability to enable or disable components individually. So if you're sure you will never use a component in your project, you can exclude it from the config file (semantic.json). This reduces the size of your main CSS/JS files, but keep in mind that some components rely on one another to function properly (for example: the 'search' component needs 'input' to be installed as well).

An example with a minimal set of components:

{
    "components": [
        "reset",
        "site",
        "button",
        "container",
        "divider",
        "header",
        "icon",
        "image",
        "list",
        "segment",
        "grid",
        "menu",
        "card",
        "accordion",
        "dropdown",
        "embed",
        "popup",
        "sidebar",
        "sticky",
        "transition",
        "visibility"
    ],
    "individuals": [
        "form",
        "calendar",
        "modal",
        "step",
        "flag"
    ]
}

Notice the "individuals". You can specify components there that you want to include in your build, but not in your main semantic.css / semantic.js files. This way, their asset files are generated individually under /dist, so you can reference them only where needed.