Installation

Get started with Interplanetary UI via CDN or local installation.

CDN (Recommended)

The easiest way to use Interplanetary UI. No build step required.

Full Bundle

Includes planetary theme + terminal fonts. Best for getting started quickly.

<!-- CSS -->
<link rel="stylesheet" href="https://cdn.interplanetaryui.com/latest/interplanetary.min.css">

<!-- JS (include before closing </body>) -->
<script src="https://cdn.interplanetaryui.com/latest/js/interplanetary.min.js"></script>

Modular Bundle

Pick only what you need for smaller bundle sizes.

<!-- Core (required) -->
<link rel="stylesheet" href="https://cdn.interplanetaryui.com/latest/core.min.css">
<link rel="stylesheet" href="https://cdn.interplanetaryui.com/latest/windows.min.css">

<!-- Theme (pick one) -->
<link rel="stylesheet" href="https://cdn.interplanetaryui.com/latest/themes/planetary.min.css">

<!-- Font (pick one) -->
<link rel="stylesheet" href="https://cdn.interplanetaryui.com/latest/fonts/terminal.min.css">

Available Files

CSS Bundles

File	Contents
`interplanetary.min.css`	Full bundle (core + windows + planetary theme + terminal fonts)
`core.min.css`	Tokens + base styles + all components
`windows.min.css`	All container components (window, panel, frame, section, modal)

Themes

File	Description
`themes/planetary.min.css`	Amber/black — corporate sci-fi
`themes/industrial.min.css`	Blue/steel — corporate sterile
`themes/military.min.css`	Olive/khaki — tactical operations
`themes/royal.min.css`	Gold/burgundy — Dune imperial

Fonts

File	Description
`fonts/terminal.min.css`	Bitmap fonts (Sharp PC3K, Eagle) — smaller sizes
`fonts/industrial.min.css`	Modern fonts (JetBrains Mono, Inter) — fonts not bundled

JavaScript

File	Description
`js/interplanetary.min.js`	Full bundle (all JS modules)
`js/theme.min.js`	Light/dark/system theme manager
`js/window.min.js`	Container minimize behavior
`js/dropdown.min.js`	Dropdown open/close behavior
`js/modal.min.js`	Modal open/close behavior
`js/tabs.min.js`	Tab switching behavior
`js/tree.min.js`	Tree expand/collapse behavior
`js/actions.min.js`	Copy-to-clipboard behavior

Versioning

Use /latest/ for automatic updates, or pin to a specific commit SHA for stability.

<!-- Always get latest updates -->
https://cdn.interplanetaryui.com/latest/interplanetary.min.css

<!-- Pin to specific version (commit SHA) -->
https://cdn.interplanetaryui.com/abc123def/interplanetary.min.css

Local Installation

For Tailwind v4 projects or when you need to customize the source.

Tailwind v4 Setup

@import "tailwindcss";

/* Core */
@import "./interplanetary-ui/css/tokens.css";
@import "./interplanetary-ui/css/base.css";
@import "./interplanetary-ui/css/components/index.css";

/* Theme (pick one) */
@import "./interplanetary-ui/css/themes/planetary.css";

/* Font (pick one) */
@import "./interplanetary-ui/css/fonts/terminal.css";

/* Containers */
@import "./interplanetary-ui/css/windows/window.css";
@import "./interplanetary-ui/css/windows/panel.css";
@import "./interplanetary-ui/css/windows/frame.css";
@import "./interplanetary-ui/css/windows/section.css";
@import "./interplanetary-ui/css/windows/modal.css";
@import "./interplanetary-ui/css/windows/utilities.css";