hux library

Hux UI - A modern Flutter UI package with beautiful, customizable components

Hux provides a comprehensive set of UI components designed for clean and consistent user interfaces. Features include:

Modern button components with multiple variants and WCAG AA contrast
Flexible card components with semantic tokens
Enhanced text input fields with validation support
Multi-line textarea component with character count support
Customizable slider component with smooth animations
Customizable loading indicators with theme awareness
Progress indicators for task completion and status tracking
Mobile-first bottom sheets and action sheets
Beautiful data visualization charts with cristalyse integration
Right-click context menus with smart positioning
Pre-configured light and dark themes
Design token system for consistent theming
Optimized web experience with clean context menus

Usage

import 'package:flutter/material.dart';
import 'package:hux/hux.dart';

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: HuxTheme.lightTheme,
      darkTheme: HuxTheme.darkTheme,
      home: Scaffold(
        body: Column(
          children: [
            HuxButton(
              onPressed: () {},
              child: Text('Primary Button'),
            ),
            HuxInput(label: 'Email'),
            HuxCard(title: 'Card Title'),
          ],
        ),
      ),
    );
  }
}

Classes

DateFormat: DateFormat class for date formatting and parsing
HuxActionSheetItem: An action item for use with HuxActionSheet.
HuxAlert: HuxAlert is a feedback message component that follows the Hux design system with consistent styling, borders, and semantic color tokens.
HuxAvatar: HuxAvatar is a circular user image component with clean styling that aligns with the Hux design system.
HuxAvatarGroup: HuxAvatarGroup displays multiple avatars in a row, typically used to show groups of users, teams, or participants.
HuxBadge: HuxBadge is a small notification indicator component that displays text or numbers in a clean, pill-shaped container.
HuxBottomSheet: HuxBottomSheet is a mobile-first modal component that slides up from the bottom.
HuxBreadcrumbItem: HuxBreadcrumbItem represents a single breadcrumb with its properties.
HuxBreadcrumbs: HuxBreadcrumbs is a customizable breadcrumb component that provides clear navigation hierarchy and context for users.
HuxButton: HuxButton is a customizable button component
HuxCard: HuxCard is a customizable card component that provides a consistent container with optional header, title, subtitle, and actions.
HuxChart: A customizable chart widget that wraps cristalyse with Hux UI styling
HuxCheckbox: HuxCheckbox is a customizable checkbox component with consistent styling that follows the Hux design system patterns.
HuxColors: HuxColors defines a minimal, focused color palette for the Hux UI components
HuxCommand: HuxCommand is a command palette component that provides quick access to commands via search and keyboard shortcuts.
HuxCommandItem: Represents a command that can be executed in the HuxCommand component
HuxCommandShortcuts: A utility class for handling keyboard shortcuts for the command palette
HuxContextMenu: HuxContextMenu wraps a child widget and displays a context menu on right-click
HuxContextMenuDivider: HuxContextMenuDivider is a visual separator for context menu items
HuxContextMenuItem: HuxContextMenuItem is a single item within a context menu
HuxDateInput: HuxDateInput is a specialized text input component for date input with automatic formatting, validation, and calendar picker integration.
HuxDatePicker: Inline dropdown date picker anchored to a trigger button.
HuxDialog: HuxDialog is a customizable dialog component that provides a consistent modal experience with optional header, content, and action buttons.
HuxDropdown<T>: A dropdown/select component with overlay-based options list.
HuxDropdownItem<T>: Individual dropdown item
HuxInput: HuxInput is a customizable text input component with consistent styling and extensive customization options.
HuxKBD: HuxKBD is a component for displaying keyboard shortcuts or keys.
HuxLoading: HuxLoading is a customizable circular loading indicator that provides consistent loading states across the application.
HuxLoadingOverlay: HuxLoadingOverlay provides a full-screen loading overlay that can be placed on top of any widget to indicate loading states.
HuxOtpInput: HuxOtpInput is a customizable OTP (One-Time Password) input component with consistent styling and extensive customization options.
HuxPagination: A pagination component to navigate through pages.
HuxProgress: HuxProgress is a customizable linear progress indicator that displays the completion status of a task or process.
HuxRadio<T>: HuxRadio is a customizable radio button component with consistent styling that follows the Hux design system patterns.
HuxSidebar: A complete sidebar navigation component that manages multiple navigation items.
HuxSidebarItem: A navigation item component designed specifically for sidebars.
HuxSidebarItemData: Data class representing a sidebar navigation item.
HuxSlider: HuxSlider is a customizable slider component with smooth animations that follows the Hux design system patterns.
HuxSnackbar: A proper snackbar component that provides temporary notification messages.
HuxSwitch: HuxSwitch is a toggle switch component with smooth animations that follows the Hux design system patterns.
HuxTabItem: HuxTabItem represents a single tab with its content and properties.
HuxTabs: HuxTabs is a customizable tab component that provides a consistent navigation experience with multiple variants and sizes.
HuxTextarea: HuxTextarea is a customizable multi-line text input component with consistent styling and extensive customization options.
HuxTheme: HuxTheme provides the theme configuration for Hux UI components
HuxTimePickerDialog: A custom Hux UI-themed time picker dialog widget.
HuxToggle: HuxToggle is a two-state button component that can be toggled on/off. Commonly used for formatting controls (bold, italic) or feature toggles.
HuxTokens: HuxTokens provides semantic design tokens that adapt to light and dark themes.
HuxTooltip: HuxTooltip is a customizable tooltip component that provides additional context when hovering over or long-pressing on widgets.
HuxWCAG: WCAG (Web Content Accessibility Guidelines) contrast calculation utilities.
LucideIcons

