fleet-air-web-components

v0.6.2

Published

3 months ago

Fleet Air component library for React - Mirror of JetBrains Fleet's Compose UI components for rapid web prototyping

0High
0Medium
0Low

vadim_lobodin

react components ui fleet jetbrains design-system tailwind shadcn typescript

Fleet Air Web Components

React component library mirroring JetBrains Fleet's Compose UI components for rapid web prototyping

Overview

Fleet Air Web Components is a comprehensive React component library that faithfully recreates JetBrains Fleet's design system for web applications. Built on modern technologies including React 19, Next.js 15, shadcn/ui, and Tailwind CSS 4, this library enables rapid prototyping with Fleet's distinctive look and feel.

⚠️ IMPORTANT LICENSE NOTICE This library is licensed for personal, non-commercial use only. Commercial use requires a separate license from JetBrains. See License section for details.

✨ Features

🎨 200+ Fleet Colors - Complete color palette with 80+ semantic tokens
📝 Typography System - 20+ variants matching Fleet's typography
🧩 40+ Components - Buttons, inputs, layouts, AI components, and more
🎭 Theme Support - Built-in light and dark modes
♿ Accessible - Built on Radix UI primitives
🌳 Tree-shakeable - Only bundle what you use
📦 TypeScript - Full type safety and IntelliSense
🎯 Prototyping-Ready - Components work with sensible defaults

Installation

npm install fleet-air-web-components
# or
pnpm add fleet-air-web-components
# or
yarn add fleet-air-web-components

📖 New to Fleet Components? Check out QUICKSTART.md for a minimal 3-step setup guide.

Peer Dependencies

Make sure you have the required peer dependencies installed:

npm install react react-dom
# Optional: next (only if using Next.js features)
npm install next

Quick Start

Next.js (Super Simple - 2 Steps!)

# 1. Create Next.js app + Install
npx create-next-app@latest my-app
cd my-app
npm install fleet-air-web-components

2. Configure (auto-generates Tailwind & PostCSS configs):

next.config.js:

const { withFleetComponents } = require('fleet-air-web-components/next-plugin');
module.exports = withFleetComponents();

app/layout.tsx:

import { ThemeProvider } from "fleet-air-web-components";
import "fleet-air-web-components/styles.css";

export default function RootLayout({ children }) {
  return (
    <html lang="en" suppressHydrationWarning>
      <body>
        <ThemeProvider attribute="class" defaultTheme="system">
          {children}
        </ThemeProvider>
      </body>
    </html>
  );
}

That's it! The plugin automatically creates tailwind.config.js and postcss.config.mjs. See QUICKSTART.md for details.

Other Frameworks (Manual Setup)

For Vite, CRA, or custom setups, see the Complete Setup Guide below.

TL;DR: Add Tailwind preset → Import variables.css → Use components

1. Configure Tailwind

Add the Fleet Tailwind preset and configure content scanning:

For Tailwind CSS v4 (tailwind.config.ts):

import type { Config } from "tailwindcss";
import fleetPreset from "fleet-air-web-components/tailwind-preset";

export default {
  presets: [fleetPreset],
  content: [
    "./src/**/*.{js,ts,jsx,tsx,mdx}",
    "./node_modules/fleet-air-web-components/dist/**/*.{js,mjs}",
  ],
} satisfies Config;

For Tailwind CSS v3 (tailwind.config.js):

module.exports = {
  presets: [require('fleet-air-web-components/tailwind-preset')],
  content: [
    './src/**/*.{js,ts,jsx,tsx,mdx}',
    './node_modules/fleet-air-web-components/dist/**/*.{js,mjs}',
  ],
};

2. Import Variables

Import the Fleet CSS variables in your global CSS or app entry point:

/* globals.css */
@import "fleet-air-web-components/variables.css";

Or in your layout/app file:

// app/layout.tsx or _app.tsx
import 'fleet-air-web-components/variables.css'

3. Setup Theme Provider

Wrap your app with the ThemeProvider for theme support:

