happenings_ui 0.1.0

Happenings design system — tokens, theme, and shared components for Flutter apps built on Material 3 with a Zinc color palette.

happenings_ui

A Flutter design system package providing tokens, theme, typography, and reusable components built on Material 3 with a Zinc color palette.

Features

• Theme — Light and dark Material 3 themes built on a Tailwind-inspired Zinc neutral palette
• Tokens — Brand colors (Indigo, Green, Blue), Zinc neutrals, and spacing constants
• Typography — Consistent text styles via Google Fonts (Inter)
• 25+ Components — Buttons, inputs, cards, sheets, toasts, avatars, badges, selects, OTP input, markdown rendering, and more
• Configurable — Swap icon libraries, override semantic icons, toggle haptics, and localise strings via HappeningsUiConfig

Installation

dependencies:
  happenings_ui: ^0.1.0

Quick start

Wrap your app with HappeningsUiConfig and apply the theme:

import 'package:happenings_ui/happenings_ui.dart';

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return HappeningsUiConfig(
      child: MaterialApp(
        theme: AppTheme.light(),
        darkTheme: AppTheme.dark(),
        home: const HomeScreen(),
      ),
    );
  }
}

Custom icon library

The default icon renderer uses Material Icons. To use Font Awesome or another library, pass a custom iconBuilder and icons:

import 'package:font_awesome_flutter/font_awesome_flutter.dart';

HappeningsUiConfig(
  iconBuilder: (icon, {size, color}) => FaIcon(icon, size: size, color: color),
  icons: const HappeningsIcons(
    back: FontAwesomeIcons.chevronLeft,
    close: FontAwesomeIcons.xmark,
    check: FontAwesomeIcons.check,
    // ...
  ),
  child: MaterialApp(...),
)

Haptics

Disable haptic feedback globally:

HappeningsUiConfig(
  hapticsEnabled: false,
  child: MaterialApp(...),
)

Localised strings

Override default labels for components that display text:

HappeningsUiConfig(
  strings: HappeningsStrings(
    cancel: l10n.cancel,
    continueLabel: l10n.continueButton,
    copy: l10n.copy,
  ),
  child: MaterialApp(...),
)

Components

Component	Description
HappeningsButton	Primary, secondary, and destructive button variants with press animations
HappeningsInput	Text input with label, hint, error, and prefix/suffix support
HappeningsTextarea	Multi-line text input
HappeningsSelect	Dropdown selector
HappeningsCard	Styled card container
HappeningsSheet	Bottom sheet with drag handle
HappeningsToast	Overlay toast notifications
HappeningsAvatar	User avatar with fallback initials
HappeningsBadge	Status badges and counters
HappeningsOtpInput	PIN/OTP code input field
HappeningsAppBar	Custom app bar with refresh support
HappeningsBottomNavBar	Bottom navigation bar
HappeningsNetworkImage	Cached network image with shimmer placeholder
HappeningsRefreshIndicator	Pull-to-refresh wrapper
HappeningsShimmer	Loading shimmer placeholders
HappeningsPressable	Pressable wrapper with scale-down animation and haptics
HappeningsStateCard	Info/warning/error state display
HappeningsEmptyState	Empty state with icon, title, and action
HappeningsMarkdown	Markdown renderer with link handling
HappeningsOnboarding	Multi-page onboarding flow
SwipeToConfirmButton	Slide-to-confirm destructive action
CupertinoSearchAppBar	iOS-style collapsible search bar
MentionOverlay	@mention autocomplete overlay
MutualFriendChips	Compact mutual connection badges
AnimatedBubbles	Decorative animated background bubbles

Tokens

Colors

// Zinc neutrals (light and dark)
ZincColors.zinc50   // lightest
ZincColors.zinc950  // darkest

// Brand palettes
BrandColors.indigo  // primary brand
BrandColors.green   // success / positive
BrandColors.blue    // info / links

Spacing

HappeningsSpacing.xs   // 4
HappeningsSpacing.sm   // 8
HappeningsSpacing.md   // 16
HappeningsSpacing.lg   // 24
HappeningsSpacing.xl   // 32
HappeningsSpacing.xxl  // 48

Requirements

• Flutter 3.32+
• Dart SDK 3.11+