Kitium UI Flutter

A comprehensive Flutter widget library with 39 pre-built components for building consistent, beautiful UIs across mobile, tablet, and desktop platforms. Part of the Kitium UI design system.

Features

• 39 Production-Ready Components - Complete UI component library
• Consistent Design System - Unified variants, sizes, and theming
• Accessible - Built with accessibility in mind
• Customizable - Full theme and styling support
• Well-Documented - Every component has examples and API docs
• Cross-Platform - Works on iOS, Android, web, and desktop

Components

Core UI (6)

• Badge - Count badges with maxCount threshold
• Button - Variants, sizes, loading states
• Card - Containers with header/footer support
• Icon - Emoji-based icon system
• Image - Image loading with error handling
• Link - Styled text links

Form Components (8)

• Input - Text field with validation
• Textarea - Multi-line text input
• Checkbox - Customizable checkbox
• Radio - Radio button group
• Toggle - Switch/toggle widget
• Select - Dropdown selection
• DatePicker - Date selection
• TimePicker - Time selection

Navigation & Layout (8)

• Breadcrumb - Navigation breadcrumbs
• Menu - Popup menu
• Pagination - Page navigation
• Tabs - Tabbed interface
• List - List items with actions
• Header - App header bar
• Footer - Footer section
• Stepper - Step indicator

Feedback & Display (8)

• Alert - Alert messages
• Toast - Toast notifications
• Modal - Dialog modal
• NotificationCenter - Notification list
• Skeleton - Loading placeholder
• Progress - Progress bar
• Rating - Star rating
• Search - Search input

Advanced Components (9)

• Accordion - Expandable accordion
• Avatar - User avatar
• Carousel - Image carousel
• CodeBlock - Code display
• ColorPicker - Color selection
• Divider - Dividers
• Label - Form labels
• Table - Data table
• TreeView - Tree navigation

Installation

Add to your pubspec.yaml:

dependencies:
  kitiumai_flutter: ^0.1.0

Then run:

flutter pub get

Quick Start

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

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('Kitium UI')),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              KtButton(
                variant: ComponentVariant.primary,
                onPressed: () => print('Clicked!'),
                child: const Text('Click Me'),
              ),
              const SizedBox(height: 16),
              KtBadge(
                content: 5,
                variant: ComponentVariant.error,
              ),
              const SizedBox(height: 16),
              KtCard(
                child: Padding(
                  padding: const EdgeInsets.all(16),
                  child: const Text('Card Content'),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Component Examples

Button

KtButton(
  variant: ComponentVariant.primary,
  size: ComponentSize.large,
  onPressed: () => print('Pressed'),
  child: const Text('Primary Button'),
)

Badge with Counts

// Shows "99+" when count exceeds maxCount
KtBadge(
  content: 150,
  maxCount: 99,
  variant: ComponentVariant.error,
)

Form Input

KtInput(
  label: 'Email',
  type: 'email',
  helperText: 'We\'ll never share your email',
  required: true,
)

Alert

KtAlert(
  variant: ComponentVariant.warning,
  title: 'Warning',
  message: 'This is a warning message',
  onClose: () => print('Alert closed'),
)

Card with Header

KtCard(
  header: 'Card Title',
  child: const Text('Card content goes here'),
  footer: 'Footer text',
)

Modal Dialog

KtModal(
  visible: true,
  title: 'Confirm Action',
  child: const Text('Are you sure?'),
  actions: [
    ModalAction(
      label: 'Cancel',
      onPress: () => print('Cancelled'),
    ),
    ModalAction(
      label: 'Confirm',
      onPress: () => print('Confirmed'),
      isDefault: true,
    ),
  ],
)

Tabs

KtTabs(
  items: [
    TabItem(
      label: 'Tab 1',
      child: const Text('Content 1'),
    ),
    TabItem(
      label: 'Tab 2',
      child: const Text('Content 2'),
    ),
  ],
)

Rating

KtRating(
  value: 3.5,
  onChange: (rating) => print('Rating: $rating'),
  max: 5,
  showLabel: true,
)

Theme Customization

All components use the Kitium theme system for consistent styling:

import 'package:kitiumai_flutter/kitiumai_flutter.dart';

// Access colors
final primaryColor = KitiumColors.darkBlue;
final errorColor = KitiumColors.red;

// Use theme utilities
final padding = KitiumTheme.getSizePadding(ComponentSize.medium);
final fontSize = KitiumTheme.getSizeFontSize(ComponentSize.large);

Component Variants

Most components support these variants:

• primary - Primary action color
• secondary - Secondary action color
• success - Success/positive state
• warning - Warning/attention state
• error - Error/danger state
• info - Informational state

Component Sizes

Components support these size options:

• small - Compact size
• medium - Standard size (default)
• large - Larger size

API Documentation

For detailed API documentation of each component, see the inline Dart documentation in the source code. Each component has:

• Detailed class documentation
• Parameter descriptions
• Usage examples
• Type information

Contributing

Contributions are welcome! Please:

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Submit a pull request

License

This project is licensed under the MIT License - see the LICENSE file for details.

Support

For issues and questions:

• GitHub Issues: https://github.com/kitium-ai/kitium-ui/issues
• GitHub Discussions: https://github.com/kitium-ai/kitium-ui/discussions

Changelog

See CHANGELOG.md for version history.

Related Packages

Kitium UI is available across multiple platforms:

• Web Components - Framework-agnostic custom elements
• React - React wrapper components
• Vue - Vue 3 components
• Angular - Angular components
• React Native - React Native components
• Svelte - Svelte components

All with the same consistent API!

---

Made with ❤️ by Kitium AI