AstraUI 🎨

A beautiful, modern Flutter UI component library inspired by shadcn/ui. Built with clean design principles and developer experience in mind.

Pub Version License

✨ Features

  • 🎯 37 Ready-to-use Components - Buttons, Inputs, Chips, Avatars, and more
  • 🎨 Beautiful Design - Soft, modern aesthetic with mint green, dusty rose, and soft peach colors
  • 🔧 Highly Customizable - Every component is fully customizable
  • 📱 Responsive - Works perfectly on mobile, tablet, and desktop
  • 🚀 Easy to Use - Simple, intuitive API
  • ♿ Accessible - Built with accessibility in mind
  • 🌐 Cross-platform - Android, iOS, Web, Windows, macOS, Linux

📦 Installation

Add this to your pubspec.yaml:

dependencies:
  astra_ui: ^0.1.0

Then run:

flutter pub get

🚀 Quick Start

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              // Solid Button
              AstraSolidButton(
                label: 'Click Me',
                onPressed: () => print('Clicked!'),
              ),

              SizedBox(height: 16),

              // Text Input
              AstraTextInput(
                label: 'Enter your name',
                placeholder: 'John Doe',
              ),

              SizedBox(height: 16),

              // Avatar
              AstraAvatar(
                initials: 'JD',
                size: 48,
              ),
            ],
          ),
        ),
      ),
    );
  }
}

📚 Available Components

🔘 Buttons (5)

  • AstraSolidButton - Solid filled button
  • AstraOutlineButton - Border only button
  • AstraGhostButton - Transparent button
  • AstraDestructiveButton - Danger/delete button
  • AstraLinkButton - Link style button with URL support

✏️ Inputs (4)

  • AstraTextInput - Text input with label and error states
  • AstraEmailInput - Email input with validation
  • AstraPasswordInput - Password input with show/hide toggle
  • AstraSearchInput - Search input with clear button

🎛️ Controls (1)

  • AstraToggle - Toggle switch

📋 Dropdowns (2)

  • AstraSimpleDropdown - Basic dropdown
  • AstraSearchDropdown - Searchable dropdown

📑 Tabs (3)

  • AstraLineTabs - Tabs with underline
  • AstraPillTabs - Pill-shaped tabs
  • AstraSegmentTabs - Segmented control tabs

🏷️ Chips (11)

  • AstraChip - Basic chip
  • AstraOutlineChip - Border chip
  • AstraSolidChip - Filled chip
  • AstraChoiceChip - Selectable chip
  • AstraDottedChip - Dotted border chip
  • AstraGradientChip - Gradient background chip
  • AstraGlowChip - Glowing chip
  • AstraPillChip - Pill-shaped chip
  • AstraIconOnlyChip - Icon-only chip
  • AstraStripedChip - Striped pattern chip
  • AstraAnimatedChip - Animated chip

👤 Avatars (6)

  • AstraAvatar - Basic circular avatar
  • AstraRingAvatar - Avatar with ring border
  • AstraGradientAvatar - Gradient background avatar
  • AstraStatusAvatar - Avatar with status indicator
  • AstraIconAvatar - Icon avatar
  • AstraGroupAvatar - Stacked avatars

🎨 Foundation (1)

  • AstraColors - Color palette
  • AstraIcon - Universal icon component

📖 Documentation

Buttons

AstraSolidButton

AstraSolidButton(
  label: 'Submit',
  onPressed: () {},
  leftIcon: Icons.check,
  rightIcon: Icons.arrow_forward,
)

Parameters:

  • label (String, required) - Button text
  • onPressed (VoidCallback?, required) - Tap callback
  • leftIcon (IconData?) - Icon on left side
  • rightIcon (IconData?) - Icon on right side

AstraOutlineButton

AstraOutlineButton(
  label: 'Cancel',
  onPressed: () {},
)

AstraLinkButton

AstraLinkButton(
  label: 'Visit Website',
  url: 'https://example.com',
  leftIcon: Icons.link,
)

Parameters:

  • url (String?) - URL to open
  • openInNewTab (bool) - Open in new tab (web only)

Inputs

AstraTextInput

AstraTextInput(
  label: 'Username',
  placeholder: 'Enter username',
  leftIcon: Icons.person,
  errorText: 'Username is required',
  disabled: false,
  multiline: false,
  maxLines: 1,
)

Parameters:

  • label (String?) - Input label
  • placeholder (String?) - Placeholder text
  • leftIcon (IconData?) - Left icon
  • rightIcon (IconData?) - Right icon
  • onRightIconTap (VoidCallback?) - Right icon tap callback
  • errorText (String?) - Error message
  • disabled (bool) - Disabled state
  • multiline (bool) - Multiline support
  • maxLines (int) - Max lines for multiline