Enums

HuxAlertVariant: Alert variant types following Hux design patterns
HuxAvatarGradient: Gradient variants for HuxAvatar when useGradient is true
HuxAvatarSize: Size variants for HuxAvatar
HuxBadgeSize: Size variants for HuxBadge
HuxBadgeVariant: Badge variant types following Hux design patterns
HuxBottomSheetSize: Size variants for HuxBottomSheet.
HuxBreadcrumbSize: Size variants for HuxBreadcrumbs.
HuxBreadcrumbVariant: Visual variants for HuxBreadcrumbs.
HuxButtonSize: Size variants for HuxButton
HuxButtonVariant: Visual variants for HuxButton
HuxButtonWidth: Width behavior variants for HuxButton
HuxCardSize: Size variants for HuxCard
HuxChartSize: Chart size variants
HuxChartType: Chart types supported by HuxChart
HuxCheckboxSize: Size variants for HuxCheckbox
HuxDialogSize: Size variants for HuxDialog.
HuxDialogVariant: Visual variants for HuxDialog.
HuxLoadingSize: Size variants for HuxLoading indicators
HuxProgressSize: Size variants for HuxProgress
HuxProgressVariant: Visual variants for HuxProgress
HuxSliderSize: Size variants for HuxSlider
HuxSnackbarVariant: Visual variants for HuxSnackbar.
HuxSwitchSize: Size variants for HuxSwitch
HuxTabSize: Size variants for HuxTabs.
HuxTabVariant: Visual variants for HuxTabs.
HuxToggleSize: Size variants for HuxToggle

Extensions

HuxChartConstructors on HuxChart: Convenience constructors for common chart types
HuxSnackbarExtension on BuildContext: Extension to easily show HuxSnackbar.

Functions

showHuxActionSheet({required BuildContext context, required List<HuxActionSheetItem> actions, String? title, String? subtitle, String cancelLabel = 'Cancel', bool showCancel = true}) → Future<void>: Shows an iOS-style action sheet with a list of actions.
showHuxBottomSheet<T>({required BuildContext context, String? title, String? subtitle, Widget? child, List<Widget>? actions, HuxBottomSheetSize size = HuxBottomSheetSize.medium, bool showDragHandle = true, bool showCloseButton = false, bool isDismissible = true, bool enableDrag = true, bool isScrollControlled = true, bool useSafeArea = true, EdgeInsets? padding}) → Future<T?>: Shows a HuxBottomSheet with the specified properties.
showHuxCommand({required BuildContext context, required List<HuxCommandItem> commands, String placeholder = 'Type a command or search...', String emptyText = 'No commands found', ValueChanged<HuxCommandItem>? onCommandSelected, VoidCallback? onClose}) → Future<void>: Shows the HuxCommand dialog with keyboard shortcut support
showHuxDialog<T>({required BuildContext context, String? title, String? subtitle, Widget? content, List<Widget>? actions, HuxDialogVariant variant = HuxDialogVariant.default_, HuxDialogSize size = HuxDialogSize.medium, bool showCloseButton = true, bool barrierDismissible = true, Clip clipBehavior = Clip.antiAlias, ShapeBorder? shape, BoxConstraints? constraints, AlignmentGeometry? alignment, EdgeInsets? insetPadding}) → Future<T?>: Shows a HuxDialog with the specified properties.
showHuxTimePickerDialog({required BuildContext context, required TimeOfDay initialTime, GlobalKey<State<StatefulWidget>>? targetKey}) → Future<TimeOfDay?>: Shows a Hux UI-themed time picker dialog.

hux library

Usage

Classes

Enums

Extensions

Functions

hux package

hux library