import { ThemeProvider } from 'fleet-air-web-components'

export default function App({ children }) {
  return (
    <ThemeProvider attribute="class" defaultTheme="system">
      {children}
    </ThemeProvider>
  )
}

4. Use Components

Start using Fleet components:

import { Button, Typography, AiChatInput } from 'fleet-air-web-components'

export default function MyPage() {
  return (
    <div>
      <Typography variant="header-1-semibold">
        Welcome to Fleet
      </Typography>

      <Typography variant="default">
        Build beautiful UIs with Fleet components
      </Typography>

      <Button variant="primary" size="default">
        Get Started
      </Button>

      <AiChatInput placeholder="Ask AI anything..." />
    </div>
  )
}

Complete Setup Guide

Next.js App Router (Recommended)

This is the complete setup for Next.js 14+ with App Router:

1. Install dependencies:

npm install fleet-air-web-components react react-dom next
npm install -D tailwindcss @tailwindcss/postcss autoprefixer

2. Create tailwind.config.ts:

import type { Config } from "tailwindcss";

export default {
  presets: [require("fleet-air-web-components/tailwind-preset")],
  content: [
    "./src/**/*.{js,ts,jsx,tsx,mdx}",
    "./node_modules/fleet-air-web-components/dist/**/*.{js,mjs}",
  ],
} satisfies Config;

3. Create postcss.config.mjs:

const config = {
  plugins: {
    "@tailwindcss/postcss": {},
    autoprefixer: {},
  },
};

export default config;

4. Create src/app/providers.tsx:

"use client";

import { ThemeProvider } from "fleet-air-web-components";

export function Providers({ children }: { children: React.ReactNode }) {
  return (
    <ThemeProvider attribute="class" defaultTheme="system">
      {children}
    </ThemeProvider>
  );
}

5. Update src/app/layout.tsx:

import type { Metadata } from "next";
import { Providers } from "./providers";
import "fleet-air-web-components/variables.css";
import "./globals.css";

export const metadata: Metadata = {
  title: "My Fleet App",
  description: "Built with Fleet Air Web Components",
};

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en" suppressHydrationWarning>
      <body>
        <Providers>{children}</Providers>
      </body>
    </html>
  );
}

6. Create src/app/globals.css:

@import "tailwindcss";

7. Use components in src/app/page.tsx:

"use client";

import { Button, Typography, Icon } from "fleet-air-web-components";

export default function Home() {
  return (
    <div style={{ padding: "48px" }}>
      <Typography variant="header-1-semibold">
        Fleet Air Components Demo
      </Typography>

      <Button variant="primary">Get Started</Button>

      <Icon fleet="home" />
    </div>
  );
}

Vite + React

1. Install dependencies:

npm install fleet-air-web-components react react-dom
npm install -D tailwindcss @tailwindcss/vite autoprefixer

2. Create tailwind.config.ts:

import type { Config } from "tailwindcss";

export default {
  presets: [require("fleet-air-web-components/tailwind-preset")],
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
    "./node_modules/fleet-air-web-components/dist/**/*.{js,mjs}",
  ],
} satisfies Config;

3. Update vite.config.ts:

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import tailwindcss from '@tailwindcss/vite'

export default defineConfig({
  plugins: [react(), tailwindcss()],
})

4. Update src/main.tsx:

import React from 'react'
import ReactDOM from 'react-dom/client'
import { ThemeProvider } from 'fleet-air-web-components'
import 'fleet-air-web-components/variables.css'
import './index.css'
import App from './App'

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <ThemeProvider attribute="class" defaultTheme="system">
      <App />
    </ThemeProvider>
  </React.StrictMode>,
)

5. Create src/index.css:

@import "tailwindcss";

Troubleshooting

PostCSS Plugin Error

If you see: It looks like you're trying to use 'tailwindcss' directly as a PostCSS plugin

Solution: Use @tailwindcss/postcss instead:

// postcss.config.mjs
const config = {
  plugins: {
    "@tailwindcss/postcss": {},  // NOT "tailwindcss: {}"
    autoprefixer: {},
  },
};

