---
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/latest/bundling-skins/index.md"
version: "latest"
last_updated: "2025-12-10T03:38:03Z"
tokens: 1374
---
# Bundling TinyMCE skins using module loading

## File structure

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

```
./
├── icons/
├── langs/
├── license.txt
├── models/
├── 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
```
Example syntax for including the example icon pack in a bundle:

> **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](../introduction-to-bundling-tinymce/).

## Community Skins

Default skin (oxide)
```
./skins/ui/oxide/content.css
./skins/ui/oxide/content.inline.css
./skins/ui/oxide/skin.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/skin.css
./skins/ui/oxide-dark/skin.shadowdom.css
```
TinyMCE 5 skin (tinymce-5)
```
./skins/ui/tinymce-5/content.css
./skins/ui/tinymce-5/content.inline.css
./skins/ui/tinymce-5/skin.css
./skins/ui/tinymce-5/skin.shadowdom.css
```
TinyMCE 5 dark skin (tinymce-5-dark)
```
./skins/ui/tinymce-5-dark/content.css
./skins/ui/tinymce-5-dark/content.inline.css
./skins/ui/tinymce-5-dark/skin.css
./skins/ui/tinymce-5-dark/skin.shadowdom.css
```

## Enhanced Skins

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

Bootstrap skin
```
./skins/ui/bootstrap/content.css
./skins/ui/bootstrap/content.inline.css
./skins/ui/bootstrap/skin.css
./skins/ui/bootstrap/skin.shadowdom.css
```
Borderless skin
```
./skins/ui/borderless/content.css
./skins/ui/borderless/content.inline.css
./skins/ui/borderless/skin.css
./skins/ui/borderless/skin.shadowdom.css
```
Fabric skin
```
./skins/ui/fabric/content.css
./skins/ui/fabric/content.inline.css
./skins/ui/fabric/skin.css
./skins/ui/fabric/skin.shadowdom.css
```
Fluent skin
```
./skins/ui/fluent/content.css
./skins/ui/fluent/content.inline.css
./skins/ui/fluent/skin.css
./skins/ui/fluent/skin.shadowdom.css
```
Jam skin
```
./skins/ui/jam/content.css
./skins/ui/jam/content.inline.css
./skins/ui/jam/skin.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/skin.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/skin.css
./skins/ui/material-outline/skin.shadowdom.css
```
Naked skin
```
./skins/ui/naked/content.css
./skins/ui/naked/content.inline.css
./skins/ui/naked/skin.css
./skins/ui/naked/skin.shadowdom.css
```
Outside skin
```
./skins/ui/outside/content.css
./skins/ui/outside/content.inline.css
./skins/ui/outside/skin.css
./skins/ui/outside/skin.shadowdom.css
```
Small skin
```
./skins/ui/small/content.css
./skins/ui/small/content.inline.css
./skins/ui/small/skin.css
./skins/ui/small/skin.shadowdom.css
```
Snow skin
```
./skins/ui/snow/content.css
./skins/ui/snow/content.inline.css
./skins/ui/snow/skin.css
./skins/ui/snow/skin.shadowdom.css
```

## Premium skins from `tinymce-premium` (NPM)

The `tinymce-premium` NPM package ships all premium skins in `tinymce-premium/skins/`. Choose one of the following patterns depending on how TinyMCE is deployed:

**Bundling (recommended for modern build tools)**

- Import the required skin files so the module bundler adds them to the application bundle. For example, importing the default skin (oxide):

```js
import 'tinymce-premium/skins/ui/oxide/skin.css';
import contentUiSkinCss from 'tinymce-premium/skins/ui/oxide/content.css';
// ... other TinyMCE imports
```
- After bundling, set `skin: false` and `content_css: false` in the editor configuration, then use `content_style` to inject the bundled CSS.

**Non-bundling with file layering**

- When hosting directly from `node_modules`, copy `node_modules/tinymce-premium/skins/` into `node_modules/tinymce/skins/` as part of the build or deployment step (for example, in a `postinstall` script).
- Once copied, premium skins live beside the core files, so setting `skin` works without extra configuration.

**Non-bundling with `skin_url`**

- Leave the premium skins in `node_modules/tinymce-premium/skins/` and configure [`skin_url`](../editor-skin/#skin_url) to point at the required skin directory.
- This approach avoids moving files and is useful when the `node_modules` directory is web-accessible (or when copying only the specific skin to a public folder).