Gliph UI 💎

A premium, high-performance React Native UI library featuring beautifully animated glassmorphism components with fluid spring physics.

🌐 Official Documentation & Live Previews

✨ Features

• Fluid Spring Physics: Every interaction feels alive with high-frequency spring animations.
• Glassmorphism Core: Built-in support for translucent, blurred, and frosted glass aesthetics.
• Variant-Driven Design: Components like the Navbar come with multiple pre-built design variants.
• Performance Optimized: Uses the native animation driver and virtualization for buttery smooth 120Hz scrolling.
• TypeScript First: Robust typings for a great developer experience.

📦 Installation

npm install gliphui

Required Dependencies

Gliph UI relies on several high-quality community libraries for its advanced features.

npm install react-native-svg lucide-react-native

Music Player Setup

If you are using the Music Player, we recommend running our automated setup script:

# In your project root
curl -O https://gliph-ui.vercel.app/setup-music.js && node setup-music.js

🧩 Component Suite

1. Navigation: Navbar

The ultimate navigation component with four distinct aesthetics. It features fluid spring animations, glassmorphism blur effects, and extensive theming capabilities.

• Variants: Choose from floating, classic, minimal, or ios styles to perfectly match your app's design language.
• Action Button: Support for a centered, prominent action button with scale animations and haptic feedback.
• Interactive: Smooth tab transitions with active indicators and customizable colors.
• SafeArea Support: Automatically handles device notches and home indicators.

import { Navbar } from 'gliphui';

<Navbar
  variant="floating"
  tabs={[{ id: 'home', label: 'Home', icon: (c, s) => <Home color={c} size={s} /> }]}
  activeTab={activeTab}
  onTabChange={setActiveTab}
  theme={{ activeColor: '#6366f1', background: 'rgba(255, 255, 255, 0.8)' }}
/>

2. Audio: Music Player 🎵

A Spotify-grade immersive music player built with a highly optimized native JSI/TurboModule audio engine.

• Immersive UI: Features glassmorphism backgrounds that adapt to the album art, dynamic marquee text for long titles, and a fluid mini-player that seamlessly transitions to full screen.
• Native Audio Engine: Robust background playback, lock screen media controls, and notification integration.
• Playback Controls: Built-in support for shuffle, repeat modes (Off, Track, Queue), and precise scrubbing.
• Smart Detection: Automatic handling of Bluetooth connection states and headset interruptions.
• Customization: Fully adjustable accent colors, typography, layout spacing, and icons.

import { MusicPlayer } from 'gliphui';

<MusicPlayer
  tracks={myTracks}
  uiConfig={{
    accentColor: '#1DB954',
    showMiniPlayer: true,
    fontFamily: 'Inter-Bold',
    theme: 'dark'
  }}
  onTrackChange={(track) => console.log('Playing:', track.title)}
/>

3. High-Precision Pickers

• ScalePicker: A ruler-style horizontal picker for weights, heights, or values.
• CalendarPicker: A premium, animated calendar with smooth month/year transitions.
• ScrollPickers: TimeScrollPicker, WeightScrollPicker, DateScrollPicker, ValueScrollPicker.

🎨 Advanced Theming

Customize any component using the unified theme prop.

const customTheme = {
  background: 'rgba(20, 20, 25, 0.85)',
  activeColor: '#6366f1',
  indicatorColor: 'rgba(99, 102, 241, 0.15)',
  borderColor: 'rgba(255, 255, 255, 0.05)',
};

<Navbar theme={customTheme} ... />

📖 Component API Summary

| Component | Key Props | Description | | :--- | :--- | :--- | | Navbar | variant, actionButton, tabs, activeTab | Multi-style animated bottom bar. | | MusicPlayer | tracks, uiConfig, onTrackChange | Spotify-grade immersive audio suite. | | CalendarPicker | selectedDate, onDateChange | Interactive animated calendar suite. | | ScalePicker | min, max, step, unit, value | Ruler-style horizontal value selector. | | TimeScrollPicker | onTimeChange, initialTime | Scrollable time selector for hours, minutes, and am/pm. | | WeightScrollPicker | onWeightChange, initialWeight | Scrollable weight selector. | | DateScrollPicker | onDateChange, initialDate | Scrollable date selector for day, month, and year. | | ValueScrollPicker | items, onValueChange | Generic scrollable value selector. |

🤝 Community & Support

• Documentation: gliph-ui.vercel.app
• Issues: GitHub Issues
• License: MIT

Designed with ❤️ by praveenkaruppusamy2005