export default config;

Components Not Styled

If components appear unstyled:

Check Tailwind config includes Fleet preset:

presets: [require("fleet-air-web-components/tailwind-preset")],

Check content paths include the package:

content: [
  "./node_modules/fleet-air-web-components/dist/**/*.{js,mjs}",
],

Verify variables.css is imported:

import 'fleet-air-web-components/variables.css'

Dark Mode Not Working

Make sure:

ThemeProvider has attribute="class"
Your <html> tag has suppressHydrationWarning
Variables.css is imported before your global CSS

TypeScript Errors

If you see module resolution errors:

// tsconfig.json
{
  "compilerOptions": {
    "moduleResolution": "bundler", // or "node16"
  }
}

How It Works

Fleet Air Web Components follows the shadcn/ui architecture:

Components export Tailwind classes - Not pre-compiled CSS
Tailwind preset - Provides Fleet design tokens to your Tailwind config
Your Tailwind processes everything - During your app's build process
Variables.css - Only contains CSS custom properties (no utility classes)

This means:

✅ No build-time CSS compilation in the package
✅ No PostCSS configuration conflicts
✅ Full Tailwind v4 compatibility
✅ Tree-shaking and optimization handled by your build tool
✅ Simple to use - just like shadcn/ui

Advanced Configuration (Optional)

For the best experience with Tailwind CSS, use the Fleet preset:

// tailwind.config.js
module.exports = {
  presets: [
    require('fleet-air-web-components/tailwind-preset')
  ],
  content: [
    './src/**/*.{js,ts,jsx,tsx}',
    './node_modules/fleet-air-web-components/**/*.{js,ts,jsx,tsx}'
  ],
}

This gives you access to:

Fleet color palette classes (bg-Neutral_140, text-Accent_90, etc.)
Fleet typography utilities (text-header-1, font-fleet-semibold, etc.)
Semantic color tokens (bg-background, text-foreground, etc.)

Component Categories

Core UI Components

Button - Primary, secondary, dangerous, positive variants
Typography - 20+ text variants for all use cases
TextInput - Single-line input with Fleet styling
Textarea - Multi-line text input
Checkbox - Checkboxes with checked/indeterminate states
Icon - 200+ Fleet icons + Lucide fallback

Layout Components

WindowLayout - Complete window layout with panels and splitters
Toolbar - Horizontal toolbar with actions
MainToolbar - Primary application toolbar
Tabs - Tab navigation with Fleet styling
Islands - Floating panel components
ControlPanel - Settings and control interfaces

AI Components

AiChatInput - Rich text input for AI conversations
AiChatContextPreview - Context/file preview for AI interactions

Advanced Components

List - List component with keyboard navigation
ContextMenu - Right-click context menus with search
Editor - Code editor with syntax highlighting
InInputEditor - Inline rich text editing
FileTree - File tree with Fleet design patterns

Typography System

Fleet Air components use a comprehensive typography system:

import { Typography } from 'fleet-air-web-components'

// Headers
<Typography variant="header-1-semibold">Page Title</Typography>
<Typography variant="header-2-semibold">Section Title</Typography>
<Typography variant="header-3-semibold">Subsection Title</Typography>

// Body Text
<Typography variant="default">Body text (use for 90% of content)</Typography>
<Typography variant="default-semibold">Emphasized body text</Typography>
<Typography variant="small">Captions and labels</Typography>

// Code
<Typography variant="code">Code snippets</Typography>

Important: When using Fleet CSS variables with Typography, use the style prop instead of className:

// ✅ Correct
<Typography variant="default" style={{ color: 'var(--fleet-text-secondary)' }}>
  Text content
</Typography>

// ❌ Wrong - causes font-size to be stripped
<Typography variant="default" className="text-[var(--fleet-text-secondary)]">
  Text content
</Typography>

Color System

Fleet Air uses a comprehensive color system with 200+ palette colors and 80+ semantic tokens:

Using Fleet Colors

