astra_ui 0.1.2

A beautiful modern Flutter UI component library with 37+ components. Includes buttons inputs chips avatars tabs and more. Inspired by shadcn/ui.

AstraUI 🎨

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

✨ 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) {},
)

---

Dropdowns

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

• Pub.dev
• GitHub
• Component Status
• Changelog

💖 Support

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

---

Made with ❤️ by DevStudio2k25