# Installation

Two tags, no build step. Or copy the files into your project.

## Link the files

Add the stylesheet and the script. That is the whole installation.

```
<!doctype html>
<html lang="en" data-noodle="mian">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://mian.ro/dist/mian.css">
  <script src="https://mian.ro/dist/mian.js" defer></script>
</head>
<body>
  <button class="mn-btn">Hello, MIAN</button>
</body>
</html>
```

## Self-host

Download [mian.css](https://mian.ro/dist/mian.css) (or [mian.min.css](https://mian.ro/dist/mian.min.css)) and [mian.js](https://mian.ro/dist/mian.js) and serve them yourself. There are no other files: no fonts, no icons, no images.

## CSS only

If you only need the 99 CSS-only components, leave out the script. Components that use it are marked CSS + mian.js on their page.

## Copy into your project

Every component and noodle is also a registry item, a JSON file with its CSS, example markup and metadata, in the open registry-item format, so you can keep your own copy:

```
curl -O https://mian.ro/r/button.json        # a component
curl -O https://mian.ro/r/noodle-fensi.json  # a noodle (tokens + skin)
```

The full list is at [/r/registry.json](https://mian.ro/r/registry.json).

## Remember the reader's theme

The theme controller stores the chosen noodle and mode in `localStorage`. Put this in `<head>`, before the stylesheet, to apply it before first paint:

```
<script>
  try {
    var n = localStorage.getItem('mian:noodle'), m = localStorage.getItem('mian:mode');
    if (n) document.documentElement.setAttribute('data-noodle', n);
    if (m) document.documentElement.setAttribute('data-mode', m);
  } catch (e) {}
</script>
```

Source: https://mian.ro/docs/installation
