Universal design system with CSS-in-JS, styled components, and Houdini worklets. Works seamlessly across all JavaScript frameworks - React, Vue, Svelte, Angular, Solid, Qwik, and more.
npm install fluent-growbash
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
`tsx
import { FluentButton, FluentCard, useTheme } from 'fluent-grow';
function App() {
const { theme, toggleTheme } = useTheme();
return (
Welcome to Fluent Grow
Current theme: {theme}
);
}
`
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
$3
`tsx
import {
FluentButton,
FluentInput,
FluentSelect,
FluentCheckbox,
FluentRadio,
FluentSwitch,
FluentSlider,
FluentTextarea,
FluentDatepicker,
FluentAutocomplete
} from 'fluent-grow';
`
$3
`tsx
import {
FluentCard,
FluentBadge,
FluentChip,
FluentAvatar,
FluentAvatarGroup,
FluentText,
FluentTitle,
FluentTable
} from 'fluent-grow';
`
$3
`tsx
import {
FluentSpinner,
FluentSkeleton,
FluentProgress,
FluentTooltip,
FluentPopover,
FluentModal,
FluentToast,
FluentNotification
} from 'fluent-grow';
`
$3
`tsx
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:
`tsx
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
`tsx
import { FluentProvider } from 'fluent-grow';
// Wrap your app with FluentProvider
`
Built-in themes:
- light - Light mode
- dark - Dark mode
- auto - System preference
Custom themes:
`tsx
import { setTheme } from 'fluent-grow';
setTheme({
colors: {
primary: '#007bff',
secondary: '#6c757d',
success: '#28a745',
// ... more colors
},
spacing: {
sm: '8px',
md: '16px',
lg: '24px',
}
});
`
š Framework Examples
$3
`tsx
import { FluentButton, FluentCard } from 'fluent-grow';
export default function Page() {
return (
Click me
);
}
`
$3
`vue
Click me
`
$3
`svelte
Click me
`
$3
`typescript
import { Component } from '@angular/core';
import 'fluent-grow';
@Component({
selector: 'app-root',
template:
})
export class AppComponent {}
`
$3
`html
Click me
`
šÆ 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
$3
`typescript
import { registerFrameworkDetector } from 'fluent-grow';
registerFrameworkDetector({
name: 'my-framework',
priority: 100,
detect: () => typeof window !== 'undefined' && window.MyFramework,
getVersion: () => window.MyFramework.version
});
`
$3
`typescript
import { registerFrameworkAdapter } from 'fluent-grow';
registerFrameworkAdapter({
name: 'my-adapter',
family: 'my-framework',
createComponent: (config) => {
// Your component creation logic
}
});
``