FluentGlass

Note for AI Assistants & LLMs: Please refer to CLAUDE.md or AGENTS.md for architecture rules and system context. This file is intended for human developers consuming the library.

FluentGlass is a beautiful, highly-customizable glassmorphism UI component library built for React Native and Expo.

It provides 42 meticulously crafted interface components featuring deep frosted glass aesthetics, smooth physics-based animations (Reanimated 4), a fully dynamic theming engine, bundled Inter typography, and is 100% strongly typed with TypeScript.

Key Features

• Glassmorphism First: Deep, layered translucent effects right out of the box using expo-blur.
• Dynamic Theming Engine: Override colors, typography, and animation springs down to the token level via useTheme().
• Universal Design: Runs flawlessly on Web (Browser), iOS, and Android using the exact same code.
• Bootstrap-Inspired Props: Intuitive standard props (size, colorScheme, radius, blur) for rapid prototyping.
• Integrated Typography: Bundled with the Inter font family (6 weights), auto-loaded transparently by the Provider.
• Smooth Animations: Built-in micro-interactions powered by react-native-reanimated.
• Full TypeScript: Every component, hook, and utility is strictly typed with zero compilation errors.
• Accessible: All 42 components include accessibility roles, labels, and states for VoiceOver and TalkBack support.

Installation

# 1. Install FluentGlass
npm install fluentglass

# 2. Install peer dependencies required by Expo
npx expo install expo-blur expo-linear-gradient expo-clipboard expo-font react-native-reanimated react-native-gesture-handler

Note: Make sure you have configured react-native-reanimated correctly in your babel.config.js.

Quick Start

Wrap your application inside the <FluentGlassProvider> (which handles theme injection and font loading automatically), and start using the components!

import React from 'react';
import {
  FluentGlassProvider,
  FluentGlassLayout,
  FluentGlassCard,
  FluentGlassButton
} from 'fluentglass';

export default function App() {
  return (
    <FluentGlassProvider>
      <FluentGlassLayout center>

        <FluentGlassCard
          title="Welcome to FluentGlass"
          description="Build stunning futuristic interfaces."
          colorScheme="info"
          size="lg"
          blur="strong"
          radius="lg"
        />

        <FluentGlassButton
          title="Launch App"
          colorScheme="accent"
          size="md"
          marginTop={20}
          onPress={() => console.log('Lift off!')}
        />

      </FluentGlassLayout>
    </FluentGlassProvider>
  );
}

The Props System

FluentGlass features a standardized props system. Instead of fighting with raw stylesheets, simply use these properties on nearly any component:

| Category | Prop | Accepted Values | |----------|------|----------------| | Sizing | size | 'xs', 'sm', 'md', 'lg', 'xl' | | Color Scheme | colorScheme | 'default', 'dark', 'deep', 'light', 'success', 'error', 'warning', 'info', 'accent' | | Glass Effect | blur | 'none', 'subtle', 'medium', 'strong', 'max' | | Border Radius| radius | 'none', 'sm', 'md', 'lg', 'pill' |

Example: <FluentGlassBadge colorScheme="success" size="sm" radius="pill" />

Custom Theming

FluentGlass uses a deep-merge strategy. You can easily inject your brand colors into the FluentGlassProvider.

const customTheme = {
  colors: {
    background: '#0F172A',
    accent: '#8B5CF6',         // Vibrant purple
    textPrimary: '#F8FAFC',
    success: '#10B981'
  },
  animations: {
    spring: { default: { mass: 0.5, damping: 10, stiffness: 200 } }
  }
};

export default function App() {
  return (
    <FluentGlassProvider theme={customTheme}>
      <YourAppContents />
    </FluentGlassProvider>
  );
}

Component Catalog

FluentGlass provides 42 ready-to-use components organized by category:

Forms (13)

FluentGlassTextInput, FluentGlassLabeledInput, FluentGlassPasswordInput, FluentGlassEmailInput, FluentGlassDateInput, FluentGlassInput, FluentGlassSelect, FluentGlassDropdown, FluentGlassSwitch, FluentGlassCheckbox, FluentGlassSlider, FluentGlassSegmentedControl, FluentGlassDatePicker

Layout & Navigation (11)

FluentGlass, FluentGlassLayout, FluentGlassContainer, FluentGlassCard, FluentGlassSimpleCard, FluentGlassResponsiveRow, FluentGlassSidebar, FluentGlassDock, FluentGlassBreadcrumb, FluentGlassSeparator, FluentGlassScrollArea

Data Display (11)

FluentGlassTable, FluentGlassBarChart, FluentGlassCodeBlock, FluentGlassTimeline, FluentGlassBadge, FluentGlassTag, FluentGlassStatusIndicator, FluentGlassStatWidget, FluentGlassCalendarWidget, FluentGlassClockWidget, FluentGlassWeatherWidget

Feedback & Overlays (6)

FluentGlassAlert, FluentGlassDialog, FluentGlassPopover, FluentGlassSheet, FluentGlassSkeleton, FluentGlassCrossfade

Actions (1)

FluentGlassButton

For detailed API documentation on all components, see the /docs folder.

Running the Example App

The repository includes a fully working documentation/demo app in the /example folder:

# Clone the repository
git clone https://github.com/grrdhdz/FluentGlass.git

# Enter the example directory
cd FluentGlass/example
npm install

# Start the local development web server
npx expo start --web

The example app showcases all 42 components across 5 sections: Home, Form Controls, Data Display, Layout & Nav, and Feedback.

License

Distributed under the MIT License. Copyright grrdhdz. See LICENSE for more information.