🚀 Fluent Grow

Modern, lightweight, and accessible design system built with Web Components

A universal component library that works seamlessly across all major JavaScript frameworks with zero configuration.

npm install fluent-grow
# or
yarn add fluent-grow

✨ What is Fluent Grow?

Fluent Grow is a framework-agnostic design system built on Web Components and modern CSS features. It provides a comprehensive set of UI components that work natively in any JavaScript framework or vanilla JS.

Key Features:

• 🎨 40+ Production-Ready Components - Buttons, Cards, Inputs, Modals, and more
• 🔧 Zero Configuration - Works out of the box in any framework
• 🎯 Framework Agnostic - React, Vue, Svelte, Angular, Solid, Qwik, and more
• 📦 Lightweight - <35KB gzipped with tree-shaking support
• ♿ Accessible - WCAG 2.1 AA compliant
• 🎨 Themeable - Built-in light/dark modes with custom theme support
• 🚀 Modern CSS - Container Queries, Anchor Positioning, View Transitions
• 💪 TypeScript - Full type definitions included

🎯 Quick Start

import { FluentButton, FluentCard, useTheme } from 'fluent-grow';

function App() {
  const { theme, toggleTheme } = useTheme();
  
  return (
    <FluentCard variant="elevated">
      <h2>Welcome to Fluent Grow</h2>
      <FluentButton onClick={toggleTheme}>
        Current theme: {theme}
      </FluentButton>
    </FluentCard>
  );
}

That's it! The same code works in React, Vue, Svelte, Angular, Solid, and any other framework.

🌐 Framework Support

Fluent Grow automatically detects and adapts to your framework:

| Framework | Version | Status | |-----------|---------|--------| | React | 16.8+ / 17 / 18 / 19 | ✅ Full Support | | Preact | 10+ | ✅ Full Support | | Next.js | 12+ (Pages & App Router) | ✅ Full Support | | Remix | 1.0+ | ✅ Full Support | | Vue | 2.6+ / 3.0+ | ✅ Full Support | | Nuxt | 2 / 3 | ✅ Full Support | | Svelte | 3 / 4 | ✅ Full Support | | SvelteKit | 1.0+ | ✅ Full Support | | Angular | 12+ | ✅ Full Support | | Solid.js | 1.0+ | ✅ Full Support | | Qwik | 0.0.100+ | ✅ Full Support | | Lit | 2.0+ | ✅ Full Support | | Alpine.js | 3.0+ | ✅ Full Support | | Vanilla JS/TS | - | ✅ Full Support |

📦 Components

Form Components

import {
  FluentButton,
  FluentInput,
  FluentSelect,
  FluentCheckbox,
  FluentRadio,
  FluentSwitch,
  FluentSlider,
  FluentTextarea,
  FluentDatepicker,
  FluentAutocomplete
} from 'fluent-grow';

Display Components

import {
  FluentCard,
  FluentBadge,
  FluentChip,
  FluentAvatar,
  FluentAvatarGroup,
  FluentText,
  FluentTitle,
  FluentTable
} from 'fluent-grow';

Feedback Components

import {
  FluentSpinner,
  FluentSkeleton,
  FluentProgress,
  FluentTooltip,
  FluentPopover,
  FluentModal,
  FluentToast,
  FluentNotification
} from 'fluent-grow';

Navigation Components

import {
  FluentTabs,
  FluentAccordion,
  FluentDropdown,
  FluentMenu,
  FluentBreadcrumb,
  FluentPagination,
  FluentStepper
} from 'fluent-grow';

🎨 Hooks & Composables

Fluent Grow provides reactive utilities that adapt to your framework's reactive system:

import { useTheme, useModal, useToast, useBreakpoint } from 'fluent-grow';

// Works as React hooks, Vue composables, Svelte stores, or Solid signals
const { theme, toggleTheme, setTheme } = useTheme();
const { isOpen, open, close, toggle } = useModal();
const { showToast } = useToast();
const { breakpoint, isMobile, isTablet, isDesktop } = useBreakpoint();