// Via CSS variables (recommended)
<div style={{ color: 'var(--fleet-text-primary)' }}>Text</div>
<div style={{ backgroundColor: 'var(--fleet-background-primary)' }}>Box</div>

// Via Tailwind classes (with preset)
<div className="bg-background text-foreground">Content</div>
<div className="bg-Accent_90 text-white">Accent Box</div>

// Button semantic colors
<div style={{
  backgroundColor: 'var(--fleet-button-primary-background-default)',
  color: 'var(--fleet-button-primary-text-default)'
}}>
  Primary Button
</div>

Semantic Color Categories

Text: --fleet-text-primary, --fleet-text-secondary, --fleet-text-dangerous, etc.
Background: --fleet-background-primary, --fleet-background-secondary
Border: --fleet-border, --fleet-border-focused
Buttons: Complete state management (default, hovered, pressed, disabled)
Editor: Text, caret, line numbers, current line highlighting
AI: AI-specific attachment, input, and warning colors

Component State Management

All Fleet components follow a prototyping-first design pattern:

// Works immediately - no props needed
<AiChatInput />

// Optional: External control when needed
<AiChatInput
  value={value}
  onChange={setValue}
  placeholder="Custom placeholder"
/>

This approach enables:

Drop-in ready - Components work without configuration
No boilerplate - No required state management
Progressive enhancement - Add complexity only when needed

Examples

Check out the example pages in the source repository for comprehensive component demos:

Typography - Complete typography system showcase
Buttons - All button variants and states
Icons - Fleet icon system with 200+ icons
Window Layout - Complex layout compositions
AI Chat - AI interaction components
And 15+ more examples

Development

Run the Example App

# Clone the repository
git clone https://github.com/jetbrains/fleet

# Navigate to air-web-components
cd fleet/air-web-components

# Install dependencies
npm install

# Run development server
npm run dev

Visit http://localhost:3000 to see the component showcase.

Build the Library

# Build the library package
npm run build:lib

# The output will be in the ./dist directory

API Reference

For detailed component APIs and props, see the TypeScript definitions included with the package. All components are fully typed for IntelliSense support.

import type {
  ButtonProps,
  TypographyProps,
  TextInputProps,
  AiChatInputProps
} from 'fleet-air-web-components'

Browser Support

Chrome/Edge (latest)
Firefox (latest)
Safari 15+
Modern browsers with ES2020 support

Contributing

Contributions are welcome! Please read our contributing guidelines before submitting PRs.

License

Proprietary License - Personal Use Only

This software is proprietary to JetBrains s.r.o. and is licensed for personal, non-commercial use only.

You may:

Use the Software for personal learning and experimentation
Create prototypes and mockups for personal projects
Study the Software's implementation for educational purposes

You may NOT:

Use the Software for any commercial purpose
Distribute or sublicense the Software
Create derivative works without permission
Use the Software in any product or service that you sell or commercialize

For commercial licensing inquiries, please contact: [email protected]

See the LICENSE file for complete terms and conditions.

Credits

JetBrains Fleet - Original design system
shadcn/ui - Component foundation
Radix UI - Accessible primitives
Tailwind CSS - Styling framework

Links

Made with ❤️ by JetBrains

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

Fleet Air Web Components

Overview

✨ Features

Installation

Peer Dependencies

Quick Start

Next.js (Super Simple - 2 Steps!)

Other Frameworks (Manual Setup)

1. Configure Tailwind

2. Import Variables

3. Setup Theme Provider

4. Use Components

Complete Setup Guide

Next.js App Router (Recommended)

Vite + React

Troubleshooting

PostCSS Plugin Error

Components Not Styled

Dark Mode Not Working

TypeScript Errors

How It Works

Advanced Configuration (Optional)

Component Categories

Core UI Components

Layout Components

AI Components

Advanced Components

Typography System

Color System

Using Fleet Colors

Semantic Color Categories

Component State Management

Examples

Development

Run the Example App

Build the Library

API Reference

Browser Support

Contributing

License

Credits

Links