> For the complete documentation index, see [llms.txt](https://ronniesan.gitbook.io/remix-css/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://ronniesan.gitbook.io/remix-css/installation.md).

# Installation

How to install and start using Remix CSS.

At its core, Remix CSS is really just a set of LessCSS stylesheets that can be used in conjunction with your own styles. Integrating the Remix CSS styles should be done via a theme file (located in the root directory of the Remix CSS folder).  The theme file is basically a collection of LessCSS variables (see the theming section for more information).

### Install via NPM

Installing via NPM is very easy.  Simply run the following command in your terminal.

```bash
$ npm install --save remix-css
```

This will add the `remix-css` folder to your `node_modules` folder.

### Import the Theme File

To use the entire **Remix CSS** style library, import a theme file into your main stylesheet. You can either create your own theme file or use the default theme included in the root directory of the **Remix CSS** package folder.

To import the theme file, use a standard LessCSS import and add your own styles below it...

```css
@import './node_modules/remix-css/default.theme.less';
```

### Using the Webpack Resolver

When using the **less-loader** with Webpack, the webpack resolver is used for your imports by default unless you use the `paths` option. It's recommended to avoid using the `paths` option so the Webpack resolver can be used along with the `alias` option.

When using the Webpack resolver with the **less-loader**, remember to use the `~` with your import statements to point to packages in the `node_modules` folder. So if you create your own theme file locally when using the **Remix CSS** package,  you can import the **Remix CSS** styles at the bottom of it using the following path...

```css
@import '~remix-css/src/less/styles.less';
```