Skip to content
Airframe

Framework Support

Airframe is CSS-only and framework-agnostic. Install the core package and use it with any framework or vanilla HTML.

Install

Section titled “Install”
npm install @airframeui/core
@import "@airframeui/core/core.css";
<button class="af-btn">
  Works anywhere
</button>

React

Section titled “React”
/* src/index.css */
@import "@airframeui/core/core.css";
function App() {
return (
  <div className="af-container">
    <button className="af-btn">React Button</button>
  </div>
)
}

See React Recipes for copy-paste ready components.

Next.js

Section titled “Next.js”

App Router

Section titled “App Router”
/* app/globals.css */
@import "@airframeui/core/core.css";
// app/layout.tsx
import './globals.css'

export default function RootLayout({ children }) {
return (
  <html lang="en">
    <body>{children}</body>
  </html>
)
}

Pages Router

Section titled “Pages Router”
/* styles/globals.css */
@import "@airframeui/core/core.css";
// pages/_app.tsx
import '../styles/globals.css'

export default function App({ Component, pageProps }) {
return <Component {...pageProps} />
}

See Next.js Setup for a complete guide.

Angular

Section titled “Angular”
npm install @airframeui/core

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

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

Use directly in templates:

@Component({
selector: 'app-dashboard',
standalone: true,
template: `    <div class="af-stack af-gap-lg">
      <header class="af-inline af-justify-between">
        <h1>
          Dashboard
        </h1>
        <button class="af-btn">
          Create
        </button>
      </header>
      <div class="af-grid af-grid-3@lg af-gap-lg">
        <div class="af-card">
          <h3 class="af-card__title">
            Revenue
          </h3>
          <p class="af-text-h2">
            $84,200
          </p>
        </div>
      </div>
</div>`
})
export class DashboardComponent {}

See Angular Setup for a complete guide.

Vue

Section titled “Vue”
/* src/main.css */
@import "@airframeui/core/core.css";
<template>
<div class="af-container">
  <button class="af-btn">Vue Button</button>
</div>
</template>

Vanilla HTML

Section titled “Vanilla HTML”
<!DOCTYPE html>
  <html>
    <head>
      <link rel="stylesheet" href="node_modules/@airframeui/core/core.css">
    </head>
    <body>
      <button class="af-btn">
        Plain HTML
      </button>
    </body>
  </html>

Next Steps

Section titled “Next Steps”