AstraPasswordInput

AstraPasswordInput(
  label: 'Password',
  placeholder: 'Enter password',
)

Auto show/hide toggle included.

AstraSearchInput

AstraSearchInput(
  placeholder: 'Search...',
  onChanged: (value) => print(value),

  // Right icon support (e.g., filter button)
  rightIcon: Icons.tune,
  rightIconColor: AstraColors.mintGreen,
  onRightIconTap: () {
    // Open filter dialog
  },
)

Auto clear button included. When both clear button and right icon are present, both will be shown.

Chips

AstraChip

AstraChip(
  label: 'Tag',
  icon: Icons.star,
  onDeleted: () {},
  backgroundColor: AstraColors.lightGray,
)

AstraChoiceChip

AstraChoiceChip(
  label: 'Option',
  selected: true,
  onSelected: (value) {},
)

AstraGradientChip

AstraGradientChip(
  label: 'Premium',
  icon: Icons.star,
  gradientColors: [
    AstraColors.mintGreen,
    AstraColors.softPeach,
  ],
)

Avatars

AstraAvatar

AstraAvatar(
  initials: 'JD',
  size: 48,
  backgroundColor: AstraColors.mintGreen,
  textColor: Colors.white,

  // Network image URL
  imageUrl: 'https://example.com/avatar.jpg',

  // OR Local file path
  imagePath: '/path/to/local/image.jpg',

  // OR Asset image
  assetPath: 'assets/images/avatar.png',
)

Parameters:

  • initials (String?) - Initials to display
  • imageUrl (String?) - Network image URL
  • imagePath (String?) - Local file path
  • assetPath (String?) - Asset image path
  • size (double) - Avatar size (default: 48)
  • backgroundColor (Color) - Background color
  • textColor (Color) - Text color

Priority: assetPath > imagePath > imageUrl > initials

AstraStatusAvatar

// Factory constructors
AstraStatusAvatar.online(initials: 'JD', size: 48)
AstraStatusAvatar.offline(initials: 'JD', size: 48)
AstraStatusAvatar.busy(initials: 'JD', size: 48)
AstraStatusAvatar.away(initials: 'JD', size: 48)

AstraGroupAvatar

AstraGroupAvatar(
  size: 40,
  maxVisible: 3,
  avatars: [
    AvatarData(initials: 'AB'),
    AvatarData(initials: 'CD', backgroundColor: AstraColors.dustyRose),
    AvatarData(initials: 'EF', backgroundColor: AstraColors.softPeach),
    // More avatars...
  ],
)

Tabs

AstraLineTabs

AstraLineTabs(
  selectedIndex: 0,
  tabs: [
    AstraLineTabItem(label: 'Home', icon: Icons.home),
    AstraLineTabItem(label: 'Profile', icon: Icons.person),
  ],
  onTabChanged: (index) {},
)

AstraPillTabs

AstraPillTabs(
  selectedIndex: 0,
  tabs: [
    AstraPillTabItem(label: 'All'),
    AstraPillTabItem(label: 'Active'),
  ],
  onTabChanged: (index) {},
)

AstraSimpleDropdown

AstraSimpleDropdown<String>(
  label: 'Select Country',
  placeholder: 'Choose...',
  value: selectedValue,
  options: [
    DropdownOption(value: 'us', label: 'United States', icon: Icons.flag),
    DropdownOption(value: 'uk', label: 'United Kingdom', icon: Icons.flag),
  ],
  onChanged: (value) {},
)

AstraSearchDropdown

AstraSearchDropdown<String>(
  label: 'Search Country',
  placeholder: 'Type to search...',
  value: selectedValue,
  options: [...],
  onChanged: (value) {},
)

🎨 Colors

AstraUI comes with a beautiful color palette:

AstraColors.mintGreen    // #A8D5BA - Primary color
AstraColors.dustyRose    // #D4A5A5 - Secondary color
AstraColors.softPeach    // #F5D5C0 - Accent color
AstraColors.warmGray     // #4A4A4A - Text color
AstraColors.mutedGray    // #9E9E9E - Muted text
AstraColors.lightGray    // #E8E8E8 - Borders
AstraColors.offWhite     // #F9F9F9 - Background

📱 Example App

Check out the example app in the example/ folder for a complete showcase of all components.

Run the example:

cd example
flutter run

The example app includes:

  • Device Preview for testing responsive design
  • 7 tabs showcasing all components
  • Interactive examples with code

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

📄 License

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

🔗 Links

💖 Support

If you like this package, please give it a ⭐ on GitHub!

Made with ❤️ by DevStudio2k25

Libraries

astra_ui