Skip to content
Airframe

Installation

Install @airframeui/core, import one CSS file, and start using patterns. No build plugin required.

Installation

Section titled “Installation”

01 — Install the package

Section titled “01 — Install the package”
npm install @airframeui/core

# or

yarn add @airframeui/core
pnpm add @airframeui/core

02 — Import the CSS

Section titled “02 — Import the CSS”

Add Airframe to your global stylesheet (recommended):

@import "@airframeui/core/core.css";

Or link it from HTML:

<link rel="stylesheet" href="node_modules/@airframeui/core/core.css">

03 — Start using Airframe

Section titled “03 — Start using Airframe”

Use semantic pattern classes immediately:

<button class="af-btn">
  Primary action
</button>
<div class="af-card">
  <h2 class="af-card__title">
    Card Title
  </h2>
  <p class="af-card__body">
    Card content goes here.
  </p>
</div>

Framework guides

Section titled “Framework guides”

Prefer a framework-specific entrypoint? Use these and skip the generic steps above.

Next.js

Section titled “Next.js”

Add to app/globals.css or styles/globals.css:

@import "@airframeui/core/core.css";

See the full Next.js guide.

React (Vite / Next.js)

Section titled “React (Vite / Next.js)”

Add to your main CSS file (e.g. src/index.css):

@import "@airframeui/core/core.css";

Angular

Section titled “Angular”

Add to angular.json under projects.<app>.architect.build.options:

"styles": [
  "node_modules/@airframeui/core/core.css",
  "src/styles.scss"
]

Or import in src/styles.scss:

@import "@airframeui/core/core.css";

See the full Angular guide.

Vue

Section titled “Vue”

Add to your main CSS file or import from main.js / main.ts:

@import "@airframeui/core/core.css";

Next steps

Section titled “Next steps”