---
title: "Bundling TinyMCE skins using module loading"
description: "Information on bundling TinyMCE skins using module loading"
canonical_url: "https://www.tiny.cloud/docs/tinymce/latest/bundling-skins/"
md_url: "https://www.tiny.cloud/docs/tinymce/5/bundling-skins/index.md"
version: "5"
last_updated: "2024-04-09T10:06:54Z"
tokens: 1556
---
Important This page documents TinyMCE 5. For new projects, Tiny recommends using the latest, most up-to-date version. [See TinyMCE 8 documentation](../../latest/bundling-skins/).
# Bundling TinyMCE skins using module loading

## Overview

This section shows the files required for each TinyMCE component. The file paths shown are relative to the root TinyMCE package directory, where `tinymce.min.js` is stored. For example:

```
./
├── icons/
├── jquery.tinymce.min.js
├── langs/
├── license.txt
├── plugins/
├── readme.txt
├── skins/
├── themes/
├── tinymce.d.ts
├── tinymce.js
├── tinymce.min.js
└── version.txt
```
The following table shows examples of the syntax used to bundle the following skin:

Required files for the example skin:

```js
./skins/ui/example/content.css
./skins/ui/example/skin.css
```
Optional files for the example skin:

```js
/* Only required for inline editors */
./skins/ui/example/content.inline.css
/* Only required when using the deprecated mobile theme */
./skins/ui/example/skin.mobile.css
./skins/ui/example/content.mobile.css
./skins/ui/example/fonts/tinymce-mobile.woff
```
Example syntax for including the example skin in a bundle:

**Module Syntax:** ES6+ · **Source:** npm

**Example:**

```js
import contentUiCss from 'tinymce/skins/ui/example/content.css';
import 'tinymce/skins/ui/example/skin.css';
/* Only required for inline editors */
import contentUiInlineCss from 'tinymce/skins/ui/example/content.inline.css';
```
**Module Syntax:** ES6+ · **Source:** `.zip`

**Example:**

```js
import contentUiCss from '../tinymce/skins/ui/example/content.css';
import '../tinymce/skins/ui/example/skin.css';
/* Only required for inline editors */
import contentUiInlineCss from '../tinymce/skins/ui/example/content.inline.css'
```
**Module Syntax:** Common JS · **Source:** npm

**Example:**

```js
var contentUiCss = require('tinymce/skins/ui/example/content.css');
require('tinymce/skins/ui/example/skin.css');
/* Only required for inline editors */
var contentUiInlineCss = require('tinymce/skins/ui/example/content.inline.css');
```
**Module Syntax:** Common JS · **Source:** `.zip`

**Example:**

```js
var contentUiCss = require('../tinymce/skins/ui/example/content.css');
require('../tinymce/skins/ui/example/skin.css');
/* Only required for inline editors */
var contentUiInlineCss = require('../tinymce/skins/ui/example/content.inline.css');
```

> **Important:** The handling of content CSS files (such as `content.css` or `content.min.css`) varies between bundling tools. View the relevant guide for the required syntax at [Bundling TinyMCE with a module loader](../usage-with-module-loaders/).

## Community Skins

Default skin (oxide)
```
./skins/ui/oxide/content.css
./skins/ui/oxide/content.inline.css
./skins/ui/oxide/content.mobile.css
./skins/ui/oxide/fonts/tinymce-mobile.woff
./skins/ui/oxide/skin.css
./skins/ui/oxide/skin.mobile.css
./skins/ui/oxide/skin.shadowdom.css
```
Dark skin (oxide-dark)
```
./skins/ui/oxide-dark/content.css
./skins/ui/oxide-dark/content.inline.css
./skins/ui/oxide-dark/content.mobile.css
./skins/ui/oxide-dark/fonts/tinymce-mobile.woff
./skins/ui/oxide-dark/skin.css
./skins/ui/oxide-dark/skin.mobile.css
./skins/ui/oxide-dark/skin.shadowdom.css
```

## Premium Skins

For information on premium editor skins, see: [Tiny Skins and Icon Packs](../enhanced-skins-and-icon-packs/).

Bootstrap skin
```
./skins/ui/bootstrap/content.css
./skins/ui/bootstrap/content.inline.css
./skins/ui/bootstrap/content.mobile.css
./skins/ui/bootstrap/skin.css
./skins/ui/bootstrap/skin.mobile.css
./skins/ui/bootstrap/skin.shadowdom.css
```
Borderless skin
```
./skins/ui/borderless/content.css
./skins/ui/borderless/content.inline.css
./skins/ui/borderless/content.mobile.css
./skins/ui/borderless/skin.css
./skins/ui/borderless/skin.mobile.css
./skins/ui/borderless/skin.shadowdom.css
```
Fabric skin
```
./skins/ui/fabric/content.css
./skins/ui/fabric/content.inline.css
./skins/ui/fabric/content.mobile.css
./skins/ui/fabric/skin.css
./skins/ui/fabric/skin.mobile.css
./skins/ui/fabric/skin.shadowdom.css
```
Fluent skin
```
./skins/ui/fluent/content.css
./skins/ui/fluent/content.inline.css
./skins/ui/fluent/content.mobile.css
./skins/ui/fluent/skin.css
./skins/ui/fluent/skin.mobile.css
./skins/ui/fluent/skin.shadowdom.css
```
Jam skin
```
./skins/ui/jam/content.css
./skins/ui/jam/content.inline.css
./skins/ui/jam/content.mobile.css
./skins/ui/jam/skin.css
./skins/ui/jam/skin.mobile.css
./skins/ui/jam/skin.shadowdom.css
```
Material (Classic) skin
```
./skins/ui/material-classic/content.css
./skins/ui/material-classic/content.inline.css
./skins/ui/material-classic/content.mobile.css
./skins/ui/material-classic/skin.css
./skins/ui/material-classic/skin.mobile.css
./skins/ui/material-classic/skin.shadowdom.css
```
Material (Outline) skin
```
./skins/ui/material-outline/content.css
./skins/ui/material-outline/content.inline.css
./skins/ui/material-outline/content.mobile.css
./skins/ui/material-outline/skin.css
./skins/ui/material-outline/skin.mobile.css
./skins/ui/material-outline/skin.shadowdom.css
```
Naked skin
```
./skins/ui/naked/content.css
./skins/ui/naked/content.inline.css
./skins/ui/naked/content.mobile.css
./skins/ui/naked/skin.css
./skins/ui/naked/skin.mobile.css
./skins/ui/naked/skin.shadowdom.css
```
Outside skin
```
./skins/ui/outside/content.css
./skins/ui/outside/content.inline.css
./skins/ui/outside/content.mobile.css
./skins/ui/outside/skin.css
./skins/ui/outside/skin.mobile.css
./skins/ui/outside/skin.shadowdom.css
```
Small skin
```
./skins/ui/small/content.css
./skins/ui/small/content.inline.css
./skins/ui/small/content.mobile.css
./skins/ui/small/skin.css
./skins/ui/small/skin.mobile.css
./skins/ui/small/skin.shadowdom.css
```
Snow skin
```
./skins/ui/snow/content.css
./skins/ui/snow/content.inline.css
./skins/ui/snow/content.mobile.css
./skins/ui/snow/skin.css
./skins/ui/snow/skin.mobile.css
./skins/ui/snow/skin.shadowdom.css
```