🎨 Theming

import { FluentProvider } from 'fluent-grow';

// Wrap your app with FluentProvider
<FluentProvider value={{ theme: 'dark', locale: 'en-US' }}>
  <App />
</FluentProvider>

Built-in themes:

• light - Light mode
• dark - Dark mode
• auto - System preference

Custom themes:

import { setTheme } from 'fluent-grow';

setTheme({
  colors: {
    primary: '#007bff',
    secondary: '#6c757d',
    success: '#28a745',
    // ... more colors
  },
  spacing: {
    sm: '8px',
    md: '16px',
    lg: '24px',
  }
});

🚀 Framework Examples

React / Next.js

import { FluentButton, FluentCard } from 'fluent-grow';

export default function Page() {
  return (
    <FluentCard>
      <FluentButton variant="primary">Click me</FluentButton>
    </FluentCard>
  );
}

Vue 3 / Nuxt

<script setup>
import { FluentButton, FluentCard } from 'fluent-grow';
</script>

<template>
  <FluentCard>
    <FluentButton variant="primary">Click me</FluentButton>
  </FluentCard>
</template>

Svelte / SvelteKit

<script>
import { FluentButton, FluentCard } from 'fluent-grow';
</script>

<FluentCard>
  <FluentButton variant="primary">Click me</FluentButton>
</FluentCard>

Angular

import { Component } from '@angular/core';
import 'fluent-grow';

@Component({
  selector: 'app-root',
  template: `
    <fluent-card>
      <fluent-button variant="primary">Click me</fluent-button>
    </fluent-card>
  `
})
export class AppComponent {}

Vanilla JS

<!DOCTYPE html>
<html>
<head>
  <script type="module">
    import 'fluent-grow';
  </script>
</head>
<body>
  <fluent-card>
    <fluent-button variant="primary">Click me</fluent-button>
  </fluent-card>
</body>
</html>

🎯 Modern CSS Features

Fluent Grow leverages cutting-edge CSS features with automatic fallbacks:

• Container Queries - Responsive components based on container size
• Anchor Positioning - Advanced tooltip and popover positioning
• View Transitions - Smooth page transitions
• Scroll-driven Animations - Animations triggered by scroll
• OKLCH Colors - Perceptually uniform color space
• CSS Nesting - Cleaner, more maintainable styles
• Subgrid - Advanced grid layouts
• CSS Houdini - Paint worklets for custom rendering

📊 Performance

• Bundle Size: <35KB gzipped
• Tree Shaking: Import only what you use
• Lazy Loading: Components load on demand
• Zero Runtime: CSS-in-TS with zero runtime overhead
• Web Components: Native browser performance

🔧 Advanced Usage

Custom Framework Detection

import { registerFrameworkDetector } from 'fluent-grow';

registerFrameworkDetector({
  name: 'my-framework',
  priority: 100,
  detect: () => typeof window !== 'undefined' && window.MyFramework,
  getVersion: () => window.MyFramework.version
});

Custom Adapters

import { registerFrameworkAdapter } from 'fluent-grow';

registerFrameworkAdapter({
  name: 'my-adapter',
  family: 'my-framework',
  createComponent: (config) => {
    // Your component creation logic
  }
});

📖 Documentation

• Getting Started
• Component API
• Theming Guide
• Framework Integration
• Migration Guide

🤝 Contributing

We welcome contributions! See CONTRIBUTING.md for guidelines.

📄 License

MIT License - see LICENSE

🌟 Why Fluent Grow?

Framework Agnostic

• Write once, use everywhere
• No framework lock-in
• Easy migration between frameworks

Developer Experience

• Single import for all frameworks
• Full TypeScript support
• Comprehensive documentation
• Active community

Production Ready

• Battle-tested components
• Accessibility built-in
• Performance optimized
• Regular updates

Modern & Future-Proof

• Built on Web Standards
• Leverages latest CSS features
• Progressive enhancement
• Automatic fallbacks

Made with ❤️ by Veelv

⭐ Star us on GitHub