FlairJS

React component library for building beautiful marketing websites with animated backgrounds and heading effects.

16 section components · 43 background effects · 11 heading effects · 19 SVG patterns

Documentation · Backgrounds

Install

npm install @flair-js/core

Requires React 19+ and Tailwind CSS 4+.

Quick Start

import '@flair-js/core/index.css';
import SuperHero from '@flair-js/core/sections/SuperHero';

export default function Page() {
  return (
    <SuperHero
      darkMode={true}
      heading={{ text: 'Build Something Beautiful', effect: 'split', size: '3xl' }}
      text="Ship your landing page in hours, not weeks."
      background={{
        effect: 'aurora',
        effectColors: ['#8B5CF6', '#06B6D4', '#10B981'],
        colors: ['#020617', '#0c0a1d'],
        borderRadius: '0px',
      }}
      buttons={[
        { label: 'Get Started', type: 'glass' },
        { label: 'Learn More', type: 'outline' },
      ]}
    />
  );
}

Section Components

Build pages by composing these full-width marketing sections:

| Component | Description | |-----------|-------------| | SuperHero | Hero section with heading effects, buttons, stats, logos | | TextFeature | Centered text with heading, body, and CTA buttons | | ColumnsFeature | Multi-column grid with cards | | IconsFeature | Icon card grid for highlighting features | | ImageFeature | Image showcase with 10 animation types | | VideoFeature | Embedded video with autoplay and poster | | StatsFeature | Animated number counters | | ReviewsFeature | Customer testimonials with star ratings | | ChecklistFeature | Checkmark feature lists | | ChartFeature | Animated line and bar charts | | UIShowcaseFeature | Pre-built interactive UI demos | | MapsFeature | Interactive map visualizations | | PricingFeature | Pricing plan cards | | FormFeature | Contact forms with glass inputs | | CompareFeature | Side-by-side comparison | | CustomEmbed | Sandboxed iframe for third-party widgets |

Background Effects

43 animated effects available via the background.effect prop:

aurora · liquid-ether · silk · constellation · mesh-gradient · beams · plasma · waves · bokeh · fireflies · dot-grid · and 30+ more

AI Agent Integration

FlairJS is optimized for AI coding assistants via the Model Context Protocol:

{
  "mcpServers": {
    "flair": {
      "url": "https://flairjs.dev/api/mcp"
    }
  }
}

Works with Claude Code, Claude Desktop, Cursor, and any MCP-compatible tool. Setup guide

Starter Templates

3 ready-to-use page templates included in @flair-js/core/templates/:

• homepage.tsx — General landing page
• saas-landing.tsx — SaaS product page with pricing
• portfolio.tsx — Portfolio/agency page with contact form

License

MIT