VS Code Extension

Airframe IntelliSense enhances the Airframe development experience with autocomplete and hover documentation for design tokens and component classes.

Installation

Install via the Visual Studio Code Marketplace →

Also works in Cursor (Extensions → search Airframe IntelliSense).

For the extension to activate, open a supported file type (CSS, HTML, JS/TS, JSX/TSX, or Astro). Suggestions appear when you type Airframe prefixes such as --af-, .af-, or af- inside class / className.

Features

Autocomplete

Intelligent suggestions for:

• Design tokens — --af-* and var(--af-…)
• Component and utility classes — af-* (2,400+ including responsive variants)
• Responsive suffixes — type af-stack@ for @xs / @sm / @md / @lg / @xl / @2xl
• Modifiers — af-is-primary, af-is-sm, and more

<button class="af-btn af-is-primary">
  Click me
</button>
<div class="af-grid af-grid-2 af-grid-4@md">
  …
</div>

.panel {
  color: var(--af-color-primary);
  padding: var(--af-space-4);
  border-radius: var(--af-radius-md);
}

Hover Preview

Hover any --af-* token or .af-* class to see values, category, and related modifiers — without leaving the editor.

Supported languages

CSS · SCSS · Less · HTML · JavaScript / JSX · TypeScript / TSX · Astro

Recommended VS Code settings

editor.quickSuggestions

By default VS Code may not trigger completions inside string attributes (for example JSX className or HTML class). Turning string suggestions on improves the experience:

{
  "editor.quickSuggestions": {
    "strings": "on"
  }
}

Extension settings

Setting	Default	Description
airframeui.enable	true	Enable or disable Airframe IntelliSense

Troubleshooting

If IntelliSense is not activating:

1. Confirm Airframe IntelliSense is installed and enabled.
2. Check the language mode in the status bar (e.g. HTML, CSS, Astro) — plain text will not activate completions.
3. Ensure airframeui.enable is not set to false.
4. For completions inside class="…", enable editor.quickSuggestions.strings (see above) or invoke manually with Ctrl+Space / Cmd+Space.
5. Reload the window after installing or updating the extension.

Related

• ESLint Plugin — Catch Tailwind/Bootstrap drift in CI
• Installation — Add @airframeui/core to your project
• Tokens — Design token reference