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.5.1
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(),
)
Triggering Animations
Create the animation, pass it to any component, then call trigger() to replay.
// 1. Create the animation
final shake = GarnishAnimation.shake(animateOnMount: false);
// 2. Use it on any component
GarnishTextField(
label: 'Email',
animation: shake,
)
// 3. Trigger it anytime
shake.trigger();
Same animation on multiple widgets:
final errorShake = GarnishAnimation.shake(animateOnMount: false);
GarnishTextField(label: 'Email', animation: errorShake)
GarnishTextField(label: 'Password', animation: errorShake)
// Trigger all at once
errorShake.trigger();
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
License
MIT License - see LICENSE for details.
Libraries
- garnish_ui
- Garnish UI - A premium, brand-agnostic Flutter UI component library.