garnish_ui 0.3.3

A premium, brand-agnostic Flutter UI component library with built-in animations, 5 visual style categories, fully customizable theming, and 40+ accessible components.

Garnish UI

A premium, brand-agnostic Flutter UI component library with built-in animations and 5 visual style categories.

What Makes Garnish UI Unique?

Every component can be animated with one line of code.

GarnishButton(
  animation: GarnishAnimation.fadeSlideUp(),  // That's it!
  onPressed: () {},
  child: Text('Animated Button'),
)

5 Visual Style Categories — Minimal, Material, Neumorphism, Glassmorphism, Brutalism

Features

• Built-in Animation System — 10 preset animations, fully customizable
• 5 Style Categories — Apply different visual styles globally or per-component
• Fully Customizable Theming — Complete control over colors, typography, spacing
• Dark Mode Ready — First-class dark theme support
• No Material Dependencies — Clean separation from Material Design
• Accessibility First — Built with screen readers and keyboard navigation in mind
• 40+ Production-Ready Components — Comprehensive component library

Installation

Add garnish_ui to your pubspec.yaml:

dependencies:
  garnish_ui: ^0.3.3

Then run:

flutter pub get

Quick Start

1. Wrap your app with GarnishApp

import 'package:garnish_ui/garnish_ui.dart';

void main() {
  runApp(
    GarnishApp(
      theme: GarnishTheme.light(),
      darkTheme: GarnishTheme.dark(),
      child: MyApp(),
    ),
  );
}

2. Use components

GarnishButton(
  onPressed: () {},
  variant: GarnishButtonVariant.primary,
  size: GarnishButtonSize.medium,
  animation: GarnishAnimation.scale(),
  child: Text('Get Started'),
)

Components

Buttons

Component	Description
GarnishButton	Primary action button with multiple variants (primary, secondary, outlined, ghost, destructive)
GarnishIconButton	Icon-only button for toolbars and compact UIs

Inputs & Controls

Component	Description
GarnishTextField	Text input with validation, icons, and states
GarnishTextArea	Multi-line text input with auto-resize
GarnishCheckbox	Toggle selection control
GarnishRadio	Radio button for single selection
GarnishSwitch	Toggle switch with labels
GarnishSelect	Dropdown selection with search
GarnishSlider	Range slider with custom marks
GarnishDatePicker	Calendar date selection
GarnishTimePicker	Time selection (12/24 hour format)

Layout & Structure

Component	Description
GarnishCard	Container with elevation and variants
GarnishAccordion	Collapsible content sections
GarnishCarousel	Horizontal slider with auto-play
GarnishStyledContainer	Multi-style container supporting all 5 style categories

Data Display

Component	Description
GarnishAvatar	User profile pictures with initials fallback
GarnishTooltip	Contextual hover information
GarnishBadge	Status indicators, tags, and notification dots
GarnishProgress	Linear and circular progress indicators
GarnishListTile	Consistent list items with leading/trailing
GarnishTable	Data table with sorting and selection
GarnishDivider	Content separators (horizontal/vertical)

Feedback & Overlays

Component	Description
GarnishDialog	Modal dialog overlay
GarnishBottomSheet	Bottom slide-up panel
GarnishSnackbar	Temporary notification toast
GarnishAlert	Contextual feedback (info, success, warning, error)
GarnishEmptyState	Placeholder for empty data states
GarnishSkeleton	Shimmer loading placeholders

Navigation

Component	Description
GarnishNavBar	Top navigation bar with tabs
GarnishBreadcrumb	Hierarchical navigation trail
GarnishBottomNav	Mobile bottom navigation with badges

Style Categories

Apply different visual aesthetics to your components:

GarnishStyledContainer(
  styleCategory: GarnishStyleCategory.glassmorphism,
  child: Text('Frosted Glass Effect'),
)

Minimal

Clean and flat with focus on typography and spacing.

Material

Subtle elevation and depth with clear hierarchy.

Neumorphism

Soft shadows creating a tactile, extruded feel.

Glassmorphism

Frosted glass effect with blur and transparency.

Brutalism

Bold borders and raw, unpolished aesthetic.

Animation System

Preset Animations

GarnishAnimation.fadeIn()         // Simple opacity fade
GarnishAnimation.fadeSlideUp()    // Slide up with fade
GarnishAnimation.fadeSlideDown()  // Slide down with fade
GarnishAnimation.fadeSlideLeft()  // Slide left with fade
GarnishAnimation.fadeSlideRight() // Slide right with fade
GarnishAnimation.scale()          // Grow from center
GarnishAnimation.bounce()         // Elastic scale effect
GarnishAnimation.pulse()          // Breathing/pulse effect
GarnishAnimation.shake()          // Error/attention wiggle
GarnishAnimation.flip()           // 3D rotation flip

Customization

GarnishAnimation.fadeSlideUp(
  duration: Duration(milliseconds: 400),
  curve: Curves.easeOutCubic,
  delay: Duration(milliseconds: 100),
)

Staggered Lists

Column(
  children: items.asMap().entries.map((entry) {
    return GarnishCard(
      animation: GarnishAnimation.fadeSlideUp().staggered(entry.key),
      child: Text(entry.value),
    );
  }).toList(),
)

Programmatic Control

final controller = GarnishAnimationController();

GarnishTextField(
  animation: GarnishAnimation.shake(animateOnMount: false),
  animationController: controller,
)

// Trigger animation programmatically:
controller.play();

Theming

Create custom themes by extending GarnishThemeData:

final myTheme = GarnishTheme.light().copyWith(
  colors: GarnishColors(
    primary: Color(0xFF6366F1),
    secondary: Color(0xFF8B5CF6),
    surface: Color(0xFFFFFFFF),
    background: Color(0xFFF8FAFC),
    error: Color(0xFFEF4444),
    success: Color(0xFF22C55E),
    warning: Color(0xFFF59E0B),
    info: Color(0xFF3B82F6),
    onPrimary: Color(0xFFFFFFFF),
    onSecondary: Color(0xFFFFFFFF),
    onSurface: Color(0xFF1E293B),
    onBackground: Color(0xFF334155),
    onError: Color(0xFFFFFFFF),
  ),
  typography: GarnishTypography.defaultTypography,
);

Requirements

• Flutter SDK: >=3.10.0
• Dart SDK: >=3.0.0

Documentation

• Live Documentation - Interactive docs with live component previews
• API Reference - Auto-generated API docs
• Example App - Working example demonstrating all features
• Repository - Source code and issues

Contributing

Contributions are welcome! Please read our Contributing Guidelines before submitting a PR.

License

MIT License - see LICENSE for details.